:root {
  /* отступы от выреза и кнопок Telegram; в Telegram их перезаписывает index.html */
  --sa-top: env(safe-area-inset-top, 0px); --sa-right: env(safe-area-inset-right, 0px); --sa-bottom: env(safe-area-inset-bottom, 0px); --sa-left: env(safe-area-inset-left, 0px);
  --bg1: #1b1530;
  --bg2: #0f1a24;
  --panel: rgba(255, 255, 255, 0.06);
  --panel-border: rgba(255, 255, 255, 0.1);
  --text: #f1f0ff;
  --muted: #a9a6c7;
  --gold: #ffd166;
  --xp: #7ae582;
  --hp: #ff5d73;
  --common: #d9d9e3;
  --uncommon: #5ee07a;
  --legendary: #ff6b4a;
  --lunar: #5e8bff;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: radial-gradient(circle at 50% 20%, var(--bg1), var(--bg2) 70%);
  background-color: var(--bg2);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

#app {
  max-width: 480px;
  height: 100%;
  margin: 0 auto;
  padding: 12px 16px calc(12px + var(--sa-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- HUD ---------- */
.hud-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.level { font-weight: 700; font-size: 18px; }
.gold { font-weight: 700; font-size: 18px; color: var(--gold); }

.bar {
  position: relative;
  height: 18px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--panel-border);
  overflow: hidden;
}
.bar > div { height: 100%; width: 0; transition: width 0.15s ease-out; }
.bar span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; text-shadow: 0 1px 2px #000;
}
.xp > div { background: linear-gradient(90deg, #3fbf6a, var(--xp)); }
.hp > div { background: linear-gradient(90deg, #d93a55, var(--hp)); }

/* ---------- арена ---------- */
.arena {
  --ground: 9%; /* высота земли от низа сцены */
  isolation: isolate; /* слои персонажей остаются внутри арены, под окнами */
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--panel-border);
  touch-action: manipulation;
  cursor: pointer;
}

/* фон мира; пока картинка не загрузилась — мягкий «сонный» градиент */
.bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #1d4d4a 0%, #2f7a5c 55%, #1b3b2c 100%);
  background-size: cover;
  background-position: center bottom;
}
.bg::after {
  /* лёгкое затемнение сверху, чтобы читался текст */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 30%);
}
.bg.fade { animation: fadeIn 0.8s ease-out; }

.scene-top {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 12px 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}
.world { font-weight: 800; font-size: 17px; color: #f6efc8; }
.world small { font-weight: 600; color: var(--muted); margin-left: 4px; }
.monster-name { font-weight: 600; font-size: 13px; margin: 2px 0 6px; }
.monster-name small { color: var(--muted); font-weight: 500; }
.arena .hp { width: 70%; }

.monster {
  position: absolute;
  z-index: 1;
  bottom: var(--ground);
  left: 60%;
  width: min(36vw, 150px);
  height: min(36vw, 150px);
  pointer-events: none;
}
.monster .art { width: 100%; height: 100%; animation: walk 0.6s ease-in-out infinite; }
.monster .art.shake { animation: shake 0.18s; }
.monster.spawn { animation: fadeIn 0.35s ease-out; }
.monster .art .emoji { font-size: min(26vw, 110px); }

.art { display: flex; align-items: center; justify-content: center; }
.art img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.art .emoji { font-size: 1em; line-height: 1; }

.slime {
  position: absolute;
  z-index: 1;
  left: 4%;
  bottom: var(--ground);
  width: 104px;
  height: 104px;
  transform-origin: bottom center;
  transform: scale(var(--scale, 1));
  filter: hue-rotate(var(--hue, 0deg)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
  pointer-events: none;
}
.slime .art { width: 100%; height: 100%; }
.slime .fallback-svg { width: 100%; height: 100%; }
.slime.attack { animation: attack 0.22s ease-out; }
.slime.levelup { animation: levelup 0.6s ease-out; }
.slime.hurt { animation: hurt 0.4s ease-out; }

/* здоровье слайма висит над ним и поднимается вместе с ростом */
.slime-hp {
  position: absolute;
  z-index: 2;
  left: 4%;
  width: 104px;
  height: 14px;
  bottom: calc(var(--ground) + 104px * var(--scale, 1) + 6px);
  pointer-events: none;
}
.slime-hp > div { background: linear-gradient(90deg, #3fbf6a, #7ae582); }
.slime-hp span { font-size: 10px; }
.slime-hp.low > div { background: linear-gradient(90deg, #d93a55, #ff8a5d); }
.monster .art.bite { animation: bite 0.3s ease-out; }

.dps {
  position: absolute; z-index: 2; right: 12px; bottom: 8px;
  font-size: 13px; color: #fff; text-shadow: 0 1px 3px #000;
}

/* ---------- магазин ---------- */
.shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.shop-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 4px;
  border-radius: 16px;
  text-align: center;
  font-size: 13px;
  background: linear-gradient(180deg, #3a2f6b, #2a2250);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: transform 0.08s, opacity 0.2s;
}
.shop-btn small { color: var(--muted); font-size: 10px; }
.shop-btn:active { transform: scale(0.97); }
.shop-btn.poor { opacity: 0.55; }
.shop-btn.chest { background: linear-gradient(180deg, #6b4a1f, #4a3214); }
.shop-btn.big { background: linear-gradient(180deg, #2f6b4a, #1d4a31); border-color: rgba(94, 224, 122, 0.5); }
.shop-btn.big .shop-icon { width: 40px; height: 40px; filter: hue-rotate(80deg) saturate(1.3); }
.shop-icon { font-size: 26px; width: 34px; height: 34px; }
.shop-icon .emoji { font-size: 26px; }
.price { font-size: 13px; font-weight: 700; color: var(--gold); }

/* щит поверх здоровья слайма */
#slime-barrier {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: rgba(255, 209, 102, 0.55);
  border-right: 2px solid var(--gold);
}
/* ---------- босс ---------- */
.monster.boss { width: min(48vw, 200px); height: min(48vw, 200px); }
.monster.boss .art { filter: drop-shadow(0 0 14px rgba(255, 70, 70, 0.75)); animation-duration: 0.9s; }
.arena.boss-fight .bg { filter: saturate(1.2) brightness(0.8); }
.arena.boss-fight .monster-name { color: #ff8a7a; font-size: 15px; font-weight: 900; letter-spacing: 0.03em; }
.boss-timer { margin-top: 6px; font-weight: 800; font-size: 15px; color: #ffd166; min-height: 1em; }
.boss-timer.urgent { color: #ff5d73; animation: pulse 0.6s ease-in-out infinite; }

/* ---------- лунные монеты и предметы ---------- */
.hud-right { display: flex; align-items: center; gap: 12px; }
.lunar-btn {
  font-weight: 700; font-size: 15px; color: #a9b8ff;
  padding: 3px 10px; border-radius: 12px;
  background: rgba(94, 139, 255, 0.12); border: 1px solid rgba(94, 139, 255, 0.35);
}
.lunar-btn.has { color: #fff; background: rgba(94, 139, 255, 0.35); box-shadow: 0 0 12px rgba(94, 139, 255, 0.6); animation: pulse 1.4s ease-in-out infinite; }
.card.lunar { border-color: var(--lunar); background: linear-gradient(180deg, #24305e, #161d40); box-shadow: 0 0 18px rgba(94, 139, 255, 0.45); }
.card.lunar .card-rarity { color: var(--lunar); }
.item.lunar { border-color: var(--lunar); box-shadow: 0 0 10px rgba(94, 139, 255, 0.6); }
.card-desc .minus { color: #ff7a8a; display: block; margin-top: 3px; }
.float.t-lunar { color: #a9b8ff; font-size: 20px; }

.monster.slowed .art { filter: saturate(0.4) brightness(1.1) drop-shadow(0 0 6px #8fd8ff); animation-duration: 1.4s; }
.shop-btn.nope { animation: shake 0.25s; }

/* ---------- инвентарь ---------- */
.inv-title { font-size: 12px; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; }
.items { display: flex; flex-wrap: wrap; gap: 8px; min-height: 52px; }
.empty { font-size: 13px; color: var(--muted); align-self: center; }
.item {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid var(--common);
  padding: 6px;
}
.item .art { width: 100%; height: 100%; }
.item .emoji { font-size: 26px; }
.item.uncommon { border-color: var(--uncommon); }
.item.legendary { border-color: var(--legendary); box-shadow: 0 0 10px var(--legendary); }
.item .count {
  position: absolute; right: -4px; bottom: -4px;
  font-size: 11px; font-weight: 700;
  background: #000; border-radius: 8px; padding: 1px 5px;
}

.stats { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.link { font-size: 11px; color: var(--muted); text-decoration: underline; }

/* ---------- всплывающее ---------- */
.float {
  position: fixed;
  z-index: 10;
  transform: translate(-50%, -50%);
  font-weight: 800;
  font-size: 22px;
  color: #fff;
  text-shadow: 0 2px 4px #000;
  pointer-events: none;
  animation: floatUp 0.9s ease-out forwards;
}
.float.crit { color: var(--gold); font-size: 30px; }
.float.core { color: var(--legendary); font-size: 36px; }
.float.enemy { color: #ff5d73; font-size: 20px; }
.float.t-wisp { color: #b9a8ff; font-size: 16px; }
.float.t-poison { color: #b56bff; font-size: 15px; }
.float.t-fire { color: #ff9a3c; font-size: 15px; }
.float.t-missile, .float.t-bomb, .float.t-boom { color: #ffb15c; }
.float.t-dagger { color: #d27cff; }
.float.t-razor { color: #7ae582; font-size: 17px; }
.float.t-exec { color: #ff4a4a; font-size: 32px; }
.float.t-block { color: #8fd8ff; font-size: 18px; }
.float.t-gold { color: var(--gold); font-size: 18px; }

.toast {
  position: fixed;
  left: 50%;
  top: 70px;
  transform: translateX(-50%);
  z-index: 20;
  max-width: 90vw;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.8);
  font-size: 14px;
  text-align: center;
  transition: opacity 0.2s;
}
.hidden { opacity: 0; pointer-events: none; }

/* ---------- выбор карт (как в Stickman TD) ---------- */
.cards {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(5, 8, 16, 0.82);
  transition: opacity 0.2s;
}
.cards-box { width: 100%; max-width: 440px; }
.cards-title {
  text-align: center;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cards-sub { text-align: center; color: var(--muted); font-size: 13px; margin: 2px 0 14px; }
.cards-list { display: flex; flex-direction: column; gap: 10px; }
.card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  text-align: left;
  background: linear-gradient(180deg, #2c3a5c, #1e2842);
  border: 2px solid var(--common);
  animation: pop 0.3s ease-out backwards;
}
.card:nth-child(2) { animation-delay: 0.07s; }
.card:nth-child(3) { animation-delay: 0.14s; }
.card:active { transform: scale(0.98); }
.card.uncommon { border-color: var(--uncommon); }
.card.legendary { border-color: var(--legendary); box-shadow: 0 0 18px rgba(255, 107, 74, 0.5); }
.card-art {
  flex: none;
  width: 64px;
  height: 64px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.card-art .emoji { font-size: 40px; }
.card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.card-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; padding-right: 64px; }
.card-name { font-weight: 800; font-size: 14px; text-transform: uppercase; color: #dfe6ff; }
.card-rarity { font-size: 11px; color: var(--muted); white-space: nowrap; }
.card.uncommon .card-rarity { color: var(--uncommon); }
.card.legendary .card-rarity { color: var(--legendary); }
.card-desc { font-size: 13px; line-height: 1.35; font-weight: 600; }
.card-desc .num { color: #7ae582; }
.card-desc .kw { color: #c084ff; }
.card-badge {
  position: absolute;
  top: -9px;
  right: 10px;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 8px;
  background: #111827;
  color: var(--gold);
  border: 1px solid rgba(255, 209, 102, 0.5);
}
.card:disabled { opacity: 1; }
.cards-close {
  display: block;
  margin: 14px auto 0;
  padding: 10px 28px;
  border-radius: 12px;
  font-weight: 700;
  background: #5ee07a;
  color: #10301a;
}
.cards-close.hidden { display: none; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px) rotate(-2deg); }
  75% { transform: translateX(6px) rotate(2deg); }
}
@keyframes attack {
  0% { transform: scale(var(--scale, 1)); }
  40% { transform: translate(24px, -14px) scale(calc(var(--scale, 1) * 1.08), calc(var(--scale, 1) * 0.9)); }
  100% { transform: scale(var(--scale, 1)); }
}
@keyframes levelup {
  0% { transform: scale(var(--scale, 1)); }
  50% { transform: scale(calc(var(--scale, 1) * 1.3)); filter: hue-rotate(var(--hue, 0deg)) brightness(1.6); }
  100% { transform: scale(var(--scale, 1)); }
}
/* --k — размер по доле здоровья цели (floatNumber); подъём фиксированный, 36 px, а не доля высоты цифры */
@keyframes floatUp {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(calc(0.8 * var(--k, 1))); }
  20% { transform: translate(-50%, calc(-50% - 10px)) scale(calc(1.15 * var(--k, 1))); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 36px)) scale(var(--k, 1)); }
}
@keyframes walk {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}
@keyframes bite {
  0%, 100% { transform: translateX(0); }
  40% { transform: translateX(-26px) rotate(-6deg) scale(1.08); }
}
@keyframes hurt {
  0%, 100% { transform: scale(var(--scale, 1)); filter: hue-rotate(var(--hue, 0deg)); }
  30% { transform: translateX(-10px) scale(var(--scale, 1)); filter: hue-rotate(var(--hue, 0deg)) brightness(2) saturate(0); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* =====================================================================
   Пиксельная тема: вид сверху 3/4, 16-bit, палитра леса, дерева и камня
   ===================================================================== */
:root {
  --px-ink: #1d1a14;
  --wood: #7a4f2b;
  --wood-light: #b07c45;
  --wood-dark: #4f3018;
  --text: #f7f1dc;
  --muted: #cdbf98;
  --gold: #ffd25e;
  --xp: #7ccf5a;
  --hp: #e0524a;
}
html, body {
  background: #1f2f1b;
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.06) 0 4px, transparent 4px 8px);
  font-family: 'Pixelify Sans', system-ui, sans-serif;
}
img, .bg { image-rendering: pixelated; image-rendering: crisp-edges; }
.level, .gold, .world, .cards-title, .price, .lunar-btn, .boss-timer { font-family: 'Press Start 2P', monospace; }
.level, .gold { font-size: 13px; }
.world { font-size: 11px; line-height: 1.5; }
.monster-name { font-size: 14px; }
.cards-title { font-size: 15px; letter-spacing: 0; line-height: 1.6; }
.price { font-size: 10px; }
.lunar-btn { font-size: 11px; }
.boss-timer { font-size: 11px; }
.scene-top, .dps, .float { text-shadow: 2px 2px 0 #000; }

/* ступенчатые рамки вместо скруглений */
.arena, .shop-btn, .card, .card-art, .item, .bar, .cards-close, .toast, .lunar-btn, .card-badge, .item .count { border-radius: 0 !important; }
.arena {
  border: 0;
  margin: 6px;
  box-shadow: 0 0 0 3px var(--px-ink), 0 0 0 6px var(--wood-light), 0 0 0 9px var(--px-ink);
}
.bar { border: 2px solid var(--px-ink); background: #2a2418; }
.bar > div, .xp > div, .hp > div, .slime-hp > div { background: var(--xp); }
.hp > div { background: var(--hp); }
.slime-hp.low > div { background: #f08a3c; }
.bar span { font-size: 11px; text-shadow: 1px 1px 0 #000; }

.shop-btn {
  border: 0;
  background: var(--wood);
  box-shadow: inset 0 4px 0 var(--wood-light), inset 0 -4px 0 var(--wood-dark), 0 0 0 3px var(--px-ink);
}
.shop-btn.chest { background: #8f6a2a; box-shadow: inset 0 4px 0 #c49a46, inset 0 -4px 0 #5e4317, 0 0 0 3px var(--px-ink); }
.shop-btn.big { background: #3f6b34; box-shadow: inset 0 4px 0 #6fa35a, inset 0 -4px 0 #26441f, 0 0 0 3px var(--px-ink); }
.shop-btn small { color: #f0e2b8; }
.shop-btn:active { transform: translateY(2px); }

.item { border: 3px solid var(--common); background: #2a2014; }
.item .count { background: var(--px-ink); font-family: 'Press Start 2P', monospace; font-size: 8px; padding: 2px 3px; }
.inv-title, .stats { font-family: 'Press Start 2P', monospace; font-size: 8px; }

.cards { background: rgba(12, 16, 9, 0.88); }
.card {
  border: 0;
  background: #3a2a1a;
  box-shadow: inset 0 0 0 3px var(--common), 0 0 0 3px var(--px-ink);
}
.card.uncommon { box-shadow: inset 0 0 0 3px var(--uncommon), 0 0 0 3px var(--px-ink); }
.card.legendary { box-shadow: inset 0 0 0 3px var(--legendary), 0 0 0 3px var(--px-ink), 0 0 16px rgba(255,107,74,.5); }
.card.lunar { background: #1e2442; box-shadow: inset 0 0 0 3px var(--lunar), 0 0 0 3px var(--px-ink), 0 0 16px rgba(94,139,255,.45); }
.card-art { background: #2a1f14; border: 2px solid var(--px-ink); }
.card-name { color: #fff3d0; font-size: 15px; }
.card-desc { font-weight: 400; font-size: 14px; }
.card-badge { font-family: 'Press Start 2P', monospace; font-size: 8px; background: var(--px-ink); border: 2px solid var(--gold); }
.cards-close { background: var(--xp); color: var(--px-ink); box-shadow: 0 0 0 3px var(--px-ink); font-family: 'Press Start 2P', monospace; font-size: 11px; }
.toast { background: #2b2014; border: 3px solid var(--wood-light); font-size: 15px; }
.lunar-btn { border: 2px solid var(--px-ink); }
.float { font-family: 'Press Start 2P', monospace; font-size: 14px; }
.float.crit { font-size: 19px; }
.float.core, .float.t-exec { font-size: 22px; }
.float.t-wisp, .float.t-poison, .float.t-fire { font-size: 10px; }

/* ---------- сцена сверху: слайм внизу, монстр идёт сверху ---------- */
.bg { background-position: center center; }
.bg::after { background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 22%); }
.slime { left: calc(50% - 52px); bottom: var(--ground); }
.slime-hp { left: calc(50% - 52px); bottom: calc(var(--ground) - 20px); }
.monster {
  left: calc(50% - min(18vw, 75px));
  bottom: auto;
  top: 90px;
  transform: scale(var(--depth, 1));
  transform-origin: 50% 100%;
}
.monster.boss { left: calc(50% - min(24vw, 100px)); }
.dps { bottom: 6px; }

@keyframes attack {
  0%, 100% { transform: scale(var(--scale, 1)); }
  40% { transform: translateY(-22px) scale(calc(var(--scale, 1) * 0.92), calc(var(--scale, 1) * 1.1)); }
}
@keyframes bite {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(24px) scale(1.06); }
}
@keyframes hurt {
  0%, 100% { transform: scale(var(--scale, 1)); filter: hue-rotate(var(--hue, 0deg)); }
  30% { transform: translateY(8px) scale(var(--scale, 1)); filter: hue-rotate(var(--hue, 0deg)) brightness(2) saturate(0); }
}
@keyframes walk {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.shop-btn { font-size: 15px; }
.shop-btn small { font-size: 12px; }

/* =====================================================================
   MVP v2: читаемый шрифт, маленькие монстры по клеткам, слайм со спины с мечом
   ===================================================================== */
html, body, .level, .gold, .world, .cards-title, .price, .lunar-btn, .boss-timer,
.inv-title, .stats, .item .count, .card-badge, .cards-close, .float, .toast, .shop-btn {
  font-family: 'Rubik', system-ui, sans-serif;
}
.level, .gold { font-size: 18px; font-weight: 800; }
.world { font-size: 15px; font-weight: 800; }
.cards-title { font-size: 22px; font-weight: 800; letter-spacing: 0.04em; }
.price { font-size: 13px; font-weight: 800; }
.lunar-btn { font-size: 14px; font-weight: 800; }
.boss-timer { font-size: 15px; }
.inv-title, .stats { font-size: 11px; }
.item .count { font-size: 11px; font-weight: 800; }
.card-badge { font-size: 11px; font-weight: 800; }
.cards-close { font-size: 14px; font-weight: 800; }
.card-name { font-weight: 800; }
.card-desc { font-weight: 500; }
.float { font-weight: 800; font-size: 20px; }
.float.crit { font-size: 26px; }
.float.core, .float.t-exec { font-size: 30px; }
.float.t-wisp, .float.t-poison, .float.t-fire { font-size: 13px; }
.shop-btn b { font-weight: 800; }
.scene-top { padding-top: 8px; }

/* ---------- монстр: маленький, с именем и здоровьем над головой ---------- */
.monster {
  width: 110px;
  height: auto;
  left: calc(50% - 55px);
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(var(--depth, 1));
  transform-origin: 50% 100%;
  transition: top 0.16s steps(2, end);
}
.monster .art { width: 72px; height: 72px; animation: none; }
.monster .art img { transition: none; }
.monster .art.flip img { transform: scaleX(-1); }
.monster .art.hop { animation: hop 0.16s steps(2, end); }
.monster .art.shake { animation: shake 0.18s; }
.monster .art.bite { animation: bite 0.3s ease-out; }
.monster .art .emoji { font-size: 54px; }
.monster.boss { width: 150px; left: calc(50% - 75px); }
.monster.boss .art { width: 120px; height: 120px; }
.monster.boss .art .emoji { font-size: 90px; }
.mon-label { text-align: center; margin-bottom: 2px; text-shadow: 2px 2px 0 #000; pointer-events: none; }
.mon-label .monster-name { font-size: 12px; font-weight: 700; margin: 0 0 2px; white-space: nowrap; }
.mon-label .bar.hp { width: 92px; height: 11px; margin: 0 auto; }
.mon-label .bar span { font-size: 9px; }
.monster.boss .mon-label .bar.hp { width: 130px; height: 13px; }
.arena.boss-fight .monster-name { font-size: 13px; }

/* ---------- слайм со спины и меч ---------- */
.slime { width: 96px; height: 96px; left: calc(50% - 48px); }
.slime-hp { width: 96px; left: calc(50% - 48px); bottom: calc(var(--ground) - 18px); }
.sword {
  position: absolute;
  right: -18px;
  bottom: 26px;
  width: 34px;
  height: 52px;
  transform-origin: 50% 92%;
  transform: rotate(-18deg);
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,.45));
}
.sword .emoji { font-size: 34px; }
.sword.swing { animation: swing 0.22s ease-out; }

/* вспышка удара по монстру */
.slash {
  position: fixed;
  z-index: 9;
  width: 74px;
  height: 74px;
  margin: -37px 0 0 -37px;
  border-radius: 50%;
  border-top: 6px solid #fffbe8;
  border-right: 3px solid rgba(255, 251, 232, 0.6);
  pointer-events: none;
  animation: slash 0.24s ease-out forwards;
}
.slash.crit { border-top-color: var(--gold); border-right-color: rgba(255, 210, 94, 0.7); width: 96px; height: 96px; margin: -48px 0 0 -48px; }

/* подсказка новичку */
.tap-hint {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: max-content;
  bottom: calc(var(--ground) + 112px);
  padding: 6px 12px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  background: rgba(29, 26, 20, 0.85);
  border: 2px solid var(--wood-light);
  pointer-events: none;
  animation: pulse 1.2s ease-in-out infinite;
}
.tap-hint.hidden { display: none; }

@keyframes hop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes swing {
  0% { transform: rotate(-18deg); }
  35% { transform: rotate(-80deg) translateY(-6px); }
  70% { transform: rotate(70deg) translateY(-10px); }
  100% { transform: rotate(-18deg); }
}
@keyframes slash {
  0% { opacity: 1; transform: rotate(-60deg) scale(0.5); }
  100% { opacity: 0; transform: rotate(40deg) scale(1.15); }
}
@keyframes attack {
  0%, 100% { transform: scale(var(--scale, 1)); }
  40% { transform: translateY(-10px) scale(calc(var(--scale, 1) * 0.94), calc(var(--scale, 1) * 1.06)); }
}
.sword img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.tap-hint { bottom: auto; top: 40px; }

/* =====================================================================
   v3: арена — слайм в центре, монстры идут со всех сторон
   ===================================================================== */
.scene-top { position: relative; z-index: 2000; }
.boss-bar { margin-top: 4px; text-align: center; }
.boss-bar.hidden { display: none; }
.boss-name { font-weight: 800; font-size: 13px; color: #ff9a8a; text-shadow: 2px 2px 0 #000; }
.boss-bar .bar.hp { width: 200px; height: 12px; margin: 2px auto 0; }
.boss-bar .bar span { font-size: 9px; }

.mons { position: absolute; inset: 0; pointer-events: none; }
.mon {
  position: absolute;
  left: 0; top: 0;
  width: 56px;
  margin: -64px 0 0 -28px;      /* точка позиции — под ногами монстра */
  display: flex; flex-direction: column; align-items: center;
}
.mon.boss { width: 112px; margin: -122px 0 0 -56px; }
.mon .art { width: 48px; height: 48px; }
.mon.boss .art { width: 104px; height: 104px; }
.mon .art img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.mon .art .emoji { font-size: 36px; }
.mon.boss .art .emoji { font-size: 72px; }
.mon .art.flip img { transform: scaleX(-1); }
.mon .art.hop { animation: hop 0.14s steps(2, end); }
.mon .art.shake { animation: shake 0.15s; }
.mon .art.bite { animation: monbite 0.25s ease-out; }
.mon-hp { width: 40px; height: 6px; background: #1d1a14; border: 1px solid #000; margin-bottom: 2px; }
.mon.boss .mon-hp { width: 80px; height: 8px; }
.mon-hp i { display: block; height: 100%; width: 100%; background: var(--hp); }
.mon.boss .art img { filter: drop-shadow(0 0 8px rgba(255, 60, 60, 0.7)); }
.mon.slowed .art img { filter: saturate(0.4) brightness(1.15) drop-shadow(0 0 4px #8fd8ff); }
.mon.spawn { animation: fadeIn 0.3s ease-out; }
.mon.dying { transition: opacity 0.25s, filter 0.25s; opacity: 0; filter: brightness(3); }

/* слайм: контейнер стоит в центре, тело — полоска из 4 кадров (покой, замах, кулак, отдача) */
.slime, #slime {
  position: absolute;
  left: calc(var(--cx) - 54px);
  top: calc(var(--cy) - 84px);
  bottom: auto;
  width: 208px;
  height: 96px;
  transform: none;
  filter: none;
  pointer-events: none;
}
.slime-body {
  width: 208px;
  height: 96px;
  background: url("assets/slime-punch.png") 0 0 / 832px 96px no-repeat;
  background-position-x: calc(var(--frame, 0) * -208px);
  image-rendering: pixelated;
  transform: scaleX(var(--face, 1));
  transform-origin: 54px 50%;      /* поворот вокруг центра тела, а не всего кадра */
  filter: hue-rotate(var(--hue, 0deg)) drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.35));
}
.slime-body.hurt { animation: slimehurt 0.3s ease-out; }
#slime .slime-hp { position: absolute; left: 6px; top: 98px; bottom: auto; width: 96px; }

/* слаймовый сплэш: 4 кадра */
.splash {
  position: fixed;
  z-index: 9; /* над ареной, но под окном выбора предмета (30) */
  width: 80px;
  height: 88px;
  margin: -44px 0 0 -40px;
  background: url("assets/splash.png") 0 0 / 320px 88px no-repeat;
  background-position-x: calc(var(--frame, 0) * -80px);
  image-rendering: pixelated;
  pointer-events: none;
}
.splash.big { transform: scale(1.5); }

.tap-hint { top: 44px; z-index: 2001; }

@keyframes monbite {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.15) translateY(4px); }
}
@keyframes slimehurt {
  0%, 100% { transform: scaleX(var(--face, 1)); }
  30% { transform: scaleX(var(--face, 1)) translateY(4px) scale(0.95, 1.05); filter: brightness(2.2) saturate(0); }
}
/* v3.1: слайм поменьше (тело ~70 px), чтобы монстры читались рядом с ним */
.slime, #slime { left: calc(var(--cx) - 35px); top: calc(var(--cy) - 56px); width: 135px; height: 62px; }
.slime-body {
  width: 135px; height: 62px;
  background-size: 540px 62px;
  background-position-x: calc(var(--frame, 0) * -135px);
  transform-origin: 35px 50%;
}
#slime .slime-hp { left: 0; top: 64px; width: 70px; height: 12px; }
#slime .slime-hp span { font-size: 9px; }

/* =====================================================================
   v4: вид сбоку — герой слева на дороге, монстры справа, места помощников
   ===================================================================== */
/* герой крупнее: кадр 104×48 × 1.6 = 166×77, центр тела в 43 px от левого края кадра */
.slime, #slime { left: calc(var(--cx) - 43px); top: calc(var(--cy) - 70px); width: 166px; height: 77px; }
.slime-body {
  width: 166px; height: 77px;
  background-size: 664px 77px;
  background-position-x: calc(var(--frame, 0) * -166px);
  transform-origin: 43px 50%;
}
#slime .slime-hp { left: 0; top: 80px; width: 86px; height: 12px; }

/* места помощников: полупрозрачные «пьедесталы» с замком */
.helper-slot {
  position: absolute;
  width: 46px; height: 46px;
  margin: -40px 0 0 -23px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 243, 208, 0.55);
  background: rgba(29, 26, 20, 0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  pointer-events: none;
}
.helper-slot span { opacity: 0.8; filter: grayscale(0.3); }

/* монстры идут справа: смотрят влево (спрайты нарисованы анфас, лёгкий наклон к герою) */
.mon .art img { transform: scaleX(-1); }
.mon .art.flip img { transform: none; }

.tap-hint { top: auto; bottom: 10px; }
.helper-slot { width: 40px; height: 40px; margin: -36px 0 0 -20px; font-size: 14px; }
.tap-hint { white-space: normal; max-width: 90%; text-align: center; font-size: 12px; }

/* Лицо следует за телом в каждом из четырёх кадров удара. */
.slime-body { position: relative; }
.slime-face {
  position: absolute; left: 33px; top: 34px; width: 30px; height: 25px;
  transform-origin: center; pointer-events: none;
}
.slime-eye {
  position: absolute; top: 0; width: 6px; height: 10px;
  background: #173123; box-shadow: 0 2px 0 #468634;
  animation: slime-blink 4.6s infinite;
}
.slime-eye::after { content: ''; position: absolute; top: 1px; left: 1px; width: 2px; height: 3px; background: #f7ffd5; }
.slime-eye.left { left: 0; }
.slime-eye.right { right: 0; }
.slime-mouth { position: absolute; top: 15px; left: 10px; width: 11px; height: 5px; border: 2px solid #173123; border-top: 0; }
#slime[data-frame="1"] .slime-face { left: 24px; top: 32px; transform: rotate(-12deg); }
#slime[data-frame="2"] .slime-face { left: 23px; top: 43px; transform: rotate(8deg) scaleY(.75); }
#slime[data-frame="3"] .slime-face { left: 33px; top: 36px; transform: scaleY(.9); }
#slime[data-frame="1"] .slime-eye,
#slime[data-frame="2"] .slime-eye { animation: none; height: 5px; top: 4px; }
#slime[data-frame="2"] .slime-mouth { height: 3px; border-top: 2px solid #173123; border-bottom: 0; }
.slime-body.hurt .slime-eye { animation: none; height: 3px; top: 4px; transform: rotate(18deg); }
.slime-body.hurt .slime-eye.right { transform: rotate(-18deg); }
.slime-body.hurt .slime-eye::after { display: none; }
.slime-body.hurt .slime-mouth { border: 2px solid #173123; height: 7px; width: 7px; left: 12px; }
.slime-face.happy { animation: face-cheer .65s ease-out; }
.slime-face.happy .slime-eye { height: 4px; border-top: 2px solid #173123; background: transparent; animation: none; }
.slime-face.happy .slime-eye::after { display: none; }
.slime-face.happy .slime-mouth { height: 8px; background: #173123; border-bottom: 3px solid #e58b87; }
@keyframes slime-blink { 0%, 43%, 47%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.15); } }
@keyframes face-cheer { 0%, 100% { translate: 0 0; } 35% { translate: 0 -4px; } }
.sound-toggle { min-width: 36px; min-height: 36px; padding: 4px; font-size: 19px; border: 2px solid var(--wood-light); background: #293a24; }
.sound-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sound-toggle[aria-pressed="false"] { opacity: .65; }
.monster-burst { position: absolute; z-index: 1500; pointer-events: none; }
.monster-burst i { position: absolute; width: 7px; height: 7px; margin: -3px; background: #c4ef77; box-shadow: 2px 2px 0 #487d31; animation: monster-pop .42s ease-out forwards; }
.monster-burst i:nth-child(even) { background: #fff0a8; width: 5px; height: 5px; }
.monster-burst.boss i { background: #ffd25e; width: 10px; height: 10px; }
@keyframes monster-pop { from { transform: translate(0, 0) scale(1.4); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(100deg) scale(.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .slime-eye { animation: none; } .monster-burst { display: none; } }

/* Половинный размер героя; полоса здоровья остаётся читаемой. */
#slime { left: calc(var(--cx) - 21.5px); top: calc(var(--cy) - 35px); transform: scale(.5); transform-origin: 0 0; }
#slime .slime-hp { width: 50px; height: 10px; left: -7px; top: 80px; transform: scale(2); transform-origin: 0 0; }
#slime .slime-hp span { font-size: 8px; }
.town[hidden] { display: none; }
.town { position: fixed; inset: 0; z-index: 25; display: grid; place-items: center; padding: 20px; overflow-y: auto; background: #17261bee; }
.town-panel { width: min(100%, 420px); padding: 24px 20px; background: #293a24; border: 3px solid var(--wood-light); box-shadow: 0 0 0 4px var(--px-ink), inset 0 5px #426039; }
.town-eyebrow { color: #a3d68b; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.town h1 { margin: 10px 0; font-size: 27px; }
.town p { font-size: 14px; line-height: 1.5; }
.town-status { display: flex; justify-content: space-between; padding: 12px; background: #18281a; color: var(--gold); }
.town-status span:first-child { color: var(--xp); }
.town .town-note { color: var(--muted); font-size: 12px; }
.town-upgrade { display: flex; flex-direction: column; gap: 7px; width: 100%; margin: 12px 0; padding: 16px 12px; text-align: left; background: var(--wood-dark); border: 2px solid var(--wood-light); }
.town-upgrade span { font-size: 12px; color: var(--gold); }
.town-upgrade:disabled { opacity: .5; cursor: default; }
.town-leave { width: 100%; margin-top: 10px; padding: 15px 10px; font-weight: 800; background: #7ccf5a; color: #132b16; box-shadow: inset 0 -4px #488b32; }
.town button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.mon .side-sprite { width: 56px; height: 56px; background-size: 112px 56px; background-repeat: no-repeat; image-rendering: pixelated; }
.sprite-mushroom { background-image: url('assets/monster-mushroom-side.png'); }
.sprite-goblin { background-image: url('assets/monster-goblin-side.png'); }
.sprite-bat { background-image: url('assets/monster-bat-side.png'); animation: bat-flap .4s steps(1) infinite; }
.mon .side-sprite.flip { background-position-x: -56px; }
@keyframes bat-flap { 0%, 100% { background-position-x: 0; } 50% { background-position-x: -56px; } }
:root { --common: #adb2b7; --rare: #58a6ff; --epic: #c084fc; --legendary: #ffd25e; --lunar: #6de3df; }
.card.rare, .item.rare { border-color: var(--rare); }
.card.epic, .item.epic { border-color: var(--epic); }
.card.rare .card-rarity { color: var(--rare); }
.card.epic .card-rarity { color: var(--epic); }
.card.legendary { box-shadow: 0 0 14px #ffd25e55; }
.card.lunar { box-shadow: 0 0 14px #6de3df55; }
.item.lunar { box-shadow: 0 0 10px #6de3df55; }
.chest-odds { display: flex; flex-direction: column; gap: 2px; }
.shop-btn .chest-odds { font-size: 8px; line-height: 1.3; }

.evolution[hidden], #evolved-art[hidden] { display: none; }
.evolution { position: fixed; inset: 0; z-index: 40; overflow-y: auto; background: #111b16f5; padding: 24px 16px; }
.evolution-panel { max-width: 460px; margin: auto; padding: 20px; background: #293a24; border: 3px solid var(--wood-light); }
.evolution h2 { margin: 10px 0; font-size: 24px; }
.evolution p { color: var(--muted); font-size: 13px; line-height: 1.5; }
.evolution-option { display: flex; width: 100%; align-items: center; gap: 12px; text-align: left; padding: 12px 8px; margin: 12px 0; border: 2px solid #8d8057; background: #19291d; }
.evolution-option img { width: 70px; height: 70px; object-fit: contain; flex-shrink: 0; }
.evolution-option span, .evolution-leaf span { display: flex; flex-direction: column; gap: 5px; }
.evolution-option strong { color: var(--gold); font-size: 12px; }
.evolution-option small, .evolution-leaf small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.evolution-option:hover, .evolution-option:focus-visible { border-color: var(--gold); background: #33442a; outline: none; }
.evolution-preview { display: block; width: 160px; height: 160px; object-fit: contain; margin: 10px auto; }
.evolution-branch { border-left: 3px solid #66715d; margin: 16px 0; padding-left: 12px; }
.evolution-branch.selected { border-color: var(--gold); }
.evolution-branch h3 { font-size: 16px; color: var(--gold); }
.evolution-path { margin: 12px 0; font-size: 13px; }
.evolution-leaf { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px; background: #17281b; font-size: 11px; }
.evolution-leaf img { width: 52px; height: 52px; }
.evolution button[hidden] { display: none; }
.evo-status { position: absolute; z-index: 2001; top: 40px; left: 8px; right: 8px; text-align: center; font-size: 10px; color: #f5e8ae; text-shadow: 1px 1px #000; pointer-events: none; }
#evolved-art { position: absolute; left: -7px; top: -30px; width: 100px; height: 100px; object-fit: contain; transform-origin: 50% 95%; image-rendering: pixelated; animation: evo-idle 1.6s steps(2) infinite; }
#slime.evolved .slime-body { visibility: hidden; }
#slime.awakened .slime-body::after { content:''; position: absolute; left: 38px; top: 49px; width: 10px; height: 10px; background: #d6ff91; box-shadow: 0 0 12px #d6ff91; }
#evolved-art.evo-attack { animation: evo-strike .2s steps(3); }
#evolved-art.evo-hurt { animation: evo-pain .3s steps(3); }
#evolved-art.evo-cast { animation: evo-magic .45s steps(3); }
.evo-summon { position: absolute; width: 18px; height: 18px; background: #72e5da; border: 3px solid #d1ffff; border-radius: 40%; z-index: 1500; pointer-events:none; animation: spirit-dash .6s ease-out forwards; }
@keyframes evo-idle { 50% { transform: translateY(-3px) scaleY(1.03); } }
@keyframes evo-strike { 40% { transform: translateX(17px) rotate(8deg) scaleX(1.1); } }
@keyframes evo-pain { 40% { transform: translateX(-6px); filter: brightness(2); } }
@keyframes evo-magic { 50% { transform: translateY(-8px); filter: brightness(1.7) drop-shadow(0 0 6px #adf8ff); } }
@keyframes spirit-dash { to { transform: translateX(80px) scale(.3); opacity:0; } }
@media (prefers-reduced-motion: reduce) { #evolved-art { animation: none; } }

/* =====================================================================
   v5: разные удары по формам героя
   ===================================================================== */
/* покачивание в покое — плавное, а не двумя рывками */
#evolved-art { animation: evo-idle 1.6s ease-in-out infinite; }
@keyframes evo-idle { 50% { transform: translateY(-3px) scale(1.02, .98); } }
/* выпад с оружием: короткий замах назад, рывок вперёд, возврат */
#evolved-art.evo-attack { animation: evo-lunge .26s ease-out; }
@keyframes evo-lunge {
  0% { transform: none; }
  30% { transform: translateX(-6px) scale(1.05, .95); }
  55% { transform: translateX(22px) scale(.96, 1.04); }
  100% { transform: none; }
}
/* колдовство: приподнялся и засветился */
#evolved-art.evo-cast { animation: evo-spell .32s ease-out; }
@keyframes evo-spell {
  0% { transform: none; filter: none; }
  40% { transform: translateY(-8px) scale(1.04); filter: brightness(1.5) drop-shadow(0 0 6px #9fe8ff); }
  100% { transform: none; filter: none; }
}

.fx { position: fixed; z-index: 9; pointer-events: none; }
/* взмах клинка: дуга поворачивается сверху вниз */
.fx-slash {
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 3px solid transparent; border-top-color: var(--c); border-right-color: var(--c);
  filter: drop-shadow(0 0 4px var(--g));
  scale: var(--s); animation: fx-slash .24s ease-out forwards;
}
.fx-slash.heavy { border-width: 5px; }
.fx-slash.rev { animation-name: fx-slash-rev; }
@keyframes fx-slash { from { rotate: -100deg; opacity: 1; } to { rotate: 50deg; opacity: 0; } }
@keyframes fx-slash-rev { from { rotate: 170deg; opacity: 1; } to { rotate: 20deg; opacity: 0; } }
/* три следа когтей */
.fx-claw { width: 30px; height: 32px; margin: -16px 0 0 -15px; rotate: 25deg; scale: var(--s); filter: drop-shadow(0 0 3px var(--g)); }
.fx-claw i { position: absolute; top: 0; width: 3px; height: 0; background: var(--c); animation: fx-claw .3s ease-out forwards; }
.fx-claw.heavy i { width: 5px; }
.fx-claw i:nth-child(1) { left: 2px; }
.fx-claw i:nth-child(2) { left: 13px; animation-delay: .03s; }
.fx-claw i:nth-child(3) { left: 24px; animation-delay: .06s; }
@keyframes fx-claw { 0% { height: 0; opacity: 1; } 45% { height: 32px; opacity: 1; } 100% { height: 32px; opacity: 0; } }
/* магия: руна под ногами и снаряд */
.fx-rune {
  width: 54px; height: 16px; margin: -8px 0 0 -27px; border-radius: 50%;
  border: 2px dashed var(--c); box-shadow: 0 0 8px var(--g), inset 0 0 6px var(--g);
  animation: fx-rune .42s ease-out forwards;
}
@keyframes fx-rune { from { scale: .8; opacity: 1; } 60% { opacity: 1; } to { scale: 1.4; opacity: 0; } }
.fx-orb { width: 10px; height: 10px; border-radius: 3px; background: var(--c); box-shadow: 0 0 8px 3px var(--g); transform: translate(-50%, -50%); }
/* разлёт частиц */
.fx-burst i { position: absolute; left: 0; top: 0; }
.fx-burst.sparks i { box-shadow: 0 0 4px var(--g); }
.fx-burst.arcane i { box-shadow: 0 0 5px var(--g); }
.fx-burst .ring {
  position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 3px solid var(--c); box-shadow: 0 0 8px var(--g);
  animation: fx-ring .4s ease-out forwards;
}
@keyframes fx-ring { from { scale: .2; opacity: 1; } to { scale: calc(var(--s) * 1.4); opacity: 0; } }

/* =====================================================================
   v6: помощники из таверны
   ===================================================================== */
.helper-slot.filled { border: 0; background: none; overflow: visible; }
.helper-slot.filled img {
  position: absolute; left: 50%; bottom: -2px; width: 48px; height: 48px; margin-left: -24px;
  image-rendering: pixelated; transform-origin: 50% 100%;
  filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, .35));
  animation: helper-idle 1.8s ease-in-out infinite;
}
.helper-slot.filled:nth-child(odd) img { animation-delay: -.6s; }
.helper-slot.filled img.helper-act { animation: helper-act .28s ease-out; }
.helper-lvl {
  position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  padding: 0 4px; font-size: 9px; line-height: 12px; color: #f5e8ae; background: #1d1a14d9; border: 1px solid #8d8057;
}
@keyframes helper-idle { 50% { transform: translateY(-2px) scale(1.02, .98); } }
@keyframes helper-act { 35% { transform: translateX(6px) scale(1.06, .94); filter: brightness(1.35); } }

/* снаряды помощников */
.fx-proj { transform: translate(-50%, -50%); }
.fx-proj.arrow { width: 16px; height: 2px; background: linear-gradient(90deg, #f2efe6 0 3px, #8a5a2b 3px 13px, #dfe6ea 13px); }
.fx-proj.fireball { width: 10px; height: 10px; border-radius: 3px; background: #ffd25e; box-shadow: 0 0 6px 3px #ff7a1f, 0 0 12px 5px #ff3d1f88; }
.fx-proj.leaf { width: 7px; height: 7px; background: #9cff7a; box-shadow: 0 0 6px 2px #4fd16b; }
.fx-proj.hammer { width: 8px; height: 8px; background: #c9d2d8; border: 2px solid #5b6770; }
/* режим «Автобой»: снаряд героя — временная тестовая точка; строка DMG · ATK · CRIT в HUD */
.fx-proj.auto { width: var(--ps, 6px); height: var(--ps, 6px); border-radius: 50%; background: #e8ffd4; box-shadow: 0 0 5px 2px #8cff6a, 0 0 10px 4px #4fd16b66; z-index: 12; }
.auto-stats { display: flex; gap: 12px; justify-content: center; margin-top: 2px; font-size: 11px; font-weight: 800; letter-spacing: .02em; color: #cfe0c0; text-shadow: 0 1px 2px #000, 0 0 4px #000; pointer-events: none; }
.auto-stats b { color: #fff; }
.auto-stats[hidden] { display: none; }
.auto-mode .tap-hint { display: none; }
.settings-note { display: block; font-size: 11px; font-weight: 400; opacity: .75; margin-top: 2px; }
.fx-heal {
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  background:
    linear-gradient(#7dff8a, #7dff8a) 50% 50% / 4px 14px no-repeat,
    linear-gradient(#7dff8a, #7dff8a) 50% 50% / 14px 4px no-repeat;
  filter: drop-shadow(0 0 4px #3fd16b);
  animation: fx-heal .7s ease-out forwards;
}
@keyframes fx-heal { from { translate: 0 6px; opacity: 1; } to { translate: 0 -26px; opacity: 0; } }

/* таверна */
.tavern-row { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; padding: 10px 8px; background: #19291d; border: 2px solid #5d5a40; }
.tavern-row.hired { border-color: var(--gold); }
.tavern-row > img { width: 72px; height: 72px; flex-shrink: 0; image-rendering: pixelated; }
.tavern-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.tavern-role { color: #a3d68b; font-size: 11px; }
.tavern-desc { color: var(--muted); font-size: 12px; line-height: 1.4; }
.tavern-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tavern-btn { padding: 8px 10px; font-size: 12px; font-weight: 800; background: #7ccf5a; color: #132b16; box-shadow: inset 0 -3px #488b32; }
.tavern-btn.secondary { background: #3a3426; color: var(--muted); box-shadow: none; border: 1px solid #6b6146; }
.tavern-btn:disabled { opacity: .45; cursor: default; }
.tavern .town-status { margin: 8px 0; }

/* кнопка «В город» мигает, когда хватает на первого помощника */
#town-enter.pulse { color: var(--gold); animation: town-pulse 1.2s ease-in-out infinite; }
@keyframes town-pulse { 50% { opacity: .55; } }


/* =====================================================================
   v7: один сундук с редкостями, скорость игры, ракета, взрывы, кровь
   ===================================================================== */
.shop-btn.speed { background: #2f4f6b; box-shadow: inset 0 4px 0 #4f7ea3, inset 0 -4px 0 #1d3247, 0 0 0 3px var(--px-ink); }
.shop-btn .chest-odds { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0 5px; max-width: 96px; margin: 0 auto; font-size: 11px; line-height: 1.35; }
.chest-odds .odd { font-style: normal; font-weight: 800; }
.odd.common { color: var(--common); }
.odd.uncommon { color: var(--uncommon); }
.odd.rare { color: var(--rare); }
.odd.epic { color: var(--epic); }
.odd.legendary { color: var(--legendary); }
.item.epic { box-shadow: 0 0 8px #c084fc66; }

/* ракета: корпус, красный нос, пламя из сопла */
/* Блуждающий огонёк (game.js wispHop) для эффектов v1; в v2 — пиксельное пламя в canvas */
.fx-wisp { width: 12px; height: 16px; border-radius: 50% 50% 42% 42%; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at 50% 70%, #fff4d2 0 22%, #ffd25e 40%, #ff8a32 70%, transparent 74%); filter: drop-shadow(0 0 4px #ff8a32); animation: wisp-flick .16s steps(2) infinite; }
@keyframes wisp-flick { 50% { scale: .9 1.1; } }
.fx-rocket { width: 16px; height: 6px; background: linear-gradient(90deg, #8b949a 0 11px, #e8423a 11px); box-shadow: inset 0 -2px #5a6166; transform: translate(-50%, -50%); }
.fx-rocket::before { content: ''; position: absolute; left: -7px; top: 1px; width: 7px; height: 4px; background: #ffd25e; box-shadow: -3px 0 0 #ff7a1f; animation: rocket-flame .08s steps(2) infinite; }
@keyframes rocket-flame { 50% { width: 4px; left: -4px; } }
.fx-smoke { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #d8d2c4; opacity: .8; animation: fx-smoke .6s ease-out forwards; }
.fx-smoke.big { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: #6b6158; animation-duration: .9s; }
@keyframes fx-smoke { to { scale: 2.2; translate: 0 -10px; opacity: 0; } }

.fx-explosion i { position: absolute; left: 0; top: 0; }
.fx-explosion .flash {
  position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  background: radial-gradient(circle, #fffbe0 0 30%, #ffd25e 31% 55%, #ff6a1f 56% 75%, transparent 76%);
  animation: boom-flash .32s ease-out forwards;
}
.fx-explosion .wave {
  position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  border: 3px solid #fff3b0; animation: boom-wave .4s ease-out forwards;
}
@keyframes boom-flash { from { scale: calc(var(--s) * .4); opacity: 1; } 40% { scale: calc(var(--s) * 1.2); opacity: 1; } to { scale: calc(var(--s) * 1.4); opacity: 0; } }
@keyframes boom-wave { from { scale: .3; opacity: 1; } to { scale: calc(var(--s) * 2.2); opacity: 0; } }

/* куски монстра и кровь */
.mon.gibbed { visibility: hidden; transition: none; }
.gore { position: absolute; inset: 0; z-index: 1400; pointer-events: none; }
.gib-piece { position: absolute; image-rendering: pixelated; object-fit: contain; filter: drop-shadow(0 0 1px #6b0010) brightness(.95); }
.gib-piece.side-sprite { background-size: 200% 100%; background-repeat: no-repeat; }
.gore-drop { position: absolute; left: 0; top: 0; }
.blood-puddle {
  position: absolute; z-index: 1; width: 34px; height: 9px; margin: -6px 0 0 -17px; border-radius: 50%;
  background: var(--c); box-shadow: 9px 3px 0 -2px var(--c), -11px 1px 0 -3px var(--c);
  opacity: .85; scale: .2; transition: scale .35s ease-out, opacity 7s linear 1s;
}
.blood-puddle.boss { width: 64px; height: 15px; margin: -9px 0 0 -32px; }
.blood-puddle.dry { scale: 1; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .gore, .fx-explosion, .fx-smoke { display: none; } }
.gib-piece.side-sprite.flip { background-position-x: 100%; }

.gore-splat {
  position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  background:
    radial-gradient(circle at 50% 50%, var(--c) 0 30%, transparent 31%),
    radial-gradient(circle at 20% 30%, var(--c) 0 12%, transparent 13%),
    radial-gradient(circle at 80% 25%, var(--c) 0 10%, transparent 11%),
    radial-gradient(circle at 75% 80%, var(--c) 0 13%, transparent 14%),
    radial-gradient(circle at 25% 78%, var(--c) 0 9%, transparent 10%);
  animation: gore-splat .4s ease-out forwards;
}
@keyframes gore-splat { from { scale: calc(var(--s) * .3); opacity: 1; } 50% { opacity: 1; } to { scale: calc(var(--s) * 1.5); opacity: 0; } }


/* =====================================================================
   v8: лестница открытия, фарм перед боссом
   ===================================================================== */
.shop { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.shop-btn[hidden], .lunar-btn[hidden], .town-upgrade[hidden], #town-enter[hidden], .boss-call[hidden] { display: none !important; }
.just-unlocked { animation: just-unlocked 1s ease-in-out infinite; }
@keyframes just-unlocked { 50% { filter: brightness(1.35); box-shadow: 0 0 0 3px #ffd25e, 0 0 14px #ffd25e; } }
.boss-call {
  pointer-events: auto; margin-top: 6px; padding: 7px 14px; font-weight: 800; font-size: 13px;
  background: #b8322a; color: #fff3d8; box-shadow: inset 0 -3px #7a1d18, 0 0 0 2px #1d1a14;
  animation: just-unlocked 1.2s ease-in-out infinite;
}

/* =====================================================================
   v9: цвет редкости — фон плашки, рамка, подсветка иконки (серый → зелёный → синий → фиолетовый → золотой)
   ===================================================================== */
.card, .item { --tint: #3b3f45; --edge: var(--common); --glow: transparent; }
.card.uncommon, .item.uncommon { --tint: #1f4a2b; --edge: var(--uncommon); }
.card.rare, .item.rare { --tint: #1d3560; --edge: var(--rare); }
.card.epic, .item.epic { --tint: #3d2160; --edge: var(--epic); --glow: #c084fc55; }
.card.legendary, .item.legendary { --tint: #5a3d0e; --edge: var(--legendary); --glow: #ffd25e66; }
.card.lunar, .item.lunar { --tint: #163f45; --edge: var(--lunar); --glow: #6de3df55; }
.cards .card {
  background: linear-gradient(100deg, var(--tint) 0%, #241c13 75%);
  box-shadow: inset 0 0 0 3px var(--edge), 0 0 0 3px var(--px-ink), 0 0 16px var(--glow);
}
.cards .card .card-art { background: radial-gradient(circle, var(--tint) 0 45%, #1a140d 100%); border-color: var(--edge); }
.cards .card .card-rarity { color: var(--edge); font-weight: 800; }
.items .item { background: radial-gradient(circle, var(--tint) 0 50%, #1d160e 100%); border-color: var(--edge); box-shadow: 0 0 8px var(--glow); }


/* =====================================================================
   v10: автобой, энергия и способности, летящие монетки
   ===================================================================== */
.auto-btn { min-height: 36px; padding: 4px 8px; font-size: 12px; font-weight: 800; border: 2px solid #6b6146; background: #3a3426; color: var(--muted); }
.auto-btn.on { background: #7ccf5a; color: #132b16; border-color: #488b32; }
.auto-btn[hidden], .skillbar[hidden] { display: none !important; }

.skillbar { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: stretch; margin: 8px 0; }
.energy { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; padding: 6px 4px;
  background: #1d1a14; box-shadow: inset 0 0 0 2px #6b6146; }
.energy b { font-size: 20px; color: #ffe066; text-shadow: 2px 2px 0 #000; }
.energy-bar { width: 100%; height: 6px; background: #000; }
.energy-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd25e, #fff3b0); transition: width .2s; }
.skills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.skill {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px;
  min-height: 78px; padding: 4px 2px 5px; background: #2b3a4f; box-shadow: inset 0 4px 0 #3f5675, inset 0 -4px 0 #1a2433, 0 0 0 3px var(--px-ink);
  filter: grayscale(.75) brightness(.7); transition: filter .15s;
}
.skill.ready { filter: none; }
.skill.ready::after { content: ''; position: absolute; inset: -3px; box-shadow: 0 0 0 2px #ffe066; animation: town-pulse 1.4s ease-in-out infinite; pointer-events: none; }
.skill-icon { width: 44px; height: 44px; background: center / contain no-repeat; image-rendering: pixelated; }
.skill-slam { background-image: url('assets/skill-slam.png'); }
.skill-wave { background-image: url('assets/skill-wave.png'); }
.skill-frenzy { background-image: url('assets/skill-frenzy.png'); }
.skill-salvo { background-image: url('assets/skill-salvo.png'); }
.skill-name { font-size: 9px; line-height: 1.1; text-align: center; color: #e8e2cc; }
.skill-cost { font-size: 13px; font-weight: 800; color: #ffe066; text-shadow: 1px 1px 0 #000; }
.skill.cast { animation: skill-cast .3s ease-out; }
.skill.nope { animation: shake .25s; }
@keyframes skill-cast { 40% { transform: scale(.9); filter: brightness(1.8); } }

.fx-coin { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3b0 0 25%, #ffd25e 26% 60%, #c48a1c 61%); box-shadow: 0 0 0 1px #6b4a0e; transform: translate(-50%, -50%); }
.gold.coin-bump, #gold-box.coin-bump { animation: coin-bump .18s ease-out; }
@keyframes coin-bump { 50% { transform: scale(1.18); } }

.fx-wave { width: 70px; height: 40px; margin-left: -10px; transform-origin: left bottom;
  background: radial-gradient(ellipse at 30% 100%, #b6ff8a 0 30%, #5fd35a 31% 60%, transparent 61%);
  filter: drop-shadow(0 0 6px #7dff8a); }
#slime.frenzy #evolved-art, #slime.frenzy .slime-body { filter: drop-shadow(0 0 6px #ff5a1f) saturate(1.4); }
.arena.boss-fight .evo-status { display: none; }


/* =====================================================================
   v11: способности по веткам, крупные формы, 2 места отряда, дух-помощник
   ===================================================================== */
/* гуманоидные формы крупнее: облик со ступени «ветка, 3-й облик», специализация и финал */
#slime.size-big #evolved-art { left: -32px; top: -80px; width: 150px; height: 150px; }
#slime.size-huge #evolved-art { left: -44px; top: -104px; width: 174px; height: 174px; }
#slime.frenzy #evolved-art, #slime.frenzy .slime-body { filter: drop-shadow(0 0 6px var(--buff, #ff5a1f)) saturate(1.4); }

/* сила способностей растёт с формой: рамка панели меняет цвет */
.skillbar[data-tier="1"] .energy { box-shadow: inset 0 0 0 2px var(--rare); }
.skillbar[data-tier="2"] .energy { box-shadow: inset 0 0 0 2px var(--legendary), 0 0 10px #ffd25e55; }

.fx-bolt { height: 3px; transform-origin: 0 50%; background: var(--c); box-shadow: 0 0 6px var(--c), 0 0 2px #fff; animation: fx-bolt .22s steps(3) forwards; }
@keyframes fx-bolt { 50% { opacity: .3; } to { opacity: 0; } }
.fx-fall { transform: translate(-50%, -50%); }
.fx-fall.star { width: 12px; height: 12px; background: var(--c); box-shadow: 0 0 10px 4px var(--c), -10px -14px 0 -2px #ffffffaa, -18px -24px 0 -3px #ffffff66; }
.fx-fall.hammer { width: 26px; height: 16px; background: #c9d2d8; border: 3px solid #5b6770; box-shadow: 0 0 12px 4px var(--c); }
.fx-wave { background: radial-gradient(ellipse at 30% 100%, #ffffff 0 18%, var(--c, #7dff8a) 19% 60%, transparent 61%); filter: drop-shadow(0 0 6px var(--c, #7dff8a)); }
.fx-whirl { width: 120px; height: 60px; margin: -30px 0 0 -60px; border-radius: 50%; border: 4px dashed var(--c); box-shadow: 0 0 10px var(--c);
  animation: fx-whirl .6s ease-out forwards; }
@keyframes fx-whirl { from { rotate: 0deg; scale: .3; opacity: 1; } to { rotate: 540deg; scale: 1.6; opacity: 0; } }
.fx-moon { width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #ff6b6b, var(--c) 60%, #4a0010);
  box-shadow: 0 0 40px 10px var(--c); animation: fx-moon 1.1s ease-out forwards; }
@keyframes fx-moon { 0% { scale: .2; opacity: 0; } 30% { scale: 1; opacity: 1; } 70% { opacity: .9; } 100% { scale: 1.2; opacity: 0; } }
.fx-proj.spirit { width: 9px; height: 9px; border-radius: 50%; background: #d8f6ff; box-shadow: 0 0 8px 3px #7fd8ff; }

/* места отряда: вещи путника на пустом месте, дух парит */
.helper-slot.empty { border: 0; background: none; }
.helper-slot.empty img.prop { position: absolute; left: 50%; bottom: -2px; width: 40px; height: 40px; margin-left: -20px; image-rendering: pixelated; opacity: .95; }
.helper-slot.filled img.spirit { animation: spirit-float 1.6s ease-in-out infinite; filter: drop-shadow(0 0 6px #7fd8ff); }
@keyframes spirit-float { 50% { transform: translateY(-6px); } }


/* =====================================================================
   v12: бег между волнами, фон слоями, пыль, полоска пути
   ===================================================================== */
.bg { background: #1d4d4a; overflow: hidden; }
.bg .layer { position: absolute; left: 0; right: 0; background-repeat: repeat-x; image-rendering: pixelated; }
.bg::after { z-index: 1; }

/* на бегу отряд подпрыгивает в такт шагам и чуть наклоняется вперёд */
.arena.running #slime { animation: run-bob .32s steps(2) infinite; }
.arena.running .helper-slot.filled img:not(.spirit) { animation: run-bob .32s steps(2) infinite; }
.arena.running .helper-slot.filled:nth-of-type(2) img:not(.spirit) { animation-delay: -.16s; }
@keyframes run-bob { 0% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -4px; rotate: 3deg; } }
.fx-dust { width: 7px; height: 7px; margin: -4px; background: #d9c9a3; opacity: .8; animation: fx-dust .5s ease-out forwards; }
@keyframes fx-dust { to { translate: -22px -8px; scale: 2; opacity: 0; } }

/* полоска пути под названием мира */
.path { display: flex; align-items: center; justify-content: center; gap: 0; margin: 4px auto 0; pointer-events: none; }
.path .node { display: grid; place-items: center; width: 20px; height: 20px; font-size: 10px; background: #1d1a14; border: 2px solid #6b6146; filter: grayscale(1); opacity: .8; }
.path .node.done { background: #3f6b34; border-color: #7ccf5a; filter: none; opacity: 1; }
.path .node.now { border-color: #ffe066; filter: none; opacity: 1; animation: town-pulse 1s ease-in-out infinite; }
.path .node.boss { width: 24px; height: 24px; font-size: 12px; }
.path .node.boss.now { border-color: #ff5d5d; background: #5a1a1a; }
.path .seg { display: block; width: 18px; height: 4px; background: #1d1a14; box-shadow: 0 0 0 1px #000; }
.path .seg.done { background: #7ccf5a; }
.path.running .node.now { box-shadow: 0 0 0 2px #ffe06688; }
.evo-status { top: 66px; }


/* v13: фон из двух слоёв — задний план и полоса земли поверх него */
.bg .layer.strip { background-repeat: repeat-x; }
.bg .layer.strip::after { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--ground-h) - 2px); bottom: 0; background: var(--grass); }

/* v14: смена мира — старый набор слоёв лежит сверху и растворяется */
.bg .layerset { position: absolute; inset: 0; }
.bg .layerset.leaving { z-index: 1; pointer-events: none; }
/* «Оборона»: карта — одна статичная картинка поверх слоёв мира, слизень не бежит (CONFIG.standMode) */
.bg .stand-bg { position: absolute; z-index: 2; background: center / 100% 100% no-repeat; pointer-events: none; }
.bg .stand-bg[hidden] { display: none; }
body.stand-map .bg .layerset { visibility: hidden; }
body.wide-roads .bg { background: var(--road-base, #17241b); }
body.wide-roads #bg .layer.road { filter: none; image-rendering: auto; }
body.wide-roads #bg .layer.far { filter: saturate(.7) brightness(.74); }
body.wide-roads.new-backgrounds #bg .layer.far { filter: saturate(.85) brightness(.92); image-rendering: auto; }
body.wide-roads #bg .layer.far::before { background: linear-gradient(180deg, transparent 25%, var(--road-base) 88%); opacity: 1; }
.bg::after { z-index: 2; }


/* =====================================================================
   v15: мобильная схема — экран без прокрутки, способности у пальца, вкладки и панели снизу
   ===================================================================== */
#app { gap: 8px; padding: 8px 10px calc(6px + var(--sa-bottom)); max-width: 480px; }
.hud-row { margin: 0; gap: 8px; }
.lvl-box { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lvl-box .bar.xp { height: 14px; }
.lvl-box .bar.xp span { font-size: 9px; }
.hud-right { gap: 6px; }
.gear-btn { min-width: 34px; min-height: 34px; font-size: 18px; border: 2px solid var(--wood-light); background: #293a24; }
.lunar-btn[hidden] { display: none !important; }
.arena { flex: 1 1 auto; min-height: 0; margin: 4px; }

/* способности: энергия полоской сверху, автобой справа */
.skillbar { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.energy-line { display: flex; align-items: center; gap: 8px; }
.energy-num { font-size: 15px; color: #ffe066; text-shadow: 2px 2px 0 #000; min-width: 44px; }
.energy-line .energy-bar { flex: 1; height: 8px; background: #000; box-shadow: 0 0 0 2px #3f3a2a; }
.energy-line .auto-btn { min-height: 30px; padding: 2px 10px; font-size: 11px; }
.skills { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.skill { min-height: 66px; padding: 3px 2px 4px; }
.skill-icon { width: 38px; height: 38px; }
.skill-name { font-size: 8px; }
.skillbar[data-tier="1"] .energy-num { color: var(--rare); }
.skillbar[data-tier="2"] .energy-num { color: var(--legendary); }

/* нижние вкладки */
.tabbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 5px;
  background: #2a2014; box-shadow: inset 0 -3px #1a140d, 0 0 0 2px var(--px-ink); }
.tab-icon { font-size: 20px; line-height: 1; }
.tab-name { font-size: 10px; color: var(--muted); }
.tab.active { background: #4a3a1e; box-shadow: inset 0 -3px var(--gold), 0 0 0 2px var(--px-ink); }
.tab.active .tab-name { color: var(--gold); }
.tab.locked { opacity: .45; filter: grayscale(1); }
.tab-badge { position: absolute; top: 4px; right: 18%; width: 9px; height: 9px; border-radius: 50%; background: #ff5d5d; box-shadow: 0 0 0 2px #1a140d; }
.tab-badge[hidden] { display: none; }

/* панель снизу: поверх способностей и низа сцены, игра идёт дальше */
.sheet { position: fixed; left: 50%; bottom: 0; z-index: 20; width: min(100%, 480px); transform: translateX(-50%);
  max-height: 62vh; display: flex; flex-direction: column;
  background: #241c13; box-shadow: 0 -3px 0 var(--wood-light), 0 -6px 0 var(--px-ink), 0 -12px 30px #0008;
  padding-bottom: calc(76px + var(--sa-bottom)); animation: sheet-up .18s ease-out; }
.sheet[hidden] { display: none; }
@keyframes sheet-up { from { transform: translate(-50%, 40%); opacity: .4; } }
.sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 6px; touch-action: none; }
.sheet-head::before { content: ''; position: absolute; left: 50%; top: 5px; width: 40px; height: 4px; margin-left: -20px; background: #6b6146; }
.sheet-head b { font-family: 'Press Start 2P', monospace; font-size: 12px; color: var(--gold); }
.sheet-close { min-width: 32px; min-height: 32px; font-size: 16px; color: var(--muted); }
.sheet-body { overflow-y: auto; padding: 4px 12px 10px; }
.sheet-page[hidden] { display: none; }
.sheet .shop { display: grid; grid-template-columns: 1fr; gap: 8px; }
.sheet .shop-btn { display: grid; grid-template-columns: 44px 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px;
  text-align: left; padding: 10px 12px; min-height: 64px; }
.sheet .shop-btn .shop-icon { grid-row: 1 / 3; width: 40px; height: 40px; font-size: 28px; }
.sheet .shop-btn b { grid-column: 2; font-size: 15px; }
.sheet .shop-btn small { grid-column: 2; }
.sheet .shop-btn .price { grid-column: 3; grid-row: 1 / 3; font-size: 12px; }
.sheet .shop-btn .chest-odds { max-width: none; justify-content: flex-start; margin: 0; }
.sheet .items { display: flex; flex-wrap: wrap; gap: 8px; }
.party-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.party-row { display: flex; gap: 10px; align-items: center; padding: 8px; background: #19291d; border: 2px solid #5d5a40; }
.party-row.hero { border-color: var(--gold); }
.party-row.empty { opacity: .7; }
.party-row img { width: 52px; height: 52px; image-rendering: pixelated; object-fit: contain; flex-shrink: 0; }
.party-row span { display: flex; flex-direction: column; gap: 3px; }
.party-row small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.sheet-note { color: var(--muted); font-size: 12px; line-height: 1.4; }
.settings-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 2px; border-bottom: 1px solid #3a3426; color: var(--muted); font-size: 13px; }
#session-sync-status { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.35; font-weight: 500; }
#session-export { flex-shrink: 0; }
.danger-btn { width: 100%; margin-top: 14px; padding: 12px; font-weight: 800; background: #5a1a1a; color: #ffd0d0; box-shadow: inset 0 -3px #3a0f0f; }
.tabbar { position: relative; z-index: 21; }


/* v16: пустое место отряда — круг с «+», нажимается; шов между мирами едет по дороге */
.helper-slot.empty { border: 2px dashed rgba(255, 243, 208, .6); background: rgba(29, 26, 20, .35); border-radius: 50%; pointer-events: auto; cursor: pointer; }
.slot-plus { display: grid; place-items: center; width: 100%; height: 100%; font-size: 20px; font-weight: 800; color: #fff3d0; text-shadow: 1px 1px 0 #000; }
.slot-plus.big { width: 52px; height: 52px; flex-shrink: 0; font-size: 26px; border: 2px dashed #8d8057; border-radius: 50%; }
.party-row .hire-btn { margin-left: auto; padding: 8px 12px; font-weight: 800; font-size: 12px; background: #7ccf5a; color: #132b16; box-shadow: inset 0 -3px #488b32; flex-shrink: 0; }
.bg .layerset.leaving {
  -webkit-mask-image: linear-gradient(to right, #000 calc(var(--seam) - 140px), transparent calc(var(--seam) + 140px));
  mask-image: linear-gradient(to right, #000 calc(var(--seam) - 140px), transparent calc(var(--seam) + 140px));
}


/* =====================================================================
   v17: пассивки в шапке, сундук на сцене, карточки пассивок
   ===================================================================== */
.passive-bar { display: flex; gap: 6px; margin-top: 6px; cursor: pointer; }
.pslot { position: relative; display: grid; place-items: center; width: 34px; height: 34px; background: #2a2014; box-shadow: 0 0 0 2px var(--px-ink), inset 0 0 0 2px #6b6146; }
.pslot img { width: 28px; height: 28px; image-rendering: pixelated; }
.pslot b { position: absolute; right: -4px; bottom: -4px; min-width: 14px; padding: 0 2px; font-size: 9px; line-height: 13px; text-align: center; background: var(--px-ink); color: var(--gold); }
.pslot.empty { color: #8d8057; font-weight: 800; box-shadow: 0 0 0 2px var(--px-ink), inset 0 0 0 2px #3f3a2a; }

.road-chest { position: absolute; right: 14px; top: 44%; z-index: 1900; display: flex; flex-direction: column; align-items: center; gap: 2px;
  pointer-events: auto; animation: chest-bob 1s ease-in-out infinite; filter: drop-shadow(0 0 10px #ffd25e); }
.road-chest[hidden] { display: none; }
.road-chest img { width: 56px; height: 56px; image-rendering: pixelated; }
.road-chest b { font-size: 11px; padding: 1px 6px; background: #1d1a14d9; color: var(--gold); box-shadow: 0 0 0 2px var(--px-ink); }
@keyframes chest-bob { 50% { transform: translateY(-6px) scale(1.04); } }

.card.passive { --tint: #2a3a52; --edge: #79caff; }
.card.passive.upgrade { --tint: #3a3a1e; --edge: var(--gold); }
.card.passive .card-art img { width: 44px; height: 44px; image-rendering: pixelated; }
.passive-list { display: flex; flex-direction: column; gap: 8px; }


/* v18: сборка пассивок — строка фишек над способностями */
.passive-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; cursor: pointer; }
.pchip { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 6px; background: #1f2a1c; box-shadow: 0 0 0 2px var(--px-ink), inset 0 0 0 2px #4f6a3a; }
.pchip img { width: 30px; height: 30px; flex-shrink: 0; image-rendering: pixelated; }
.pchip-text { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
.pchip-text b { font-size: 11px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #f3ead0; }
.pchip-text small { font-size: 9px; color: var(--gold); }
.pchip .pips { display: block; height: 4px; margin-top: 2px; background: linear-gradient(90deg, #7ccf5a var(--fill), #000 var(--fill));
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 8%, transparent 8% 10%); mask: repeating-linear-gradient(90deg, #000 0 8%, transparent 8% 10%); }
.pchip.empty { background: #1d1a14; box-shadow: 0 0 0 2px var(--px-ink), inset 0 0 0 2px #3f3a2a; opacity: .75; }
.pchip-plus { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border: 2px dashed #8d8057; color: #8d8057; font-size: 16px; }
.pchip.empty .pchip-text b { color: var(--muted); }
.pchip-text b { white-space: normal; font-size: 10px; line-height: 1.05; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }


/* =====================================================================
   v19: главное меню, персонаж (ветка), коллекция, итог забега
   ===================================================================== */
.menu { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 16px; overflow-y: auto;
  background: radial-gradient(circle at 50% 30%, #2f4a2a, #121c12 75%); }
.menu[hidden] { display: none; }
.menu-panel { width: min(100%, 380px); display: flex; flex-direction: column; gap: 10px; align-items: stretch; text-align: center; }
.menu-panel.wide { width: min(100%, 460px); text-align: left; }
.menu-title { font-family: 'Press Start 2P', monospace; font-size: 18px; color: var(--gold); text-shadow: 3px 3px 0 #000; line-height: 1.5; }
.menu-hero { width: 120px; height: 120px; margin: 4px auto; image-rendering: pixelated; object-fit: contain; animation: evo-idle 1.6s ease-in-out infinite; filter: drop-shadow(0 6px 0 #0006); }
.menu-res { display: flex; justify-content: center; gap: 18px; font-size: 16px; color: #e8f5ff; }
.menu-best { color: var(--muted); font-size: 12px; margin: 0; }
.menu-btn { padding: 14px; font-weight: 800; font-size: 15px; background: #3a3426; color: #f3ead0; box-shadow: inset 0 -4px #241f16, 0 0 0 3px var(--px-ink); }
.menu-btn.primary { background: #7ccf5a; color: #132b16; box-shadow: inset 0 -4px #488b32, 0 0 0 3px var(--px-ink); font-size: 17px; }
.menu-link { color: #d98a8a; font-size: 12px; text-decoration: underline; padding: 6px; }
.menu-link[hidden] { display: none; }
.screen-head { display: flex; justify-content: space-between; align-items: center; font-size: 15px; color: #e8f5ff; }
.screen-head b:first-child { font-family: 'Press Start 2P', monospace; font-size: 13px; color: var(--gold); }

.tree { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tree-col { display: flex; flex-direction: column; gap: 6px; }
.tree-col h3 { margin: 0 0 2px; font-size: 12px; text-align: center; }
.tree-col.attack h3 { color: #ff8a7a; } .tree-col.survive h3 { color: #7ccf5a; } .tree-col.loot h3 { color: var(--gold); }
.tree-node { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 8px 6px; text-align: left; background: #1d1a14; box-shadow: 0 0 0 2px var(--px-ink), inset 0 0 0 2px #4a4430; min-height: 96px; }
.tree-node b { font-size: 11px; line-height: 1.15; color: #f3ead0; }
.tree-node .rank { position: absolute; top: 6px; right: 6px; font-size: 10px; color: var(--muted); }
.tree-node small { font-size: 10px; line-height: 1.3; color: var(--muted); }
.tree-node i { font-style: normal; font-size: 11px; font-weight: 800; color: #9fd8ff; margin-top: auto; }
.tree-node.owned { box-shadow: 0 0 0 2px var(--px-ink), inset 0 0 0 2px #7ccf5a; }
.tree-node.maxed { box-shadow: 0 0 0 2px var(--px-ink), inset 0 0 0 2px var(--gold); }
.tree-node.maxed i { color: var(--gold); }
.tree-node.locked { opacity: .45; }
.tree-node:disabled { cursor: default; }

.collection { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-height: 58vh; overflow-y: auto; }
.coll { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 3px; text-align: center; background: radial-gradient(circle, var(--tint, #3b3f45) 0 45%, #1d160e 100%); box-shadow: inset 0 0 0 2px var(--edge, var(--common)); }
.coll.uncommon { --tint: #1f4a2b; --edge: var(--uncommon); } .coll.rare { --tint: #1d3560; --edge: var(--rare); }
.coll.epic { --tint: #3d2160; --edge: var(--epic); } .coll.legendary { --tint: #5a3d0e; --edge: var(--legendary); } .coll.lunar { --tint: #163f45; --edge: var(--lunar); }
.coll img { width: 40px; height: 40px; image-rendering: pixelated; }
.coll b { font-size: 9px; line-height: 1.15; color: #f3ead0; }
.coll small { font-size: 8px; line-height: 1.2; color: var(--muted); }
.coll.locked img { filter: brightness(0) drop-shadow(0 0 1px #8d8057); opacity: .7; }

.results-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.results-stats div { display: flex; justify-content: space-between; padding: 8px 10px; background: #1d1a14; box-shadow: inset 0 0 0 2px #4a4430; font-size: 13px; color: var(--muted); }
.results-stats b { color: #f3ead0; }
.results-crystals { font-size: 22px; color: #9fd8ff; font-weight: 800; }
.results-unlocks { display: flex; flex-direction: column; gap: 6px; }
.unlock-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #2a3a52; box-shadow: inset 0 0 0 2px var(--rare); text-align: left; }
.unlock-row img { width: 36px; height: 36px; image-rendering: pixelated; }
.unlock-row span { display: flex; flex-direction: column; font-size: 13px; color: #f3ead0; }
.unlock-row small { font-size: 10px; color: var(--muted); }
.tree-node b { padding-right: 26px; }


/* =====================================================================
   v20: рисованный стиль (проба) — мягкий интерфейс без пиксельных рамок
   ===================================================================== */
.style-toggle { padding: 6px 12px; font-weight: 800; background: #3a3426; color: #f3ead0; box-shadow: inset 0 -3px #241f16; }
body.style-hd { --soft-panel: linear-gradient(180deg, #3a2c22, #2a1f18); --soft-edge: #c9a25e;
  background: radial-gradient(circle at 50% 0%, #4a3550, #1c1424 70%); }
body.style-hd, body.style-hd * { font-family: 'Rubik', system-ui, sans-serif !important; letter-spacing: 0; }
body.style-hd :is(.arena, .card, .card-art, .item, .cards-close, .toast, .lunar-btn, .card-badge, .skill, .tab, .pchip, .menu-btn,
  .tree-node, .coll, .party-row, .town-upgrade, .evolution-panel, .evolution-option, .tavern-row, .tavern-btn, .results-stats div,
  .danger-btn, .gear-btn, .auto-btn, .style-toggle, .sound-toggle, .road-chest b, .boss-call, .hire-btn, .unlock-row, .energy-line .energy-bar) { border-radius: 14px !important; }
body.style-hd :is(.bar, .bar > div, .energy-bar, .energy-bar i) { border-radius: 999px !important; }
body.style-hd .arena { box-shadow: 0 0 0 3px #1c1424, 0 0 0 6px var(--soft-edge), 0 10px 30px #0008; border-radius: 18px !important; }
body.style-hd :is(.skill, .tab, .pchip, .menu-btn, .tree-node, .party-row) { background: var(--soft-panel); box-shadow: inset 0 0 0 2px #5a4632, 0 3px 0 #120c08; }
body.style-hd .skill.ready::after { border-radius: 14px; box-shadow: 0 0 0 2px #ffd25e, 0 0 12px #ffd25e88; }
body.style-hd .tab.active { box-shadow: inset 0 0 0 2px var(--soft-edge), 0 3px 0 #120c08; }
body.style-hd .menu-btn.primary { background: linear-gradient(180deg, #9fe07a, #5fae45); box-shadow: inset 0 -4px #3f7f2c, 0 4px 0 #0008; }
body.style-hd .menu { background: radial-gradient(circle at 50% 25%, #6b4a5e, #241826 75%); }
body.style-hd .sheet { border-radius: 20px 20px 0 0; background: linear-gradient(180deg, #33261e, #241a14); box-shadow: 0 -3px 0 var(--soft-edge), 0 -12px 30px #0008; }
body.style-hd .card { border-radius: 16px !important; }
body.style-hd .bar { border-color: #1c1424; }
body.style-hd .level, body.style-hd .gold { font-weight: 800; font-size: 18px; }
body.style-hd .float { font-weight: 900; -webkit-text-stroke: 1px #000; }
/* рисованные картинки сглаживаем, пиксельные остаются чёткими */
body.style-hd .bg .layer, body.style-hd #evolved-art[src*="/hd/"], body.style-hd .menu-hero[src*="/hd/"] { image-rendering: auto; }
/* рисованная летучая мышь: одна картинка, взмахи — анимацией */
body.style-hd .mon .side-sprite.sprite-bat, body.style-hd .gib-piece.sprite-bat { background: url('assets/hd/bat.webp') center / contain no-repeat; image-rendering: auto; animation: hd-flap .45s ease-in-out infinite; }
body.style-hd .mon .side-sprite.sprite-bat.flip { background-position: center; }
@keyframes hd-flap { 50% { transform: translateY(-3px) scaleY(.9); } }

/* кусты переднего плана: верх плавно растворяется, без ровного края */
.bg .layer.front { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 55%); mask-image: linear-gradient(to bottom, transparent 0, #000 55%); }


/* =====================================================================
   v21: эффекты предметов, ауры героя, упрощённый режим
   ===================================================================== */
.fx-sprite { width: var(--w); height: var(--w); background: center / contain no-repeat; transform: translate(-50%, -50%); z-index: 12; filter: drop-shadow(0 2px 3px #0008); }
.fx-spark { width: 5px; height: 5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 5px var(--c); transform: translate(-50%, -50%); z-index: 11; }
.fx-spark.shard { width: 3px; height: 8px; border-radius: 1px; }
.fx-spark.coin { width: 7px; height: 7px; background: radial-gradient(circle at 35% 35%, #fff3b0, #e0a020 60%, #8a5a10); box-shadow: none; }
.fx-spark.bubble { width: 6px; height: 6px; background: transparent; border: 2px solid var(--c); box-shadow: 0 0 4px var(--c); }
.fx-spark.flame { width: 6px; height: 9px; border-radius: 50% 50% 40% 40%; background: radial-gradient(circle at 50% 70%, #fff3b0, var(--c) 55%, #c0300a); }
.fx-spark.star { width: 6px; height: 6px; border-radius: 0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.fx-spark.plus { width: 9px; height: 9px; border-radius: 0; box-shadow: none; clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%); }
.fx-critstar { width: 44px; height: 44px; transform: translate(-50%, -50%); background: radial-gradient(circle, #fffbe0 0 12%, #ffd25e88 30%, transparent 62%);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); animation: fx-critstar .32s ease-out forwards; z-index: 11; }
@keyframes fx-critstar { from { scale: .3; rotate: 0deg; opacity: 1; } to { scale: 1.3; rotate: 45deg; opacity: 0; } }
.fx-echo-ring { width: 40px; height: 40px; border-radius: 50%; border: 3px solid #c9a8ff; box-shadow: 0 0 10px #a07cff; transform: translate(-50%, -50%); animation: fx-ring .45s ease-out forwards; }
.fx-firering { width: 50px; height: 50px; border-radius: 50%; border: 4px solid #ff8a1f; box-shadow: 0 0 14px #ff5a1f, inset 0 0 10px #ffb347; transform: translate(-50%, -50%); animation: fx-ring .6s ease-out forwards; }
@keyframes fx-ring { from { scale: .3; opacity: 1; } to { scale: 1.5; opacity: 0; } }
.fx-ghost { pointer-events: none; z-index: 8; filter: hue-rotate(220deg) brightness(1.4) drop-shadow(0 0 6px #a07cff); }
.fx-bubble { width: 70px; height: 70px; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, #ffffffaa 0 8%, #bfe8ff33 30%, #7fd0ff55 70%, #bfe8ffaa 100%); animation: fx-bubble .45s ease-out forwards; }
@keyframes fx-bubble { 0% { scale: .6; opacity: 0; } 30% { scale: 1.05; opacity: 1; } 100% { scale: 1.2; opacity: 0; } }
.fx-dome { width: 84px; height: 84px; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, transparent 55%, #ffd25e66 75%, #ffe9a0cc 100%); animation: fx-bubble .6s ease-out forwards; }
.fx-heart { color: #ff4d6d; font-size: 16px; text-shadow: 0 0 6px #ff4d6d; transform: translate(-50%, -50%); animation: fx-heart .8s ease-out forwards; }
@keyframes fx-heart { 0% { scale: .4; opacity: 0; } 25% { scale: 1.2; opacity: 1; } 100% { translate: 0 -24px; opacity: 0; } }
.stuck-bomb { position: absolute; left: 50%; bottom: 60%; width: 22px; height: 22px; margin-left: -4px; z-index: 3; animation: bomb-blink .3s steps(2) infinite; pointer-events: none; }
@keyframes bomb-blink { 50% { filter: brightness(1.8) drop-shadow(0 0 5px #ff5a1f); } }
.mon.poisoned .art, .mon.poisoned .art img { filter: sepia(.4) hue-rotate(60deg) saturate(1.6) drop-shadow(0 0 4px #8cff6a); }
.mon.burning .art, .mon.burning .art img { filter: sepia(.5) saturate(2) hue-rotate(-20deg) drop-shadow(0 0 5px #ff8a1f); }
/* ауры героя: до двух сразу */
.slime .aura { position: absolute; left: 50%; top: 52%; width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 0; display: none; }
.slime .aura[class*="aura-"] { display: block; }
.slime .aura-shield { border: 2px solid #ffe9a0aa; background: radial-gradient(circle, transparent 58%, #ffd25e33 80%, #ffe9a066 100%); animation: aura-pulse 1.6s ease-in-out infinite; }
.slime .aura-chronic { background: radial-gradient(circle, transparent 35%, rgba(255, 50, 30, calc(.2 + var(--rage, 0) * .45)) 70%, transparent 72%);
  animation: aura-pulse calc(1.2s - var(--rage, 0) * .6s) ease-in-out infinite; }
.slime .aura-pact { background: radial-gradient(circle, transparent 40%, #b3001b44 68%, transparent 75%); filter: blur(2px); animation: aura-spin 6s linear infinite; }
.slime .aura-glass { background: conic-gradient(from 0deg, transparent, #e6f6ff66, transparent 25%, transparent 50%, #e6f6ff55, transparent 75%);
  -webkit-mask: radial-gradient(circle, transparent 55%, #000 62%, transparent 72%); mask: radial-gradient(circle, transparent 55%, #000 62%, transparent 72%); animation: aura-spin 3s linear infinite; }
.slime .aura-stone { width: 100%; top: 70%; aspect-ratio: 2.4; background: radial-gradient(ellipse, #8a7a6055 30%, transparent 70%); border-bottom: 3px dotted #a89878aa; }
.slime .aura-bloom { background: radial-gradient(circle, transparent 45%, #7dff8a33 70%, transparent 74%); animation: aura-pulse 1s ease-in-out infinite; }
@keyframes aura-pulse { 50% { scale: 1.06; opacity: .7; } }
@keyframes aura-spin { to { rotate: 360deg; } }


/* v22: плевок первой формы, молния и сгусток бездны у магов */
.fx-spit { width: 17px; height: 14px; border-radius: 50% 60% 55% 50%; z-index: 11;
  background: radial-gradient(circle at 35% 35%, #eaffd8 0 18%, #8cff6a 40%, #3fae45 85%); box-shadow: 0 0 6px #6dff7a99; transform: translate(-50%, -50%); }
.fx-spit.drop { width: 7px; height: 7px; opacity: .8; box-shadow: none; }
.fx-orb.void { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle, #1a0830 0 30%, var(--c) 60%, #e6d0ff); box-shadow: 0 0 10px 4px var(--g); }
.fx-orb.tail { opacity: var(--o, .4); box-shadow: 0 0 6px 2px var(--g); }
.fx-rift { width: 34px; height: 34px; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, #12051f 0 25%, #8a5cff88 45%, transparent 70%); animation: fx-rift .42s ease-out forwards; }
@keyframes fx-rift { 0% { scale: .2; rotate: 0deg; opacity: 1; } 50% { scale: 1.2; opacity: 1; } 100% { scale: .6; rotate: 180deg; opacity: 0; } }
.fx-zap { z-index: 11; }
.fx-zap svg { position: absolute; left: 0; top: 0; overflow: visible; }
.fx-zap path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fx-zap path.glow { stroke: var(--c); opacity: .55; filter: blur(2px); }
.fx-zap path.core { stroke: #ffffff; }
.fx-zap { animation: fx-zap .2s steps(3) forwards; }
@keyframes fx-zap { 0% { opacity: 1; } 66% { opacity: .9; } 100% { opacity: 0; } }
.fx-zapflash { width: 30px; height: 30px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, #fff 0 20%, var(--c) 45%, transparent 70%);
  animation: fx-ring .2s ease-out forwards; }


/* v23: рисованные кадры умений и сочность */
.fx-frames { width: var(--w); height: var(--w); background: center bottom / contain no-repeat; transform: translate(-50%, -100%); z-index: 13; filter: drop-shadow(0 4px 6px #0007); }
.fx-buffring { width: 90px; height: 90px; border-radius: 50%; border: 4px solid var(--c); box-shadow: 0 0 18px var(--c), inset 0 0 12px var(--c);
  transform: translate(-50%, -50%); animation: fx-ring .6s ease-out forwards; z-index: 11; }
/* монстры рисованного стиля: одна картинка, шаг — покачиванием */
body.style-hd .mon .side-sprite.sprite-mushroom, body.style-hd .gib-piece.sprite-mushroom { background: url('assets/hd/mushroom.webp') center bottom / contain no-repeat; image-rendering: auto; animation: hd-walk .5s ease-in-out infinite; }
body.style-hd .mon .side-sprite.sprite-goblin, body.style-hd .gib-piece.sprite-goblin { background: url('assets/hd/goblin.webp') center bottom / contain no-repeat; image-rendering: auto; animation: hd-walk .45s ease-in-out infinite; }
body.style-hd .mon .side-sprite.flip { background-position: center bottom; }
@keyframes hd-walk { 50% { transform: translateY(-2px) rotate(-3deg); } }
body.style-hd .skill-slam { background-image: url('assets/hd/skill-slam.webp'); }
body.style-hd .skill-wave { background-image: url('assets/hd/skill-wave.webp'); }
body.style-hd .skill-frenzy { background-image: url('assets/hd/skill-frenzy.webp'); }
body.style-hd .skill-salvo { background-image: url('assets/hd/skill-salvo.webp'); }
/* рисованные картинки сглаживаем: пиксельная чёткость им не нужна */
body.style-hd img[src*="/hd/"], body.style-hd .skill-icon, body.style-hd .fx-frames, body.style-hd .fx-sprite { image-rendering: auto !important; }


/* v24: новые напарники, усиленные монстры, проклятие */
.fx-proj.poison { width: 9px; height: 9px; border-radius: 50%; background: #8cff6a; box-shadow: 0 0 6px 2px #3fae45; }
.fx-proj.fin { width: 14px; height: 5px; border-radius: 50% 0 0 50%; background: #9ec7e8; box-shadow: 0 0 4px #4a8ac0; }
.fx-proj.tusk { width: 12px; height: 4px; border-radius: 0 50% 50% 0; background: #f2ead0; box-shadow: 0 0 4px #b08850; }
.fx-proj.curse { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, #ff9ff3, #a020a0 60%, #2a0030); box-shadow: 0 0 8px 3px #c040ff; }
.mon.elite { z-index: 30; }
.mon.elite .art { width: 76px; height: 76px; filter: drop-shadow(0 0 4px #ff3d3d) drop-shadow(0 0 8px #ff8a1f88); }
.mon.elite .art img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.mon.elite .mon-hp { width: 60px; border-color: #ff8a1f; }
.mon.elite .mon-hp i { background: linear-gradient(90deg, #ff3d3d, #ff8a1f); }
.mon.cursed .art { outline: none; filter: drop-shadow(0 0 5px #c040ff) saturate(.8); }


/* =====================================================================
   v25: главное меню — живой фон слизистой долины, логотип, герой на постаменте, крупная кнопка и плитки
   ===================================================================== */
.menu { background: #0b1a12; }
.menu.screen::before { content: ''; position: fixed; inset: -20px; z-index: -1; background: url('assets/menu-bg.webp') center / cover; filter: blur(6px) brightness(.35) saturate(1.1); }
.main-menu { padding: 0; place-items: stretch; overflow: hidden; }
.menu-bg { position: absolute; inset: -4%; background: url('assets/menu-bg.webp') center 30% / cover; animation: menu-pan 28s ease-in-out infinite alternate; }
.menu-bg::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(6, 26, 18, .55) 0, rgba(6, 26, 18, .05) 22%, transparent 42%, rgba(6, 22, 16, .55) 62%, rgba(4, 16, 11, .92) 86%); }
@keyframes menu-pan { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.12) translate(-1.5%, -2%); } }
/* пузырьки слизи поднимаются со дна */
.menu-bubbles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.menu-bubbles i { position: absolute; bottom: -40px; width: var(--s, 18px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffffffcc 0 12%, #c8ffd055 30%, #7dff8a33 62%, #7dff8a88 100%);
  box-shadow: 0 0 10px #7dff8a55; animation: bubble-up var(--t, 12s) linear infinite; animation-delay: var(--d, 0s); opacity: .8; }
.menu-bubbles i:nth-child(1) { left: 8%; --s: 14px; --t: 11s; --d: -2s; }
.menu-bubbles i:nth-child(2) { left: 22%; --s: 24px; --t: 15s; --d: -7s; }
.menu-bubbles i:nth-child(3) { left: 37%; --s: 10px; --t: 9s; --d: -4s; }
.menu-bubbles i:nth-child(4) { left: 55%; --s: 18px; --t: 13s; --d: -10s; }
.menu-bubbles i:nth-child(5) { left: 68%; --s: 28px; --t: 17s; --d: -1s; }
.menu-bubbles i:nth-child(6) { left: 80%; --s: 12px; --t: 10s; --d: -6s; }
.menu-bubbles i:nth-child(7) { left: 90%; --s: 20px; --t: 14s; --d: -12s; }
.menu-bubbles i:nth-child(8) { left: 47%; --s: 16px; --t: 12s; --d: -8s; }
@keyframes bubble-up { 0% { transform: translate(0, 0) scale(.8); opacity: 0; } 10% { opacity: .85; }
  50% { transform: translate(14px, -50vh) scale(1); } 90% { opacity: .7; } 100% { transform: translate(-6px, -105vh) scale(1.1); opacity: 0; } }

.menu-panel.main { position: relative; z-index: 1; width: min(100%, 420px); height: 100%; min-height: 100dvh; margin: 0 auto; gap: 0;
  justify-content: space-between; padding: max(14px, var(--sa-top)) 16px max(16px, var(--sa-bottom)); }
.menu-res { display: flex; justify-content: flex-end; gap: 8px; }
.res-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 14px; color: #f2fff0;
  background: rgba(8, 30, 20, .62); box-shadow: inset 0 0 0 1px rgba(190, 255, 200, .35), 0 4px 12px #0006; backdrop-filter: blur(6px); }
.res-chip b { font-weight: 800; }

.menu-logo { text-align: center; margin-top: 2vh; }
.main-menu .menu-title { display: flex; flex-direction: column; align-items: center; line-height: 1; text-shadow: none; }
.main-menu .menu-title b, .main-menu .menu-title span { display: block; font-weight: 900; letter-spacing: 1px;
  background: linear-gradient(180deg, #f4ffd8 0%, #9dff7a 45%, #2fbf5a 75%, #1a8a44 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #0b3a1e) drop-shadow(0 0 1px #0b3a1e) drop-shadow(0 8px 14px #000a); }
.main-menu .menu-title b { font-size: clamp(42px, 13vw, 64px); }
.main-menu .menu-title span { font-size: clamp(22px, 7vw, 32px); margin-top: 4px; letter-spacing: 6px; text-transform: uppercase; }
.menu-logo small { display: inline-block; margin-top: 10px; padding: 4px 12px; border-radius: 999px; font-size: 12px; color: #e9ffe6;
  background: rgba(8, 30, 20, .55); backdrop-filter: blur(4px); }

.menu-stage { position: relative; display: grid; justify-items: center; align-content: end; flex: 1; min-height: 170px; padding-top: 10px; }
.menu-glow { position: absolute; bottom: 48px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, #9dff7a55, transparent 65%); animation: glow-pulse 3s ease-in-out infinite; }
@keyframes glow-pulse { 50% { transform: scale(1.12); opacity: .7; } }
.main-menu .menu-hero { position: relative; width: clamp(120px, 34vw, 170px); height: clamp(120px, 34vw, 170px); margin: 0; z-index: 1; filter: drop-shadow(0 10px 8px #0008); }
.menu-pedestal { width: 150px; height: 26px; margin-top: -14px; border-radius: 50%; background: radial-gradient(ellipse, #b8ffb0aa 0, #4fd16b55 45%, transparent 70%); }
.menu-run { margin: 8px 0 0; padding: 5px 12px; border-radius: 10px; font-size: 13px; color: #e9ffe6; background: rgba(8, 30, 20, .55); backdrop-filter: blur(4px); }
.menu-run b { color: #b9ff9a; }

.menu-actions { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.main-menu .menu-btn.primary { position: relative; padding: 18px 16px; font-size: 20px; font-weight: 900; border-radius: 18px; color: #0d2a14;
  background: linear-gradient(180deg, #e6ffb8 0%, #9cf06a 35%, #4fc24a 100%); box-shadow: inset 0 -5px #2f8a34, inset 0 3px #ffffffaa, 0 6px 0 #0b3a1e, 0 0 24px #7dff8a66;
  animation: start-pulse 2.4s ease-in-out infinite; }
.main-menu .menu-btn.primary:active { transform: translateY(3px); box-shadow: inset 0 -2px #2f8a34, 0 3px 0 #0b3a1e; }
@keyframes start-pulse { 50% { box-shadow: inset 0 -5px #2f8a34, inset 0 3px #ffffffaa, 0 6px 0 #0b3a1e, 0 0 40px #9dff7aaa; } }
.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.menu-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px 10px; border-radius: 16px; color: #f2fff0;
  background: rgba(8, 30, 20, .66); box-shadow: inset 0 0 0 1px rgba(190, 255, 200, .3), 0 6px 14px #0007; backdrop-filter: blur(8px); transition: transform .12s; }
.menu-tile:active { transform: scale(.96); }
.menu-tile .ic { font-size: 24px; line-height: 1.1; }
.menu-tile b { font-size: 13px; font-weight: 800; }
.menu-tile small { font-size: 10px; color: #b9d8b9; line-height: 1.2; }
.menu-badge { position: absolute; top: -6px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; font-style: normal; font-size: 12px; font-weight: 900;
  display: grid; place-items: center; color: #2a1600; background: #ffd25e; box-shadow: 0 0 0 2px #0b1a12, 0 0 12px #ffd25eaa; animation: badge-pop 1.8s ease-in-out infinite; }
.menu-badge[hidden] { display: none; }
@keyframes badge-pop { 50% { transform: scale(1.12); } }
.main-menu .menu-best { font-size: 11px; color: #c9e3c9; text-align: center; text-shadow: 0 1px 2px #000; }
.main-menu .menu-link { align-self: center; }
/* пиксельный стиль: тот же макет, но с пиксельным шрифтом заголовка и углами */
body:not(.style-hd) .main-menu .menu-title b, body:not(.style-hd) .main-menu .menu-title span { font-family: 'Press Start 2P', monospace; letter-spacing: 0; }
body:not(.style-hd) .main-menu .menu-title b { font-size: clamp(30px, 9vw, 44px); }
body:not(.style-hd) .main-menu .menu-title span { font-size: clamp(14px, 4.5vw, 20px); margin-top: 10px; }
body:not(.style-hd) .menu-tile, body:not(.style-hd) .main-menu .menu-btn.primary { border-radius: 6px; }
body.style-hd .main-menu .menu-btn.primary { background: linear-gradient(180deg, #e6ffb8 0%, #9cf06a 35%, #4fc24a 100%); }
@media (prefers-reduced-motion: reduce) { .menu-bg, .menu-bubbles i, .menu-glow, .main-menu .menu-btn.primary, .menu-badge { animation: none; } }
@media (min-height: 760px) { .menu-logo { margin-top: 5vh; } }


/* v26: помощники крупнее, с тенью, дыханием и шагом вперёд */
.helper-slot.filled img { width: 64px; height: 64px; margin-left: -32px; bottom: -4px; filter: none;
  animation: helper-live 4.2s ease-in-out infinite; }
.helper-slot.filled::before { content: ''; position: absolute; left: 50%; bottom: -8px; width: 46px; height: 10px; margin-left: -23px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .45) 0, rgba(0, 0, 0, .25) 45%, transparent 72%); animation: helper-shadow 4.2s ease-in-out infinite; }
.helper-slot.filled:nth-of-type(2) img, .helper-slot.filled:nth-of-type(2)::before { animation-delay: -1.7s; }
.helper-slot.filled:has(img.spirit)::before { width: 28px; margin-left: -14px; opacity: .6; }
/* дыхание дважды, потом шаг вперёд с наклоном и обратно */
@keyframes helper-live {
  0%, 100% { transform: translate(0, 0) scale(1, 1); }
  15% { transform: translate(0, -1px) scale(1.02, .98); }
  30% { transform: translate(0, 0) scale(1, 1); }
  45% { transform: translate(0, -1px) scale(1.02, .98); }
  60% { transform: translate(0, 0) scale(1, 1); }
  70% { transform: translate(5px, -2px) rotate(3deg); }
  80% { transform: translate(5px, 0) rotate(-1deg); }
  90% { transform: translate(0, 0) rotate(0); }
}
@keyframes helper-shadow { 70%, 80% { transform: translateX(5px) scaleX(.9); } 15%, 45% { transform: scaleX(.95); } }
.helper-slot.filled img.helper-act { animation: helper-act .28s ease-out; }
.helper-slot.filled .helper-lvl { bottom: -14px; }
.arena.running .helper-slot.filled img:not(.spirit) { animation: run-bob .32s steps(2) infinite; }
@media (prefers-reduced-motion: reduce) { .helper-slot.filled img, .helper-slot.filled::before { animation: none; } }


/* v27: щит — энергетический купол: соты, кромка, блик, бегущий отсвет, рябь от удара */
.slime .aura-shield { width: 138%; top: 50%; z-index: 4; border: 0; opacity: var(--shield, 1);
  background:
    radial-gradient(ellipse 22% 12% at 36% 22%, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle closest-side, rgba(255, 210, 94, 0) 0 52%, rgba(255, 210, 94, .10) 70%, rgba(255, 233, 160, .35) 86%, rgba(255, 248, 214, .95) 91%, rgba(255, 233, 160, .7) 95%, rgba(255, 210, 94, 0) 100%);
  box-shadow: 0 0 14px rgba(255, 210, 94, .35);
  animation: shield-breathe 2.4s ease-in-out infinite; }
/* соты: видны у краёв купола, медленно плывут */
.slime .aura-shield::before { content: ''; position: absolute; inset: 4%; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17.32' height='30' viewBox='0 0 17.32 30'%3E%3Cpath d='M8.66 0 17.32 5v10L8.66 20 0 15V5zM8.66 20v10M0 15l-0 0M17.32 15v0' fill='none' stroke='%23ffe9a0' stroke-width='1.1' stroke-opacity='.9'/%3E%3C/svg%3E") 0 0 / 14px 24px repeat;
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 40%, rgba(0, 0, 0, .25) 60%, #000 88%, transparent 92%);
  mask: radial-gradient(circle closest-side, transparent 0 40%, rgba(0, 0, 0, .25) 60%, #000 88%, transparent 92%);
  opacity: .55; animation: shield-hex 9s linear infinite; }
/* бегущий по кромке отсвет */
.slime .aura-shield::after { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(255, 252, 230, .95) 80%, transparent 90% 100%);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 84%, #000 88%, #000 91%, transparent 95%);
  mask: radial-gradient(circle closest-side, transparent 0 84%, #000 88%, #000 91%, transparent 95%);
  animation: aura-spin 2.2s linear infinite; }
@keyframes shield-breathe { 50% { transform: translate(-50%, -50%) scale(1.035); box-shadow: 0 0 22px rgba(255, 210, 94, .5); } }
@keyframes shield-hex { to { background-position: 14px 48px; } }
/* удар по щиту: вспышка и рябь */
.slime .aura-shield.hit { animation: shield-hit .35s ease-out, shield-breathe 2.4s ease-in-out .35s infinite; }
@keyframes shield-hit { 0% { filter: brightness(2.2); transform: translate(-50%, -50%) scale(.94); } 60% { transform: translate(-50%, -50%) scale(1.06); } 100% { filter: none; transform: translate(-50%, -50%) scale(1); } }
body:not(.style-hd) .slime .aura-shield::before { background-size: 12px 21px; image-rendering: pixelated; }


/* v28: выбор карт открывается «взведённым»: 0.7 с без нажатий, полоска показывает, когда можно */
.cards.arming .cards-list, .cards.arming .cards-close { pointer-events: none; }
.cards.arming .cards-list { opacity: .75; }
.cards.arming .cards-box::after { content: ''; display: block; height: 3px; margin-top: 8px; border-radius: 2px; background: #ffd25e; transform-origin: left; animation: cards-arm .7s linear forwards; }
@keyframes cards-arm { from { transform: scaleX(0); } to { transform: scaleX(1); } }


/* v29: щит — тонкая дуга сверху над героем (а не круг); значки эффектов над головой */
.slime .aura-shield { left: var(--ax, 50%); top: var(--ay, 52%); width: calc(var(--aw, 80px) * 1.25); aspect-ratio: 1; z-index: 4;
  border: 3px solid rgba(255, 240, 190, .95); background: none; box-shadow: 0 0 10px rgba(255, 210, 94, .8), inset 0 0 8px rgba(255, 210, 94, .6);
  -webkit-mask: conic-gradient(from -58deg, transparent 0deg, #000 14deg, #000 102deg, transparent 116deg, transparent 360deg);
  mask: conic-gradient(from -58deg, transparent 0deg, #000 14deg, #000 102deg, transparent 116deg, transparent 360deg);
  animation: shield-arc 2.4s ease-in-out infinite; opacity: var(--shield, 1); }
/* соты вдоль дуги */
.slime .aura-shield::before { inset: 3%; border-radius: 50%; opacity: .7;
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 78%, #000 84%, #000 97%, transparent 100%);
  mask: radial-gradient(circle closest-side, transparent 0 78%, #000 84%, #000 97%, transparent 100%); animation: shield-hex 9s linear infinite; }
/* искра бежит по дуге туда и обратно */
.slime .aura-shield::after { inset: -3px; background: radial-gradient(circle at 50% 2%, #fff 0 3px, rgba(255, 240, 190, .9) 4px, transparent 9px);
  -webkit-mask: none; mask: none; animation: shield-glint 2.4s ease-in-out infinite; }
@keyframes shield-arc { 50% { transform: translate(-50%, -50%) scale(1.03); filter: brightness(1.2); } }
@keyframes shield-glint { 0%, 100% { transform: rotate(-42deg); } 50% { transform: rotate(42deg); } }
.slime .aura-shield.hit { animation: shield-hit .35s ease-out, shield-arc 2.4s ease-in-out .35s infinite; }
.hero-status { position: absolute; left: var(--ax, 50%); top: calc(var(--ay, 40px) - var(--aw, 80px) * .78 - 18px); transform: translateX(-50%);
  display: flex; gap: 3px; z-index: 6; pointer-events: none; white-space: nowrap; }
.hero-status .st { display: inline-flex; align-items: center; gap: 2px; padding: 1px 5px; border-radius: 8px; font-size: 11px; line-height: 16px;
  color: #fff; background: rgba(10, 14, 10, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.hero-status .st b { font-size: 10px; font-weight: 800; }
.hero-status .st-shield { box-shadow: inset 0 0 0 1px #ffd25e; }
.hero-status .st-buff { box-shadow: inset 0 0 0 1px #7dff8a; }
.hero-status .st-rage { box-shadow: inset 0 0 0 1px #ff5a3d; }
.hero-status .st-grab { background: #b3001b; animation: badge-pop .5s ease-in-out infinite; }


/* v30: бой с боссом — логово, огромный босс, приёмы с замахом, полоса здоровья сверху */
.arena.boss-arena::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse at 50% 60%, transparent 45%, rgba(80, 0, 10, .45) 100%); }
.mon.boss { width: var(--bw, 112px); margin: calc(-1 * var(--bw, 112px) - 6px) 0 0 calc(-.5 * var(--bw, 112px)); z-index: 40 !important; }
.mon.boss .art { width: var(--bw, 104px); height: var(--bw, 104px); }
.mon.boss .art img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; image-rendering: pixelated; filter: drop-shadow(0 6px 4px #0008); }
.mon.boss .mon-hp { display: none; }
.mon.boss.spawn .art { animation: boss-enter 1.2s ease-out; }
@keyframes boss-enter { 0% { transform: translateY(6px); } 25% { transform: translateY(-4px) rotate(-1deg); } 50% { transform: translateY(2px) rotate(1deg); } 100% { transform: none; } }
/* замах: босс подаётся назад и наливается красным */
.mon.boss.tell .art { animation: boss-tell .3s ease-in-out infinite alternate; filter: drop-shadow(0 0 10px #ff2a2a) brightness(1.15); }
@keyframes boss-tell { to { transform: translateX(10px) scale(1.02, .98); } }
.mon.boss.tell-grab .art { filter: drop-shadow(0 0 12px #c040ff) brightness(1.1); }
.boss-slam { animation: boss-slam .35s ease-in !important; }
@keyframes boss-slam { 40% { transform: translateX(-60px) rotate(-6deg) scale(1.05); } 100% { transform: none; } }
.boss-stomp { animation: boss-stomp .4s ease-out !important; }
@keyframes boss-stomp { 30% { transform: translateY(-26px) scale(.97, 1.04); } 60% { transform: translateY(4px) scale(1.06, .92); } 100% { transform: none; } }
.boss-spit { animation: boss-spit .3s ease-out !important; }
@keyframes boss-spit { 40% { transform: translateX(-18px) scale(1.06); } 100% { transform: none; } }
.boss-grab { animation: boss-grab .5s ease-out !important; }
@keyframes boss-grab { 40% { transform: translateX(-80px) scaleX(1.1); } 100% { transform: none; } }
.fx-warn { transform: translate(-50%, -50%); z-index: 50; font: 900 30px/1 sans-serif; color: #ff3030; text-shadow: 0 0 6px #fff, 2px 2px 0 #000; animation: warn-pop .25s ease-in-out infinite alternate; }
@keyframes warn-pop { to { transform: translate(-50%, -60%) scale(1.25); } }
#slime.grabbed { animation: grab-shake .12s linear infinite; }
#slime.grabbed #evolved-art, #slime.grabbed .slime-body { filter: drop-shadow(0 0 6px #c040ff) saturate(.7); }
@keyframes grab-shake { 50% { transform: translateX(2px); } }
#slime.poisoned #evolved-art, #slime.poisoned .slime-body { filter: drop-shadow(0 0 5px #8cff6a) hue-rotate(40deg); }
/* полоса здоровья босса на всю ширину */
.boss-bar { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); width: min(92%, 420px); z-index: 30; text-align: center; pointer-events: none; }
.boss-bar[hidden] { display: none; }
.boss-bar b { display: block; font-size: 13px; font-weight: 900; color: #ffd7d7; text-shadow: 0 0 6px #ff2a2a, 1px 1px 0 #000; letter-spacing: 1px; margin-bottom: 3px; }
.boss-bar-track { position: relative; height: 16px; border-radius: 8px; background: #2a0a0e; box-shadow: 0 0 0 2px #000, 0 0 0 4px #7a1a22, 0 4px 10px #000a; overflow: hidden; }
.boss-bar-track i { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(180deg, #ff6b6b, #c0141f 60%, #7a0a12); transition: width .15s; }
.boss-bar-track span { position: relative; font-size: 10px; font-weight: 800; color: #fff; text-shadow: 1px 1px 0 #000; line-height: 16px; }


/* =====================================================================
   v31: экран боя как на референсе — поле на весь экран, всё поверх него
   ===================================================================== */
#app { position: relative; padding: 0; gap: 0; max-width: 560px; height: 100dvh; }
#app > .arena { position: absolute; inset: 0; margin: 0; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
.tabbar { display: none !important; }
/* шапка поверх поля */
.arena .hud { position: absolute; left: 0; right: 0; top: 0; z-index: 25; padding: max(6px, var(--sa-top)) calc(8px + var(--sa-right)) 14px calc(8px + var(--sa-left));
  background: linear-gradient(to bottom, rgba(8, 10, 8, .72), rgba(8, 10, 8, 0)); pointer-events: none; }
.arena .hud .hud-row { margin: 0; }
.arena .hud button, .arena .hud .gold { pointer-events: auto; }
.arena .lvl-box { flex: 0 1 220px; flex-direction: row; align-items: center; gap: 6px; padding: 4px 8px 4px 6px; border-radius: 12px;
  background: rgba(10, 14, 10, .7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.arena .lvl-box .level { font-size: 15px; white-space: nowrap; }
.arena .lvl-box .bar.xp { flex: 1; height: 14px; border-radius: 7px; }
.arena .hud-right > * { background: rgba(10, 14, 10, .7); border-radius: 12px; }
.arena .scene-top { top: calc(max(6px, var(--sa-top)) + 40px); }
.boss-bar { top: calc(max(6px, var(--sa-top)) + 100px); }
/* пассивки столбиком справа */
.arena .passive-bar { position: absolute; right: 6px; top: 34%; z-index: 24; display: flex; flex-direction: column; gap: 8px; margin: 0; width: auto; }
.arena .passive-bar .pchip { flex-direction: column; align-items: center; gap: 0; width: 52px; padding: 4px 2px 3px; border-radius: 12px;
  background: rgba(10, 14, 10, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.arena .passive-bar .pchip img { width: 32px; height: 32px; }
.arena .passive-bar .pchip-text b, .arena .passive-bar .pips { display: none; }
.arena .passive-bar .pchip-text small { font-size: 10px; font-weight: 800; color: #e9ffe6; }
.arena .passive-bar .pchip.empty { opacity: .55; }
.arena .passive-bar .pchip.empty .pchip-text small { display: none; }
/* низ: круг энергии с кольцом и кнопка автобоя слева, умения справа */
.arena .skillbar { position: absolute; left: 6px; right: 6px; bottom: calc(6px + var(--sa-bottom)); z-index: 24;
  display: grid; grid-template-columns: 72px 1fr; gap: 6px; align-items: end; margin: 0; }
.arena .skillbar[hidden] { display: none; }
.arena .energy-line { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.arena .energy-num { display: grid; place-items: center; width: 64px; height: 64px; min-width: 0; border-radius: 50%; font-size: 18px;
  background: radial-gradient(circle, #1d1a10 0 60%, transparent 61%), conic-gradient(#ffd25e calc(var(--e, 0) * 1%), #3a3426 0);
  box-shadow: 0 0 0 2px #0008, 0 4px 10px #0008; }
.arena .energy-line .energy-bar { display: none; }
.arena .energy-line .auto-btn { width: 72px; min-height: 30px; padding: 2px 4px; border-radius: 10px; font-size: 11px; }
.arena .skills { gap: 6px; }
.arena .skill { min-height: 70px; border-radius: 12px; background: rgba(20, 16, 10, .82); }
/* боковые кнопки */
.edge { position: absolute; left: 0; top: 46%; z-index: 26; display: flex; align-items: center; gap: 6px; }
.edge-btn { width: 24px; height: 58px; display: grid; place-items: center; padding: 0; font-size: 22px; font-weight: 900; color: #ffe9a0;
  background: rgba(10, 14, 10, .72); box-shadow: inset 0 0 0 1px rgba(255, 233, 160, .4); border-radius: 0 12px 12px 0; position: relative; }
.edge-btn.right { position: absolute; right: 0; top: 66%; z-index: 26; border-radius: 12px 0 0 12px; }
.edge-menu { display: flex; flex-direction: column; gap: 6px; }
.edge-menu[hidden] { display: none; }
.edge-menu button { position: relative; display: flex; flex-direction: column; align-items: center; width: 64px; padding: 8px 2px; font-size: 20px; border-radius: 12px;
  background: rgba(10, 14, 10, .85); box-shadow: inset 0 0 0 1px rgba(255, 233, 160, .35); color: #fff; }
.edge-menu small { font-size: 10px; color: #e9ffe6; }
/* под героем — крупная полоса здоровья и имя формы */
#slime .slime-hp { left: calc(var(--ax, 50px) - 50px); top: calc(var(--ay, 60px) + var(--aw, 80px) * .55); width: 100px; height: 15px; z-index: 6; border-radius: 8px; }
#slime .slime-hp span { font-size: 11px; font-weight: 900; }
.hero-name { position: absolute; left: var(--ax, 50px); top: calc(var(--ay, 60px) + var(--aw, 80px) * .55 + 17px); transform: translateX(-50%); z-index: 6;
  padding: 0 6px; border-radius: 6px; font-size: 10px; font-weight: 800; white-space: nowrap; color: #f2ffe0; background: rgba(10, 14, 10, .6); pointer-events: none; }
.hero-name:empty { display: none; }
/* панели выезжают сбоку: слева отряд и предметы, справа пассивки и остальное */
.sheet { top: 0; bottom: 0; left: auto; right: 0; transform: none; width: min(88%, 380px); max-height: none; border-radius: 18px 0 0 18px; }
.sheet.from-left { left: 0; right: auto; border-radius: 0 18px 18px 0; }
@media (min-width: 560px) { .sheet { right: calc(50% - 280px); } .sheet.from-left { left: calc(50% - 280px); } }

/* v31b: доводка экрана боя */
#slime .slime-hp { width: 112px; left: calc(var(--ax, 50px) - 56px); height: 16px; padding: 0; border: 0; box-shadow: 0 0 0 2px #0b0d0b, 0 3px 6px #0008; overflow: hidden; }
#slime .slime-hp span { line-height: 16px; white-space: nowrap; }
.hero-name { top: calc(var(--ay, 60px) + var(--aw, 80px) * .55 + 21px); }
.arena .passive-bar { top: 24%; }
.arena .evo-status { top: calc(max(6px, var(--sa-top)) + 96px); left: 50%; transform: translateX(-50%); }
.arena .hud-right { gap: 6px; }
.arena .hud-right > * { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 36px; min-width: 36px; padding: 0 10px; font-size: 16px; border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.arena .hud-right .gear-btn { padding: 0; width: 36px; }
.hero-name { top: calc(var(--ay, 60px) + var(--aw, 80px) * .55 + 25px); }

/* v31c: герой нарисован в масштабе ½ (#slime scale .5), поэтому подписи под ним растянуты ×2 и отступы удвоены */
#slime .slime-hp { width: 112px; height: 16px; left: calc(var(--ax, 50px) - 112px); top: calc(var(--ay, 60px) + var(--aw, 80px) * .5); transform: scale(2); transform-origin: 0 0; }
.hero-name { top: calc(var(--ay, 60px) + var(--aw, 80px) * .5 + 38px); transform: translateX(-50%) scale(2); transform-origin: 50% 0; }
.hero-status { top: calc(var(--ay, 60px) - var(--aw, 80px) * .7 - 40px); transform: translateX(-50%) scale(2); transform-origin: 50% 100%; }


/* v32: портрет героя слева сверху с кольцами здоровья и щита; уровень по центру; ресурсы колонкой */
.arena .hud-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
.hero-card { display: flex; align-items: center; gap: 6px; pointer-events: auto; padding: 3px 10px 3px 3px; border-radius: 40px;
  background: rgba(10, 14, 10, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.portrait { position: relative; width: 58px; height: 58px; flex-shrink: 0; }
.portrait svg { position: absolute; inset: 0; transform: rotate(-90deg); overflow: visible; }
.portrait circle { fill: none; stroke-linecap: round; }
.ring-track { stroke: #2a1416; stroke-width: 5; }
.ring-hp { stroke: #4fd16b; stroke-width: 5; stroke-dasharray: 100; transition: stroke-dashoffset .2s, stroke .3s; filter: drop-shadow(0 0 2px #4fd16b88); }
.ring-shield { stroke: #ffd25e; stroke-width: 2.6; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .2s; filter: drop-shadow(0 0 3px #ffd25e); }
.hero-card.low .ring-hp { stroke: #ff4d4d; filter: drop-shadow(0 0 3px #ff4d4d); }
.hero-card.low .portrait { animation: low-pulse 1s ease-in-out infinite; }
@keyframes low-pulse { 50% { filter: drop-shadow(0 0 6px #ff2a2a); } }
.portrait img { position: absolute; left: 6px; top: 6px; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: 50% 30%;
  background: radial-gradient(circle at 50% 35%, #3b4a36, #141a12); image-rendering: pixelated; }
.portrait img.fallback { object-fit: cover; object-position: 50% 15%; transform: scale(1.6); transform-origin: 50% 20%; }
.hero-card-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.hero-card-text b { font-size: 13px; font-weight: 900; color: #fff; text-shadow: 1px 1px 0 #000; white-space: nowrap; }
.hero-card.shielded .hero-card-text b { color: #ffe9a0; }
.hero-card-text small { font-size: 10px; color: #cfe8c8; white-space: nowrap; max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
.hero-card.portrait-hit { animation: portrait-hit .3s ease-out; }
@keyframes portrait-hit { 30% { transform: translateX(-3px); filter: brightness(1.8) saturate(.5); } 60% { transform: translateX(3px); } }
/* уровень и опыт — по центру */
.arena .lvl-box { flex: none; justify-self: center; width: 100%; max-width: 150px; flex-direction: column; align-items: stretch; gap: 2px; padding: 4px 8px; text-align: center; }
.arena .lvl-box .level { font-size: 14px; }
.arena .lvl-box .bar.xp { height: 12px; }
/* ресурсы колонкой справа */
.res-col { display: flex; flex-direction: column; gap: 3px; }
.arena .hud-right .res-col { background: none; box-shadow: none; padding: 0; height: auto; }
.arena .hud-right .res-col > * { height: 24px; padding: 0 8px; font-size: 13px; border-radius: 10px; background: rgba(10, 14, 10, .72); display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
/* здоровье и имя теперь в портрете — под героем их не дублируем */
#slime .slime-hp, .hero-name { display: none; }

/* v32b: полоса опыта под уровнем не сжимается; мир и путь ниже высокой шапки */
.arena .lvl-box .bar.xp { min-height: 12px; height: 12px; }
.arena .scene-top { top: calc(max(6px, var(--sa-top)) + 76px); }
.boss-bar { top: calc(max(6px, var(--sa-top)) + 140px); }
.arena .evo-status { top: calc(max(6px, var(--sa-top)) + 132px); }


/* =====================================================================
   v33: выбор пассивки отличается от сундука; монстры идут к герою шагом; запрет предметов; статистика
   ===================================================================== */
.cards.passive-mode { background: radial-gradient(circle at 50% 30%, rgba(60, 40, 120, .92), rgba(10, 8, 24, .95) 70%); }
.cards.passive-mode .cards-title { color: #d9c8ff; text-shadow: 0 0 12px #8a5cff, 2px 2px 0 #000; animation: passive-in .45s ease-out; }
.cards.passive-mode .cards-title small { display: block; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #ffd25e; text-shadow: 1px 1px 0 #000; }
.cards.passive-mode .cards-sub { color: #bfb3e8; }
.cards.passive-mode .card { background: linear-gradient(135deg, rgba(70, 50, 140, .9), rgba(30, 22, 60, .95)); box-shadow: inset 0 0 0 2px #8a5cff, 0 0 14px #8a5cff55; border-radius: 14px; }
.cards.passive-mode .card.upgrade { box-shadow: inset 0 0 0 2px #ffd25e, 0 0 14px #ffd25e44; }
.cards.passive-mode .card-art { border-radius: 50%; background: radial-gradient(circle, #2a1f55, #120c26); box-shadow: inset 0 0 0 2px #b9a2ff; }
.cards.passive-mode .cards-close { background: rgba(30, 22, 60, .9); color: #d9c8ff; }
@keyframes passive-in { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
/* монстры смотрят на героя; шаг — покачивание; у пиксельных ещё и второй кадр ног */
/* пиксельные спрайты монстров нарисованы лицом влево — к герою; не отражаем */
.mon .art img, .mon .art.flip img { transform: none; }
.mon.walking:not(.boss) .art { animation: mon-walk .5s ease-in-out infinite; }
.mon.walking .side-sprite.sprite-bat { animation-duration: .35s; }
@keyframes mon-walk { 0%, 100% { translate: 0 0; rotate: -3deg; } 50% { translate: 0 -3px; rotate: 3deg; } }
/* усиленные крупнее и заметнее */
.mon.elite { margin-top: -118px; margin-left: -50px; }
.mon.elite .art { width: 104px; height: 104px; filter: drop-shadow(0 0 5px #ff3d3d) drop-shadow(0 0 12px #ff8a1f99); }
.mon.elite .mon-hp { width: 84px; height: 7px; }
.mon.elite::before { content: '★'; position: absolute; left: 50%; top: -14px; transform: translateX(-50%); color: #ffd25e; font-size: 14px; text-shadow: 0 0 6px #ff8a1f, 1px 1px 0 #000; }
/* запрет предметов в коллекции */
.coll { cursor: pointer; font: inherit; color: inherit; text-align: center; }
.coll.banned { opacity: .5; filter: grayscale(.9); position: relative; }
.coll.banned::after { content: '✕'; position: absolute; top: 4px; right: 6px; color: #ff5d5d; font-weight: 900; font-size: 18px; text-shadow: 1px 1px 0 #000; }
.sheet-note.bans { color: #ffd25e; }
/* статистика */
.stats-list { display: flex; flex-direction: column; gap: 4px; }
.stat-row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, .05); font-size: 13px; }
.stat-row b { color: #ffe9a0; text-align: right; }
.stats-list h4 { margin: 10px 0 4px; font-size: 13px; color: var(--gold); }
.stat-items { display: flex; flex-wrap: wrap; gap: 6px; }
.stat-item { position: relative; width: 44px; height: 44px; border-radius: 8px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 2px var(--edge, #666); }
.stat-item img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.stat-item i { position: absolute; right: 2px; bottom: 0; font-style: normal; font-size: 10px; font-weight: 900; color: #fff; text-shadow: 1px 1px 0 #000; }
.stat-pass { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.stat-pass span { display: flex; align-items: center; gap: 6px; }
.stat-pass img { width: 24px; height: 24px; image-rendering: pixelated; }

/* v34: Золотая перчатка — у счётчика золота бонус к урону */
#gold-box.glove { position: relative; box-shadow: inset 0 0 0 1px #ffd25e, 0 0 8px #ffd25e66 !important; }
#gold-box.glove::after { content: attr(data-bonus); position: absolute; right: 100%; margin-right: 4px; top: 50%; transform: translateY(-50%); font-size: 10px; font-weight: 900;
  color: #ffd25e; text-shadow: 1px 1px 0 #000; white-space: nowrap; }
#gold-box.glove::after { position: static; transform: none; margin: 0 0 0 4px; }
#gold-box.glove::after { position: absolute; top: -9px; right: 2px; left: auto; margin: 0; padding: 0 4px; border-radius: 6px; font-size: 9px; line-height: 13px; background: #2a1f08; box-shadow: 0 0 0 1px #ffd25e; }


/* v35: стартовый договор — свой экран (красно-золотой) */
.cards.pact-mode { background: radial-gradient(circle at 50% 30%, rgba(110, 30, 20, .92), rgba(20, 8, 6, .96) 70%); }
.cards.pact-mode .cards-title { color: #ffd9a0; text-shadow: 0 0 12px #ff6a2a, 2px 2px 0 #000; animation: passive-in .45s ease-out; }
.cards.pact-mode .cards-title small { display: block; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #ffd25e; }
.cards.pact-mode .card { background: linear-gradient(135deg, rgba(120, 40, 24, .92), rgba(40, 14, 10, .96)); box-shadow: inset 0 0 0 2px #ffb347, 0 0 14px #ff6a2a55; border-radius: 14px; }
.cards.pact-mode .card-art { display: grid; place-items: center; border-radius: 12px; background: radial-gradient(circle, #4a1a10, #1a0806); box-shadow: inset 0 0 0 2px #ffb347; }
.pact-icon { font-size: 34px; }
.cards.pact-mode .cards-close { background: rgba(40, 14, 10, .9); color: #ffd9a0; }
.hero-status .st-pact { box-shadow: inset 0 0 0 1px #ffb347; }
.skillbar.locked .skill { filter: grayscale(1) brightness(.6); }


/* v36: торговец */
.merchant { position: fixed; inset: 0; z-index: 46; display: flex; justify-content: center; overflow: hidden; }
.merchant[hidden] { display: none; }
.merchant-bg { position: absolute; inset: 0; background: url('assets/merchant-bg.webp') center 20% / cover; }
.merchant-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10, 6, 20, .25) 0, rgba(10, 6, 20, .1) 30%, rgba(10, 6, 20, .85) 52%, rgba(8, 4, 16, .96) 100%); }
.merchant-panel { position: relative; z-index: 1; width: min(100%, 460px); display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  padding: 16px 14px max(16px, var(--sa-bottom)); overflow-y: auto; }
.merchant-head { display: flex; justify-content: space-between; align-items: center; }
.merchant-head small { display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #ffd25e; }
.merchant-head b { font-size: 22px; font-weight: 900; color: #f3e6ff; text-shadow: 0 0 10px #a060ff, 2px 2px 0 #000; }
.merchant-say { margin: 0; font-size: 12px; font-style: italic; color: #e2d6f5; }
.merchant-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.m-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border-radius: 14px; text-align: center;
  background: rgba(30, 18, 50, .88); box-shadow: inset 0 0 0 2px var(--edge, #8a5cff), 0 6px 14px #0008; }
.m-card.lunar { --edge: #9fd8ff; }
.m-card.epic { --edge: #c06bff; } .m-card.legendary { --edge: #ffb347; } .m-card.rare { --edge: #5aa9ff; } .m-card.uncommon { --edge: #6bd26b; } .m-card.common { --edge: #b0a890; }
.m-art img { width: 48px; height: 48px; image-rendering: pixelated; }
.m-name { font-size: 13px; color: #fff; }
.m-rar { font-size: 10px; color: #c8bde0; }
.m-desc { font-size: 10px; line-height: 1.3; color: #ddd3ee; min-height: 40px; }
.m-buy { margin-top: 4px; width: 100%; padding: 8px 4px; border-radius: 10px; font-weight: 900; font-size: 14px; color: #10203a; background: linear-gradient(180deg, #d8f0ff, #8fc8ff); box-shadow: inset 0 -3px #4a88c8; }
.m-buy:disabled { opacity: .45; filter: grayscale(.6); }
.m-card.sold { opacity: .55; }


/* v37: окно «Новый облик» и подсказка следующего автоумения */
.newlook { position: fixed; inset: 0; z-index: 47; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 50% 40%, rgba(40, 80, 40, .9), rgba(6, 12, 8, .95) 70%); }
.newlook[hidden] { display: none; }
.newlook-panel { width: min(100%, 360px); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; animation: passive-in .45s ease-out; }
.newlook-panel small { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #ffd25e; }
.newlook-panel h2 { margin: 0; font-size: 26px; font-weight: 900; color: #d9ffd0; text-shadow: 0 0 12px #4fd16b, 2px 2px 0 #000; }
.newlook-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.newlook-row img { image-rendering: pixelated; object-fit: contain; }
#newlook-old { width: 80px; height: 80px; opacity: .55; filter: grayscale(.4); }
#newlook-new { width: 150px; height: 150px; filter: drop-shadow(0 0 12px #9dff7a); animation: newlook-pop 1.4s ease-in-out infinite; }
@keyframes newlook-pop { 50% { transform: translateY(-6px) scale(1.04); } }
.newlook-arrow { font-size: 28px; color: #ffd25e; }
#newlook-name { font-size: 20px; color: #fff; }
.newlook .menu-btn { width: 100%; margin-top: 6px; }
.skill.auto-next::before { content: 'АВТО'; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); padding: 0 5px; border-radius: 6px;
  font-size: 8px; font-weight: 900; color: #132b16; background: #7dff8a; box-shadow: 0 0 6px #7dff8a88; z-index: 2; }
.skill { position: relative; }
.newlook { background: radial-gradient(circle at 50% 40%, rgb(34, 70, 34), rgb(6, 12, 8) 70%); }


/* v38: формы в меню; ветки в разработке на выборе пути */
.menu-grid { grid-template-columns: repeat(2, 1fr); }
.forms-grid { display: flex; flex-direction: column; gap: 10px; }
.forms-branch h4 { margin: 0 0 6px; font-size: 13px; color: var(--gold); }
.forms-branch.dev { opacity: .6; } .forms-branch.dev p { margin: 0; font-size: 12px; color: var(--muted); }
.forms-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.form-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; border-radius: 10px; background: rgba(255, 255, 255, .05); }
.form-cell.final { box-shadow: inset 0 0 0 1px #ffd25e; }
.form-cell img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; image-rendering: pixelated; background: #1a2418; }
.form-cell small { font-size: 9px; line-height: 1.1; text-align: center; color: #dfe9d8; }
.form-cell.locked img { filter: brightness(0) opacity(.6); }
.form-cell.locked small { color: #777; }
.evolution-option.dev { opacity: .55; cursor: not-allowed; border-style: dashed; }
.evolution-option .dev-art { display: grid; place-items: center; width: 70px; height: 70px; flex-shrink: 0; font-size: 34px; font-weight: 900; color: #8d8057; border: 2px dashed #8d8057; border-radius: 50%; }
.evolution-option.dev em { font-style: normal; font-size: 11px; color: #ffd25e; }

/* v38b: торговец вписан в уровень — прилавок на дороге и лавка у той же дороги */
.merchant-bg { background: url('assets/merchant-bg.png') center top / cover; image-rendering: pixelated; }
.merchant-bg::after { background: linear-gradient(to bottom, rgba(10, 6, 20, 0) 0, rgba(10, 6, 20, 0) 34%, rgba(10, 6, 20, .78) 50%, rgba(8, 4, 16, .95) 100%); }
.merchant-stall { position: absolute; z-index: 9; image-rendering: pixelated; pointer-events: none; filter: drop-shadow(0 6px 4px #0007); }
.merchant-bg { background: url("assets/merchant-bg.png") center top / 100% auto no-repeat, #140a08; image-rendering: pixelated; }
.form-cell.locked img { filter: brightness(0) invert(.32); background: #0e140c; }

/* v39: тени под монстрами; у усиленных без красного свечения (остаются звезда и размер) */
.mon::after { content: ''; position: absolute; left: 50%; bottom: -4px; width: 78%; height: 9px; transform: translateX(-50%); z-index: -1;
  border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .28) 45%, transparent 72%); pointer-events: none; }
.mon:has(.sprite-bat)::after { width: 52%; bottom: -12px; opacity: .55; }   /* мышь летит — тень меньше и ниже */
.mon.elite::after { width: 70%; height: 13px; bottom: -6px; }
.mon.boss::after { width: 80%; height: 22px; bottom: -8px; }
.mon.gibbed::after { display: none; }
.mon.elite .art { filter: none; }
.mon.elite .mon-hp { border-color: #000; }
.mon.elite::before { text-shadow: 1px 1px 0 #000; }

/* v40: пустой тап подгоняет волну — стрелки у правого края */
.fx-hurry { z-index: 12; font: 900 26px/1 sans-serif; color: #ffe9a0; text-shadow: 0 0 6px #ffd25e, 2px 2px 0 #000; transform: translate(-50%, -50%); animation: hurry .42s ease-out forwards; pointer-events: none; }
@keyframes hurry { from { opacity: 1; translate: 10px 0; } to { opacity: 0; translate: -26px 0; } }


/* v41: сундук в шапке под золотом — всегда виден с ценой, светится и подпрыгивает, когда хватает золота */
#road-chest.road-chest { position: absolute; right: calc(8px + var(--sa-right)); top: calc(max(6px, var(--sa-top)) + 62px); z-index: 26; flex-direction: row; gap: 4px;
  padding: 3px 8px 3px 4px; border-radius: 12px; background: rgba(10, 14, 10, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); opacity: .55; }
#road-chest.road-chest img { width: 30px; height: 30px; }
#road-chest.road-chest b { font-size: 12px; background: none; box-shadow: none; padding: 0; }
#road-chest.road-chest.ready { opacity: 1; box-shadow: inset 0 0 0 2px #ffd25e, 0 0 14px #ffd25e88; animation: chest-hop 1.2s ease-in-out infinite; }
@keyframes chest-hop { 0%, 60%, 100% { transform: translateY(0); } 70% { transform: translateY(-5px) rotate(-4deg); } 80% { transform: translateY(0) rotate(3deg); } }
.arena .passive-bar { top: calc(max(6px, var(--sa-top)) + 112px); }

/* v42: в бою с боссом его здоровье — наверху, на месте шкалы волн */
.arena.boss-fight .scene-top .path, .arena.boss-fight .evo-status { display: none; }
.arena.boss-fight .scene-top .boss-bar { position: static; transform: none; width: min(92vw, 440px); margin: 4px auto 0; }
.arena.boss-fight .boss-bar-track { height: 18px; }


/* v43: серия ударов — поза героя и вид удара меняются по кругу */
#evolved-art.evo-attack-b { animation: evo-uppercut .26s ease-out; }
#evolved-art.evo-attack-c { animation: evo-overhead .3s ease-out; }
@keyframes evo-uppercut { 40% { transform: translate(12px, -10px) rotate(-12deg) scaleY(1.06); } }
@keyframes evo-overhead { 30% { transform: translateY(-8px) rotate(-10deg); } 60% { transform: translateX(16px) rotate(14deg) scaleY(.92); } }
.fx-thrust { height: 5px; width: var(--len, 80px); transform-origin: 0 50%; transform: translateY(-50%); z-index: 11; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--c, #fff) 30%, #fff 85%, transparent); box-shadow: 0 0 8px var(--g, #8cff6a); animation: thrust .26s ease-out forwards; }
@keyframes thrust { 0% { scale: 0 1; opacity: 1; } 50% { scale: 1 1; opacity: 1; } 100% { scale: 1 .3; opacity: 0; } }
.fx-punch { width: 26px; height: 26px; border-radius: 50%; transform: translate(-50%, -50%); z-index: 11; border: 3px solid #fff; box-shadow: 0 0 8px #fff, inset 0 0 6px #e6eef2;
  animation: punch-ring .26s ease-out forwards; }
.fx-punch.heavy { width: 40px; height: 40px; border-width: 4px; box-shadow: 0 0 14px #ffd25e, inset 0 0 8px #ffd25e; border-color: #ffe9a0; }
@keyframes punch-ring { from { scale: .3; opacity: 1; } to { scale: 1.4; opacity: 0; } }
.arena .passive-bar .pchip.empty { display: none; }

/* v44: сундуки подряд */
.card.next-chest { justify-content: center; box-shadow: inset 0 0 0 2px #ffd25e, 0 0 14px #ffd25e66; }
.card.next-chest .card-art img { width: 48px; height: 48px; image-rendering: pixelated; }

/* v45: выбор карты в два шага — выделить, потом «Подтвердить» */
#cards-list.has-selection .card:not(.selected) { opacity: .5; filter: saturate(.6); }
#cards-list .card.selected { transform: scale(1.03); box-shadow: inset 0 0 0 3px #ffd25e, 0 0 18px #ffd25e88 !important; }
.cards-confirm { display: block; width: 100%; margin-top: 12px; padding: 14px; border-radius: 14px; font-size: 17px; font-weight: 900; color: #132b16;
  background: linear-gradient(180deg, #c9ffa8, #6fd04f); box-shadow: inset 0 -4px #3f8a34, 0 4px 0 #0008; animation: start-pulse 2s ease-in-out infinite; }
.cards-confirm.hidden { display: none; }


/* v46: рост облика и покадровые позы героя; эффекты из рук */
#evolved-art { scale: var(--grow, 1); transition: scale .7s cubic-bezier(.3, 1.6, .5, 1); }
/* дыхание: 4 позы — вдох, присел, выдох, покачнулся */
#evolved-art { animation: evo-breathe 1.8s ease-in-out infinite; }
@keyframes evo-breathe {
  0%, 100% { transform: none; }
  25% { transform: translateY(-2px) scale(.99, 1.02) rotate(-1deg); }
  50% { transform: translateY(-3px) scale(.98, 1.03); }
  75% { transform: translateY(0) scale(1.02, .98) rotate(1deg); }
}
/* удары: замах, удар, стоп-кадр, возврат */
#evolved-art.evo-attack { animation: evo-lunge2 .3s linear; }
@keyframes evo-lunge2 {
  0% { transform: none; }
  20% { transform: translate(-7px, 1px) rotate(-7deg) scale(1.06, .94); }
  40% { transform: translate(18px, -2px) rotate(8deg) scale(.94, 1.06); }
  58% { transform: translate(20px, -2px) rotate(8deg) scale(.95, 1.05); }
  78% { transform: translate(6px, 0) rotate(2deg) scale(1.02, .98); }
  100% { transform: none; }
}
#evolved-art.evo-attack-b { animation: evo-upper2 .32s linear; }
@keyframes evo-upper2 {
  0% { transform: none; }
  20% { transform: translate(-4px, 3px) rotate(5deg) scale(1.06, .92); }
  45% { transform: translate(12px, -12px) rotate(-14deg) scale(.94, 1.08); }
  62% { transform: translate(13px, -13px) rotate(-15deg) scale(.95, 1.07); }
  82% { transform: translate(4px, -3px) rotate(-4deg); }
  100% { transform: none; }
}
#evolved-art.evo-attack-c { animation: evo-over2 .36s linear; }
@keyframes evo-over2 {
  0% { transform: none; }
  25% { transform: translate(-5px, -8px) rotate(-13deg) scale(.96, 1.06); }
  48% { transform: translate(16px, 2px) rotate(14deg) scale(1.08, .9); }
  64% { transform: translate(17px, 3px) rotate(14deg) scale(1.07, .91); }
  84% { transform: translate(5px, 0) rotate(3deg); }
  100% { transform: none; }
}
#evolved-art.evo-cast { animation: evo-cast2 .4s linear; }
@keyframes evo-cast2 {
  0% { transform: none; filter: none; }
  22% { transform: translateY(2px) scale(1.05, .93); filter: brightness(1.15); }
  45% { transform: translateY(-8px) scale(.96, 1.06); filter: brightness(1.5) drop-shadow(0 0 6px #9fe8ff); }
  62% { transform: translate(5px, -6px) rotate(5deg); filter: brightness(1.4) drop-shadow(0 0 6px #9fe8ff); }
  100% { transform: none; filter: none; }
}
/* первая форма: дышит и пружинит при плевке (поверх 4 кадров спрайта) */
#slime:not(.evolved) .slime-body { animation: slime-breathe 1.5s ease-in-out infinite; }
@keyframes slime-breathe { 0%, 100% { scale: 1 1; translate: 0 0; } 30% { scale: 1.03 .97; translate: 0 1px; } 60% { scale: .97 1.04; translate: 0 -1px; } }
#slime:not(.evolved) .slime-body.lunge { animation: slime-lunge .26s linear; }
@keyframes slime-lunge {
  0% { scale: 1 1; translate: 0 0; }
  20% { scale: 1.1 .88; translate: -3px 3px; }
  45% { scale: .9 1.1; translate: 5px -2px; }
  65% { scale: 1.05 .96; translate: 2px 0; }
  85% { scale: .98 1.02; translate: 0 0; }
  100% { scale: 1 1; translate: 0 0; }
}
.fx-drip { width: 6px; height: 8px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; background: var(--c); box-shadow: 0 0 4px var(--c); z-index: 11;
  transform: translate(-50%, -50%); animation: drip .5s cubic-bezier(.4, 0, .9, .6) both; }
@keyframes drip { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1, 1.2); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + 34px)) scale(.6, 1.4); } }
.fx-charge { width: 12px; height: 12px; border-radius: 50%; z-index: 11; transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff, var(--c) 45%, transparent 70%); box-shadow: 0 0 10px var(--g), 0 0 18px var(--c); animation: charge .36s ease-out forwards; }
@keyframes charge { 0% { scale: .3; opacity: .6; } 45% { scale: 1.6; opacity: 1; } 100% { scale: .6; opacity: 0; } }
.fx-glint { width: 16px; height: 16px; z-index: 12; transform: translate(-50%, -50%); animation: glint .3s ease-out forwards;
  background: linear-gradient(transparent 44%, #fff 44% 56%, transparent 56%), linear-gradient(90deg, transparent 44%, #fff 44% 56%, transparent 56%);
  filter: drop-shadow(0 0 4px #fff); }
@keyframes glint { 0% { scale: .2; rotate: 0deg; opacity: 1; } 50% { scale: 1.2; rotate: 45deg; opacity: 1; } 100% { scale: .4; rotate: 90deg; opacity: 0; } }
.fx-swish { width: 34px; height: 34px; z-index: 11; transform: translate(-30%, -60%); border-radius: 50%;
  border-top: 3px solid var(--c); border-right: 2px solid transparent; opacity: .9; animation: swish .24s ease-out forwards; }
.fx-swish.rev { transform: translate(-30%, -40%) scaleY(-1); }
@keyframes swish { 0% { rotate: -60deg; opacity: 0; } 30% { opacity: .9; } 100% { rotate: 60deg; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #evolved-art, #slime .slime-body { animation: none !important; } }


/* v47: дерево из 4 развилок — подклассы с обликом и финалом в «Твоём пути» */
.skillbar[data-tier="3"] .energy { box-shadow: inset 0 0 0 2px var(--legendary), 0 0 10px #ffd25e55; }
.skillbar[data-tier="3"] .energy-num { color: var(--legendary); }
.evolution-path.mine > b { color: #9dff7a; }
.evolution-leaf.mine { box-shadow: inset 0 0 0 2px #9dff7a; border-radius: 10px; }
.evolution-leaf { display: grid; grid-template-columns: 44px 1fr 44px 1fr; align-items: center; gap: 4px; margin: 4px 0 4px 10px; }
.evolution-leaf img { width: 44px; height: 44px; object-fit: contain; image-rendering: pixelated; }
.evolution-leaf small { display: block; font-size: 10px; }
.form-cell img { object-fit: contain; object-position: 50% 15%; }


/* v48: монстры новых миров — по 2 кадра 64×64; летуны машут крыльями сами */
.sprite-turnip { background-image: url('assets/monster-turnip-side.png'); }
.sprite-carrot { background-image: url('assets/monster-carrot-side.png'); }
.sprite-tomato { background-image: url('assets/monster-tomato-side.png'); }
.sprite-scorpion { background-image: url('assets/monster-scorpion-side.png'); }
.sprite-mummy { background-image: url('assets/monster-mummy-side.png'); }
.sprite-cactus { background-image: url('assets/monster-cactus-side.png'); }
.sprite-bunny { background-image: url('assets/monster-bunny-side.png'); }
.sprite-penguin { background-image: url('assets/monster-penguin-side.png'); }
.sprite-icegolem { background-image: url('assets/monster-icegolem-side.png'); }
.sprite-crab { background-image: url('assets/monster-crab-side.png'); }
.sprite-firefly { background-image: url('assets/monster-firefly-side.png'); }
.sprite-lantern { background-image: url('assets/monster-lantern-side.png'); }
.sprite-magma { background-image: url('assets/monster-magma-side.png'); }
.sprite-imp { background-image: url('assets/monster-imp-side.png'); }
.sprite-firebat { background-image: url('assets/monster-firebat-side.png'); }
.sprite-firebat, .sprite-firefly { animation: bat-flap .4s steps(1) infinite; }


/* v49: уровень рядом с именем героя; в центре шапки — только полоса опыта */
.hero-card-text small#portrait-name { display: flex; max-width: 130px; overflow: visible; }
#portrait-form { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#portrait-level { flex: none; margin-left: 4px; color: #ffd25e; font-weight: 900; }
.arena .lvl-box .level { display: none; }


/* v50: сочные эффекты — угли, подсветка огня, ядовитое облако, опалина от молнии */
.fx-spark.ember { width: 3px; height: 3px; border-radius: 1px; background: var(--c); box-shadow: 0 0 6px var(--c), 0 0 2px #fff; }
.fx-burnglow { width: 46px; height: 30px; border-radius: 50%; transform: translate(-50%, -50%); z-index: 8;
  background: radial-gradient(ellipse, rgba(255, 140, 30, .55), transparent 70%); animation: burnglow .48s ease-out forwards; }
@keyframes burnglow { from { opacity: 1; scale: .6; } to { opacity: 0; scale: 1.3; } }
.fx-toxic { width: 54px; height: 40px; border-radius: 50%; transform: translate(-50%, -50%); z-index: 9;
  background: radial-gradient(circle at 40% 45%, rgba(170, 255, 110, .55), rgba(80, 200, 60, .35) 45%, transparent 70%);
  filter: blur(1px); animation: toxic 1.1s ease-out forwards; }
.fx-toxic.big { width: 120px; height: 80px; animation-duration: 1.3s; }
@keyframes toxic { 0% { opacity: 0; scale: .4; } 25% { opacity: 1; } 100% { opacity: 0; scale: 1.5; translate: 0 -14px; } }
.fx-scorch { width: 34px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); z-index: 7;
  background: radial-gradient(ellipse, #fff 0 15%, var(--c) 40%, transparent 70%); animation: scorch .7s ease-out forwards; }
@keyframes scorch { 0% { opacity: 1; scale: .4 .6; } 20% { scale: 1.4 1; } 100% { opacity: 0; scale: 1.6 .8; } }
.fx-zap path.glow { filter: blur(2px) drop-shadow(0 0 4px var(--c)); }


/* v51: в окне «Новый облик» — как выросли статы */
.newlook-stats { width: 100%; display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.nl-stat { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); font-size: 13px; color: #dfe9d8;
  animation: nl-in .4s ease-out both; }
.nl-stat:nth-child(2) { animation-delay: .08s; } .nl-stat:nth-child(3) { animation-delay: .16s; } .nl-stat:nth-child(4) { animation-delay: .24s; }
.nl-stat b { color: #fff; white-space: nowrap; }
.nl-stat em { font-style: normal; color: #7dff8a; margin-left: 4px; }
.nl-skill { padding: 6px 10px; border-radius: 10px; background: rgba(255, 210, 94, .1); box-shadow: inset 0 0 0 1px rgba(255, 210, 94, .35); text-align: left; animation: nl-in .4s .32s ease-out both; }
.nl-skill b { display: block; color: #ffd25e; font-size: 13px; }
.nl-skill small { font-size: 11px; color: #dfe9d8; letter-spacing: 0; text-transform: none; }
@keyframes nl-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
#newlook-new { width: 120px; height: 120px; }


/* v52: лунная лавка в меню */
.menu-tile.wide { grid-column: 1 / -1; }
#lunarshop .m-card.lunar { box-shadow: inset 0 0 0 2px var(--lunar); }


/* v53: эффекты новых предметов */
.fx-shuriken { width: 16px; height: 16px; z-index: 12; background: conic-gradient(from 0deg, #e6eef2 0 12.5%, transparent 0 25%, #c9d4dc 0 37.5%, transparent 0 50%, #e6eef2 0 62.5%, transparent 0 75%, #c9d4dc 0 87.5%, transparent 0);
  border-radius: 2px; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 3px #fff); }
.fx-mark { width: 20px; height: 20px; z-index: 12; transform: translate(-50%, -50%); animation: mark .6s ease-out forwards; }
.fx-mark::before { content: '💀'; font-size: 16px; filter: drop-shadow(0 0 4px #b06cff); }
@keyframes mark { 0% { scale: .4; opacity: 0; } 30% { scale: 1.2; opacity: 1; } 100% { scale: 1; opacity: 0; translate: 0 -8px; } }
.fx-stun { width: 34px; height: 12px; z-index: 12; transform: translate(-50%, -50%); animation: stun-spin .5s linear infinite; }
.fx-stun::before, .fx-stun::after { content: '★'; position: absolute; top: -4px; font-size: 11px; color: #ffe066; text-shadow: 0 0 4px #ffb300; }
.fx-stun::before { left: 0; } .fx-stun::after { right: 0; }
@keyframes stun-spin { 50% { transform: translate(-50%, -50%) scaleX(-1); } }
.fx-freeze { width: 54px; height: 54px; border-radius: 30%; transform: translate(-50%, -50%) rotate(45deg); z-index: 11;
  background: linear-gradient(135deg, rgba(220, 245, 255, .85), rgba(120, 190, 255, .5)); box-shadow: 0 0 14px #9fe8ff, inset 0 0 8px #fff; animation: freeze .7s ease-out forwards; }
@keyframes freeze { 0% { scale: .2; opacity: 0; } 25% { scale: 1.1; opacity: 1; } 70% { opacity: .9; } 100% { scale: 1.3; opacity: 0; } }
.fx-frostaura { width: 150px; height: 70px; border-radius: 50%; transform: translate(-50%, -50%); z-index: 6;
  border: 3px dashed rgba(190, 235, 255, .8); box-shadow: 0 0 16px #9fe8ff, inset 0 0 20px rgba(160, 220, 255, .5);
  animation: frostaura 3s linear forwards; }
@keyframes frostaura { 0% { opacity: 0; rotate: 0deg; } 10% { opacity: 1; } 85% { opacity: .9; } 100% { opacity: 0; rotate: 360deg; } }
.fx-banner { width: 30px; height: 40px; z-index: 12; transform: translate(-50%, -50%); animation: banner .9s ease-out forwards; }
.fx-banner::before { content: '🚩'; font-size: 28px; filter: drop-shadow(0 0 6px #ff5a5a); }
@keyframes banner { 0% { scale: .3; opacity: 0; } 25% { scale: 1.2; opacity: 1; } 100% { opacity: 0; translate: 0 -16px; } }


/* v54: сочное попадание — вспышка по монстру, ударная волна с лучами */
.mon .art.hitflash { filter: brightness(2.6) saturate(.3) !important; scale: 1.08 .92; }
.fx-impact { width: 40px; height: 40px; transform: translate(-50%, -50%); z-index: 12; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 18%, rgba(255, 255, 255, .7) 26%, transparent 34%),
    repeating-conic-gradient(from 10deg, rgba(255, 255, 255, .95) 0 6deg, transparent 6deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 0 62%, transparent 70%); mask: radial-gradient(circle, #000 0 62%, transparent 70%);
  animation: impact .24s ease-out forwards; }
.fx-impact.heavy { width: 64px; height: 64px; animation-duration: .32s;
  background: radial-gradient(circle, #fff 0 16%, #ffe9a0 24%, transparent 34%), repeating-conic-gradient(from 0deg, #fff6c8 0 7deg, transparent 7deg 24deg); }
@keyframes impact { 0% { scale: .3; opacity: 1; rotate: 0deg; } 60% { opacity: 1; } 100% { scale: 1.5; opacity: 0; rotate: 20deg; } }
/* поза удара есть — сам кадр уже наклонён, поэтому качаем фигуру меньше */
#evolved-art.evo-attack { animation-name: evo-lunge3; }
@keyframes evo-lunge3 { 0% { transform: none; } 20% { transform: translate(-6px, 1px) scale(1.04, .96); } 40% { transform: translate(14px, -1px); } 60% { transform: translate(16px, -1px); } 82% { transform: translate(4px, 0); } 100% { transform: none; } }


/* v55: код сессии для разбора */
.session-code { display: inline-flex; flex-direction: column; align-items: center; margin-top: 8px; padding: 6px 14px; border-radius: 12px;
  background: rgba(255, 210, 94, .12); box-shadow: inset 0 0 0 1px rgba(255, 210, 94, .5); color: #ffe9a0; font-size: 13px; }
.session-code b { font-size: 24px; letter-spacing: 4px; color: #fff; user-select: all; }
.session-code small { font-size: 10px; color: #cfc6a0; }
.menu-codes { margin: 2px 0 0; font-size: 11px; color: #cfc6a0; text-align: center; user-select: all; }


/* v56: меч рассекает воздух — серп ударной волны, ветер, разрез на цели */
.fx-airslash { width: 46px; height: 46px; z-index: 12; border-radius: 50%; transform: translate(-50%, -50%);
  border-right: 5px solid #f2fbff; border-top: 2px solid transparent; border-bottom: 2px solid transparent;
  box-shadow: 6px 0 10px -4px #9fe8ff; filter: drop-shadow(0 0 4px #bfefff); }
.fx-airslash.rev { border-right-color: #e0ffd8; filter: drop-shadow(0 0 4px #b8f58e); }
.fx-windline { height: 2px; width: var(--len, 60px); transform-origin: 0 50%; z-index: 11; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent); animation: windline .3s ease-out both; }
@keyframes windline { 0% { scale: 0 1; opacity: 0; } 30% { opacity: 1; } 100% { scale: 1 1; opacity: 0; translate: 12px 0; } }
.fx-cut { width: 64px; height: 4px; transform: translate(-50%, -50%); z-index: 13; border-radius: 3px;
  background: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent); box-shadow: 0 0 10px #bfefff, 0 0 2px #fff; animation: cut .38s ease-out forwards; }
@keyframes cut { 0% { scale: 0 1; opacity: 1; } 30% { scale: 1.2 1; opacity: 1; } 100% { scale: 1.4 .2; opacity: 0; } }
.fx-windring { width: 30px; height: 30px; border-radius: 50%; transform: translate(-50%, -50%); z-index: 12;
  border: 3px solid rgba(240, 250, 255, .9); border-left-color: transparent; border-bottom-color: transparent; animation: windring .32s ease-out forwards; }
.fx-windring.big { width: 48px; height: 48px; animation-duration: .38s; }
@keyframes windring { from { rotate: 0deg; scale: .4; opacity: 1; } to { rotate: 540deg; scale: 1.4; opacity: 0; } }

/* v57: первая форма плюётся — лицо по кадрам: вдох (щёки надуты), плевок (рот «О»), отдача */
#slime[data-frame="1"] .slime-face { left: 38px; top: 35px; transform: scale(1.05, .95); }
#slime[data-frame="2"] .slime-face { left: 49px; top: 40px; transform: none; }
#slime[data-frame="3"] .slime-face { left: 37px; top: 34px; transform: none; }
#slime[data-frame="1"] .slime-eye { animation: none; height: 3px; top: 5px; }
#slime[data-frame="1"] .slime-eye::after { display: none; }
#slime[data-frame="1"] .slime-mouth { width: 6px; height: 2px; left: 12px; top: 16px; border: 0; border-top: 2px solid #173123; }
#slime[data-frame="2"] .slime-eye { animation: none; height: 8px; top: 1px; }
#slime[data-frame="2"] .slime-mouth { width: 10px; height: 10px; left: 18px; top: 11px; border: 2px solid #173123; border-radius: 50%; background: #2a5a2c; }
#slime[data-frame="3"] .slime-mouth { width: 6px; height: 6px; left: 13px; top: 14px; border: 2px solid #173123; border-radius: 50%; }


/* v57: окно «Хватает на сундук» — вторая кнопка «Пока не показывать» */
.cards-later { display: none; margin: 6px auto 0; padding: 6px 14px; border: 0; border-radius: 10px; background: transparent; color: #cfc6a0; font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
#cards.chest-offer .cards-later { display: block; }


/* v58: тень героя и помощников, следы на бегу, забег к боссу */
.hero-shadow { position: absolute; z-index: 1; height: 12px; margin: -6px 0 0; transform: translateX(-50%) scaleX(var(--sx, 1)); border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .28) 45%, transparent 72%); transition: transform .12s; }
.arena.running .hero-shadow { animation: shadow-run .34s ease-in-out infinite; }
@keyframes shadow-run { 50% { opacity: .7; } }
.helper-slot.filled.step::before { transform: scaleX(.82); opacity: .8; transition: transform .1s; }
.fx-print { width: 7px; height: 4px; border-radius: 50%; z-index: 2; background: rgba(40, 26, 14, .55); }
.fx-print.goo { width: 10px; height: 4px; background: rgba(110, 220, 80, .55); box-shadow: 0 0 3px rgba(140, 255, 100, .5); }
.fx-print.paw { width: 5px; height: 4px; background: rgba(40, 26, 14, .5); box-shadow: 5px 0 0 rgba(40, 26, 14, .45); }
.arena.boss-approach::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse at 60% 60%, transparent 40%, rgba(60, 0, 8, .55) 100%); animation: approach-pulse 1.2s ease-in-out infinite; }
@keyframes approach-pulse { 50% { opacity: .65; } }
.fx-bossbanner { z-index: 40; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; padding: 8px 22px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(60, 0, 8, .85), rgba(20, 0, 4, .85)); box-shadow: 0 0 0 2px #ff5a5a, 0 0 24px #ff3b3b88; color: #fff; text-align: center;
  animation: bossbanner 2.6s ease-out forwards; white-space: nowrap; }
.fx-bossbanner small { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #ffb0b0; }
.fx-bossbanner b { font-size: 22px; font-weight: 900; text-shadow: 0 2px 0 #000; }
@keyframes bossbanner { 0% { opacity: 0; scale: 1.6; } 12% { opacity: 1; scale: 1; } 80% { opacity: 1; } 100% { opacity: 0; translate: 0 -10px; } }


/* v61: ледяной вихрь Ледяной реликвии — ровно по зоне урона, осколки на трёх орбитах, иней и снег */
.frost-vortex { position: absolute; z-index: 5; width: 0; height: 0; pointer-events: none; animation: fv-in .35s ease-out; }
.frost-vortex .fv-floor, .frost-vortex .fv-ring { position: absolute; left: calc(var(--r) * -1); top: calc(var(--r) * -.36); width: calc(var(--r) * 2); height: calc(var(--r) * .72); border-radius: 50%; }
.frost-vortex .fv-floor { background: radial-gradient(ellipse, rgba(220, 245, 255, .35) 0, rgba(160, 220, 255, .22) 55%, rgba(120, 200, 255, .08) 75%, transparent 78%);
  box-shadow: inset 0 0 18px rgba(200, 240, 255, .5); animation: fv-floor 1.4s ease-in-out infinite; }
.frost-vortex .fv-ring { border: 2px solid rgba(220, 248, 255, .85); box-shadow: 0 0 10px #9fe8ff, inset 0 0 10px #9fe8ff;
  -webkit-mask: conic-gradient(#000 0 70%, transparent 70% 76%, #000 76% 92%, transparent 92%); mask: conic-gradient(#000 0 70%, transparent 70% 76%, #000 76% 92%, transparent 92%);
  animation: fv-ring 1.6s linear infinite; }
.frost-vortex .fv-ring.inner { scale: .55; opacity: .7; animation-direction: reverse; animation-duration: 1.1s; }
.frost-vortex .fv-orbit { position: absolute; left: 0; top: 0; width: 0; height: 0; transform: scaleY(.36); }
.frost-vortex .fv-spin { position: absolute; left: 0; top: 0; width: 0; height: 0; animation: fv-spin 1.3s linear infinite; }
.frost-vortex .fv-spin.rev { animation-direction: reverse; animation-duration: .95s; }
.frost-vortex .fv-spin.fast { animation-duration: .6s; }
.frost-vortex .fv-spin i { position: absolute; left: -5px; top: -11px; width: 10px; height: 22px; scale: var(--s, 1);
  transform: rotate(var(--a)) translateX(var(--d)) rotate(90deg) scaleY(2.4);
  background: linear-gradient(180deg, #ffffff, #bfefff 45%, #5fb6f0); clip-path: polygon(50% 0, 100% 45%, 50% 100%, 0 45%); filter: drop-shadow(0 0 3px #9fe8ff); }
.frost-vortex.fv-pulse .fv-floor { animation: fv-pulse .35s ease-out; }
.frost-vortex.fv-out { animation: fv-out .45s ease-in forwards; }
@keyframes fv-in { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }
@keyframes fv-out { to { opacity: 0; scale: 1.25; } }
@keyframes fv-spin { to { rotate: 360deg; } }
@keyframes fv-ring { to { rotate: 360deg; } }
@keyframes fv-floor { 50% { opacity: .75; } }
@keyframes fv-pulse { 0% { scale: 1.15; filter: brightness(1.8); } 100% { scale: 1; filter: none; } }
.fx-snow { width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px #bfefff; z-index: 11; transform: translate(-50%, -50%);
  animation: fx-snow .9s ease-out forwards; }
@keyframes fx-snow { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; translate: var(--dx, 0) -26px; } }
/* стихии на монстре (statusFx в game.js): слои поверх спрайта, живут пока держится эффект */
.mon .st { position: absolute; left: 50%; top: 0; bottom: 0; width: 0; pointer-events: none; z-index: 3; }
.mon .st.out { animation: st-out .3s ease-out forwards; }
@keyframes st-out { to { opacity: 0; } }
/* огонь: языки пламени пляшут вразнобой, под ногами жар */
.st-fire i { position: absolute; left: var(--x); bottom: 4px; width: 10px; height: 20px; margin-left: -5px; border-radius: 50% 50% 35% 35%; transform-origin: 50% 100%;
  background: radial-gradient(ellipse at 50% 85%, #fff3b0, #ffb347 35%, #ff5a1f 65%, transparent 92%); mix-blend-mode: screen; scale: var(--s);
  animation: st-flame .42s ease-in-out infinite alternate; animation-delay: var(--d); }
.st-fire i:nth-child(odd) { animation-duration: .36s; }
@keyframes st-flame { 0% { transform: scaleY(.65) skewX(-7deg); opacity: .75; } 50% { transform: scaleY(1.25) skewX(5deg); opacity: 1; } 100% { transform: scaleY(.9) skewX(-3deg); opacity: .9; } }
.st-fire::after { content: ''; position: absolute; left: -22px; bottom: -3px; width: 44px; height: 12px; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 130, 30, .6), transparent 70%); animation: st-glow .5s ease-in-out infinite alternate; }
@keyframes st-glow { from { opacity: .5; scale: .9; } to { opacity: 1; scale: 1.1; } }
/* яд: лужа растёт (--p), клубы токсина плывут вверх */
.st-poison .puddle { position: absolute; left: -22px; bottom: -5px; width: 44px; height: 11px; border-radius: 50%; scale: calc(.35 + var(--p, 0) * .85); opacity: .9;
  background: radial-gradient(ellipse at 50% 50%, rgba(160, 255, 100, .8), rgba(70, 190, 50, .6) 55%, transparent 76%); box-shadow: 0 0 6px rgba(120, 255, 80, .5); }
.st-poison i { position: absolute; left: var(--x); top: var(--y); width: 16px; height: 12px; margin: -6px 0 0 -8px; border-radius: 50%; scale: var(--s); filter: blur(1px);
  background: radial-gradient(circle at 40% 40%, rgba(190, 255, 130, .65), rgba(80, 200, 60, .4) 55%, transparent 75%);
  animation: st-cloud 2.2s ease-in-out infinite; animation-delay: var(--d); }
@keyframes st-cloud { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 30% { opacity: .9; } 100% { transform: translate(7px, -26px) scale(1.5); opacity: 0; } }
/* лёд: сосульки на макушке, снежинки кружат; глыба при заморозке */
.st-frost .icicle { position: absolute; left: var(--x); top: 2px; width: 4px; height: var(--h); margin-left: -2px; border-radius: 0 0 50% 50%; background: linear-gradient(#f6fdff, #9fdcff); box-shadow: 0 0 3px #bfefff; }
.st-frost .flake { position: absolute; left: var(--x); top: 10%; width: 5px; height: 5px; margin-left: -2px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px #bfefff;
  animation: st-flake 1.8s linear infinite; animation-delay: var(--d); }
@keyframes st-flake { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(8px, 40px); opacity: 0; } }
.mon .st-ice { width: 54px; margin-left: -27px; top: -4px; bottom: -2px; border-radius: 10px 10px 6px 6px; z-index: 4;
  background: linear-gradient(160deg, rgba(228, 247, 255, .78), rgba(140, 200, 255, .42) 50%, rgba(205, 238, 255, .72)); box-shadow: 0 0 12px #9fe8ff, inset 0 0 10px #fff;
  animation: st-icein .25s ease-out; }
.mon.boss .st-ice { width: 112px; margin-left: -56px; }
.st-ice .crack { position: absolute; left: 30%; top: 14%; width: 2px; height: 60%; background: rgba(255, 255, 255, .85); transform: rotate(18deg); }
.st-ice .crack.b { left: 62%; top: 32%; height: 44%; transform: rotate(-30deg); }
.st-ice .shine { position: absolute; left: 12%; top: 8%; width: 18%; height: 40%; border-radius: 50%; background: rgba(255, 255, 255, .6); filter: blur(1px); }
@keyframes st-icein { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.fx-lite .st-fire i:nth-child(n+3), .fx-lite .st-poison i:nth-child(n+3), .fx-lite .st-frost .flake { display: none; }
.fx-frostbite { width: 30px; height: 30px; z-index: 12; transform: translate(-50%, -50%); animation: frostbite .42s ease-out forwards;
  background: linear-gradient(45deg, transparent 46%, #fff 46% 54%, transparent 54%), linear-gradient(-45deg, transparent 46%, #dff6ff 46% 54%, transparent 54%),
    linear-gradient(90deg, transparent 47%, #bfefff 47% 53%, transparent 53%); filter: drop-shadow(0 0 4px #9fe8ff); }
@keyframes frostbite { 0% { scale: .2; opacity: 1; rotate: 0deg; } 60% { scale: 1.1; opacity: 1; } 100% { scale: 1.3; opacity: 0; rotate: 30deg; } }


/* v62: итоги забега — бой, урон по источникам, предметы; вечная статистика в меню */
#results .menu-panel { max-height: 92vh; overflow-y: auto; }
.results-h { margin: 10px 0 4px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #ffd25e; text-align: left; }
.results-sources { display: flex; flex-direction: column; gap: 4px; }
.src-row { display: grid; grid-template-columns: 1fr 90px 40px; align-items: center; gap: 6px; font-size: 12px; color: #dfe9d8; }
.src-row i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #7dff8a var(--w), rgba(255, 255, 255, .08) var(--w)); }
.src-row b { text-align: right; color: #fff; }
.src-row.top span { color: #ffd25e; font-weight: 800; }
.results-items { display: flex; flex-wrap: wrap; gap: 4px; }
.results-items .ri { position: relative; width: 38px; height: 38px; border-radius: 8px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--common); }
.results-items .ri.uncommon { box-shadow: inset 0 0 0 1px #7dff8a; } .results-items .ri.rare { box-shadow: inset 0 0 0 1px var(--rare); }
.results-items .ri.epic { box-shadow: inset 0 0 0 1px var(--epic); } .results-items .ri.legendary { box-shadow: inset 0 0 0 1px var(--legendary); } .results-items .ri.lunar { box-shadow: inset 0 0 0 1px var(--lunar); }
.results-items .ri img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.results-items .ri b { position: absolute; right: 1px; bottom: -2px; font-size: 10px; color: #fff; text-shadow: 0 1px 0 #000; }
.menu-life { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }
.menu-life span { display: flex; flex-direction: column; align-items: center; padding: 5px 2px; border-radius: 10px; background: rgba(10, 14, 10, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.menu-life i { font-style: normal; font-size: 14px; } .menu-life b { font-size: 13px; color: #fff; } .menu-life small { font-size: 9px; color: #cfc6a0; }
#results-fight { grid-template-columns: 1fr; }
#results-fight div { display: flex; justify-content: space-between; gap: 8px; }


/* v63: награды — удержание с кольцом, переброс/исключение, автовыбор, кнопка очереди */
#cards-list .card { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; }
#cards-list .card::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; pointer-events: none; opacity: 0;
  background: conic-gradient(#ffd25e calc(var(--p, 0) * 1%), transparent 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 3px; }
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
#cards-list .card.holding::after { opacity: 1; animation: hold-ring var(--hold, 350ms) linear forwards; }
#cards-list .card.holding { transform: scale(.97); filter: brightness(1.15); }
@keyframes hold-ring { from { --p: 0; } to { --p: 100; } }
.cards.banish-mode #cards-list .card { box-shadow: inset 0 0 0 2px #ff5a5a; }
.cards.banish-mode #cards-list .card::after { background: conic-gradient(#ff5a5a calc(var(--p, 0) * 1%), transparent 0); }
.cards-tools { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 8px 0 2px; }
.cards-tools[hidden] { display: none; }
.tool-btn { padding: 6px 10px; border: 0; border-radius: 10px; font: inherit; font-size: 12px; font-weight: 800; color: #fff; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.tool-btn:disabled { opacity: .4; }
.cards.banish-mode #cards-banish { background: #ff5a5a; }
.tool-auto { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #dfe9d8; }
.tool-auto .style-toggle { padding: 3px 8px; font-size: 11px; }
.rewards-btn { position: absolute; left: 50%; top: calc(max(6px, var(--sa-top)) + 48px); transform: translateX(-50%); z-index: 27;
  padding: 3px 12px; border: 0; border-radius: 12px; font: inherit; font-size: 13px; font-weight: 900; color: #2a1a00;
  background: linear-gradient(180deg, #ffe58a, #ffb800); box-shadow: 0 0 0 2px #7a4a00, 0 0 12px #ffd25e88; animation: chest-hop 1.4s ease-in-out infinite; }
.rewards-btn[hidden] { display: none; }


/* v64: переброс, исключение и автовыбор — заметные */
.cards-tools { flex-direction: column; align-items: stretch; gap: 8px; margin: 12px 0 4px; width: 100%; }
.cards-tools .tool-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tool-btn { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 0; border-radius: 14px; text-align: left; font: inherit; color: #fff; cursor: pointer;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25), 0 3px 0 rgba(0, 0, 0, .35), 0 0 14px var(--glow); transition: transform .1s; }
.tool-btn:active { transform: translateY(2px); }
.tool-btn i { font-style: normal; font-size: 24px; line-height: 1; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); }
.tool-btn span { display: flex; flex-direction: column; line-height: 1.1; }
.tool-btn b { font-size: 14px; font-weight: 900; text-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
.tool-btn small { font-size: 10px; opacity: .85; }
.tool-btn em { position: absolute; top: -7px; right: -5px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; display: grid; place-items: center;
  font-style: normal; font-size: 13px; font-weight: 900; color: #2a1a00; background: #ffd25e; box-shadow: 0 0 0 2px #2a1a00; }
.tool-btn.reroll { --glow: #4fa8ff66; background: linear-gradient(180deg, #4fa8ff, #2b6fd6); }
.tool-btn.banish { --glow: #ff5a5a66; background: linear-gradient(180deg, #ff6b6b, #c0303a); }
.tool-btn:disabled { filter: grayscale(1) brightness(.7); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); cursor: default; }
.tool-btn:disabled em { background: #888; }
.cards.banish-mode #cards-banish { animation: banish-pulse .8s ease-in-out infinite; }
@keyframes banish-pulse { 50% { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25), 0 0 0 3px #fff, 0 0 22px #ff5a5a; } }
.autopick-switch { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 0; border-radius: 14px; font: inherit; text-align: left; color: #dfe9d8; cursor: pointer;
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18); }
.autopick-switch i { font-style: normal; font-size: 22px; }
.autopick-switch > span:not(.sw) { flex: 1; display: flex; flex-direction: column; line-height: 1.15; }
.autopick-switch b { font-size: 14px; color: #fff; }
.autopick-switch small { font-size: 10px; opacity: .8; }
.autopick-switch .sw { position: relative; width: 46px; height: 26px; border-radius: 13px; background: #3a3f3a; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); transition: background .15s; flex: none; }
.autopick-switch .knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, .3); transition: left .15s; }
.autopick-switch.on { background: rgba(125, 255, 138, .14); box-shadow: inset 0 0 0 2px #7dff8a, 0 0 14px #7dff8a55; }
.autopick-switch.on .sw { background: #3fcf5a; }
.autopick-switch.on .knob { left: 23px; }

/* v65: выбор пути, класса и подкласса — удержанием, с кольцом */
.evolution-option { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; }
.evolution-option::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; pointer-events: none; opacity: 0; padding: 3px;
  background: conic-gradient(#ffd25e calc(var(--p, 0) * 1%), transparent 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.evolution-option.holding::after { opacity: 1; animation: hold-ring var(--hold, 350ms) linear forwards; }
.evolution-option.holding { transform: scale(.97); filter: brightness(1.15); }
#evolution.arming .evolution-option { opacity: .7; }


/* v67: семейства монстров 1-го мира — 3 стадии роста по 4 кадра (96×96), показ 84×84 */
.mon.fam { width: 84px; margin: -92px 0 0 -42px; }
.mon .side-sprite.fam { width: 84px; height: 84px; background-size: 336px 84px; background-repeat: no-repeat; background-position-x: calc(var(--f, 0) * -84px); image-rendering: pixelated; }
.gib-piece.side-sprite.fam { background-size: 400% 100%; background-position-x: 0; }
body.style-hd .mon .side-sprite.fam { background-size: 336px 84px !important; background-position: calc(var(--f, 0) * -84px) 0 !important; image-rendering: pixelated; animation: none; }
.sprite-mushroom-s1 { background-image: url('assets/monster-mushroom-s1.png') !important; }
.sprite-mushroom-s2 { background-image: url('assets/monster-mushroom-s2.png') !important; }
.sprite-mushroom-s3 { background-image: url('assets/monster-mushroom-s3.png') !important; }
.sprite-goblin-s1 { background-image: url('assets/monster-goblin-s1.png') !important; }
.sprite-goblin-s2 { background-image: url('assets/monster-goblin-s2.png') !important; }
.sprite-goblin-s3 { background-image: url('assets/monster-goblin-s3.png') !important; }
.sprite-bat-s1 { background-image: url('assets/monster-bat-s1.png') !important; }
.sprite-bat-s2 { background-image: url('assets/monster-bat-s2.png') !important; }
.sprite-bat-s3 { background-image: url('assets/monster-bat-s3.png') !important; }


/* v68: карта спутника в выборе пассивки */
#cards-list .card.companion { border-color: #7dff8a; box-shadow: inset 0 0 0 2px #7dff8a55, 0 0 14px #7dff8a44; background: linear-gradient(180deg, rgba(60, 120, 60, .55), rgba(20, 50, 24, .7)); }
#cards-list .card.companion .card-art img { image-rendering: pixelated; object-fit: contain; }
#cards-list .card.companion .card-badge { background: #7dff8a; color: #0d2a10; }

/* v69: горизонтальный вид (ВКонтакте на компьютере, планшет, повёрнутый телефон) — арена на всю ширину */
@media (orientation: landscape) and (min-width: 700px) {
  #app { max-width: min(100vw, 1400px); }
}
@media (orientation: landscape) and (min-width: 700px) {
  /* умения — компактной панелью справа внизу, бой и дорога открыты */
  .arena .skillbar { left: auto; right: 10px; width: min(520px, 52vw); }
  .arena.boss-fight .scene-top .boss-bar { width: min(50vw, 560px); }
  .cards-box { max-width: 520px; }
}
/* низкий горизонтальный экран (повёрнутый телефон): карты в ряд, окно прокручивается */
@media (orientation: landscape) and (max-height: 520px) {
  .cards { overflow-y: auto; align-items: flex-start; padding-top: 8px; padding-bottom: 8px; }
  .cards-box { max-width: min(96vw, 860px); }
  #cards-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  #cards-list .card { flex-direction: column; align-items: center; text-align: center; padding: 6px; }
  #cards-list .card .card-desc { font-size: 11px; }
  #cards-list .card .card-art { width: 40px; height: 40px; }
  .cards-tools { flex-direction: row; flex-wrap: wrap; }
  .cards-tools .tool-row { flex: 1 1 320px; }
  .autopick-switch { flex: 1 1 260px; width: auto; }
  .evolution-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
}

/* ---------- эволюции пассивок: фиолетово-золотая карта и слот ---------- */
#cards-list .card.evo { border-color: #ffcf5a; box-shadow: inset 0 0 0 2px #ffcf5a66, 0 0 18px #c77dff88; background: linear-gradient(180deg, rgba(110, 60, 150, .65), rgba(40, 20, 60, .8)); animation: evo-glow 1.6s ease-in-out infinite; }
#cards-list .card.evo .card-badge { background: linear-gradient(90deg, #ffcf5a, #e39bff); color: #2a1240; }
#cards-list .card.evo .card-head { flex-wrap: wrap; row-gap: 0; }
#cards-list .card.evo .card-rarity { color: #ffe39a; white-space: normal; flex-basis: 100%; }
@keyframes evo-glow { 50% { box-shadow: inset 0 0 0 2px #ffcf5aaa, 0 0 26px #c77dffcc; } }
.pchip.evo { box-shadow: 0 0 0 2px var(--px-ink), inset 0 0 0 2px #c77dff, 0 0 10px #c77dff88; }
.pchip.evo .pchip-text small { color: #e39bff; }
.party-row.evo { box-shadow: inset 0 0 0 2px #c77dff, 0 0 10px #c77dff55; }
@media (prefers-reduced-motion: reduce) { #cards-list .card.evo { animation: none; } }


/* v71: предметы из сундука — игральные карты в ряд; на карте — комбо (эволюция пассивки) */
.cards.play-mode .cards-box { max-width: 560px; }
.cards.play-mode #cards-list { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cards.play-mode #cards-list .card { flex: 1 1 0; min-width: 104px; max-width: 168px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 26px 7px 8px; text-align: center; border-radius: 14px; aspect-ratio: auto; min-height: 250px; position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .25)), #20261d; box-shadow: inset 0 0 0 3px var(--rc, #adb2b7), 0 6px 0 rgba(0, 0, 0, .35); }
.cards.play-mode #cards-list .card.common { --rc: var(--common); } .cards.play-mode #cards-list .card.uncommon { --rc: #7dff8a; }
.cards.play-mode #cards-list .card.rare { --rc: var(--rare); } .cards.play-mode #cards-list .card.epic { --rc: var(--epic); }
.cards.play-mode #cards-list .card.legendary { --rc: var(--legendary); box-shadow: inset 0 0 0 3px var(--legendary), 0 6px 0 rgba(0, 0, 0, .35), 0 0 18px #ffd25e66; }
.cards.play-mode #cards-list .card.lunar { --rc: var(--lunar); }
.cards.play-mode #cards-list .card .card-art { width: 76px; height: 76px; flex: none; margin: 2px auto 2px; border-radius: 12px;
  background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 70%); box-shadow: none; }
.cards.play-mode #cards-list .card .card-art img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.cards.play-mode #cards-list .card .card-body { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.cards.play-mode #cards-list .card .card-head { flex-direction: column; align-items: center; gap: 0; }
.cards.play-mode #cards-list .card .card-name { font-size: 13px; line-height: 1.1; }
.cards.play-mode #cards-list .card .card-rarity { position: absolute; top: 0; left: 0; right: 0; padding: 4px 0; border-radius: 14px 14px 0 0; font-size: 10px; font-weight: 900;
  letter-spacing: 1px; text-transform: uppercase; color: #12160f; background: var(--rc); }
.cards.play-mode #cards-list .card .card-desc { font-size: 11px; line-height: 1.25; }
.cards.play-mode #cards-list .card .card-badge { position: static; margin-top: auto; }
.card-combo { display: flex; align-items: center; gap: 5px; width: 100%; margin-top: 2px; padding: 4px 5px; border-radius: 9px; text-align: left;
  background: rgba(138, 92, 255, .18); box-shadow: inset 0 0 0 1px rgba(170, 130, 255, .6); }
.card-combo img { width: 22px; height: 22px; flex: none; image-rendering: pixelated; }
.card-combo span { display: flex; flex-direction: column; min-width: 0; }
.card-combo b { font-size: 10px; line-height: 1.15; color: #e2d4ff; }
.card-combo small { font-size: 9px; color: #bfb0e8; }
.card-combo.progress { background: rgba(138, 92, 255, .28); }
.card-combo.ready { background: rgba(255, 210, 94, .22); box-shadow: inset 0 0 0 2px #ffd25e, 0 0 10px #ffd25e66; animation: combo-glow 1.2s ease-in-out infinite; }
.card-combo.ready b, .card-combo.ready small { color: #ffe9a0; }
.card-combo.done { opacity: .55; }
@keyframes combo-glow { 50% { box-shadow: inset 0 0 0 2px #ffd25e, 0 0 18px #ffd25eaa; } }
.cards.play-mode #cards-list .card .card-name { font-size: 11.5px; white-space: normal; overflow-wrap: anywhere; hyphens: auto; max-width: 100%; }
.cards.play-mode #cards-list .card .card-head { max-width: 100%; }
.cards.play-mode #cards-list .card .card-head { width: 100%; }
.cards.play-mode #cards-list .card .card-name { display: block; width: 100%; overflow-wrap: break-word; word-break: normal; hyphens: manual; }
.cards.play-mode #cards-list .card .card-head { padding-right: 0; }


/* v72: главное меню — Город слизней. Картинка вписана «по высоте/ширине», здания и таблички стоят в долях картинки */
.city-menu { background: #050a06; }
.city-menu .city-backdrop { background: url('assets/menu-city-blur.webp') center / cover; filter: blur(14px) brightness(.55); animation: none; inset: -30px; }
.city-menu .city-backdrop::after { display: none; }
.city { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max(100vw, calc(100dvh * 0.5595)); aspect-ratio: 752 / 1344; z-index: 1; }
@media (orientation: landscape) { .city { width: calc(100dvh * 0.5595); } }
.city-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; pointer-events: none; }
.city-spot, .city-label, .city-portal, .city-hero { position: absolute; left: var(--x); top: var(--y); }
/* здания: невидимые кнопки, при нажатии подсвечиваются */
.city-spot { width: var(--w); height: var(--h); transform: translate(-50%, -50%); border: 0; border-radius: 40%; background: transparent; cursor: pointer; padding: 0; }
.city-spot:active, .city-spot:hover { background: radial-gradient(ellipse, rgba(170, 255, 120, .28), transparent 70%); }
/* таблички */
.city-label { transform: translate(-50%, -50%); z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px 6px 9px; border: 0; border-radius: 14px; cursor: pointer;
  font: inherit; color: #fff; white-space: nowrap; background: linear-gradient(180deg, rgba(40, 32, 26, .94), rgba(16, 12, 10, .94));
  box-shadow: inset 0 0 0 2px #b8955a, inset 0 0 0 4px rgba(0, 0, 0, .5), 0 4px 10px #000a; text-shadow: 0 1px 0 #000; transition: transform .12s; }
.city-label:active { transform: translate(-50%, -50%) scale(.95); }
.city-label .ic { font-size: 18px; filter: drop-shadow(0 1px 1px #000); }
.city-label b { font-size: 14px; font-weight: 900; }
.city-label small { display: none; }
.city-label .menu-badge { position: absolute; top: -9px; right: -9px; }
.city-label.start { padding: 11px 22px; font-size: 18px; font-weight: 900; color: #eaffd8; border-radius: 22px;
  background: linear-gradient(180deg, rgba(30, 70, 30, .92), rgba(8, 30, 12, .95)); box-shadow: inset 0 0 0 2px #9dff7a, 0 0 18px #6dff4a99, 0 4px 12px #000a;
  animation: start-pulse 1.8s ease-in-out infinite; }
@keyframes start-pulse { 50% { box-shadow: inset 0 0 0 2px #c8ff9a, 0 0 30px #6dff4acc, 0 4px 12px #000a; } }
/* портал: пульсирующее свечение и вихрь */
.city-portal { width: 21%; aspect-ratio: 1 / 1.35; transform: translate(-50%, -50%); border-radius: 50% 50% 46% 46%; pointer-events: none; mix-blend-mode: screen; z-index: 1;
  background: radial-gradient(ellipse, rgba(170, 255, 110, .55), rgba(80, 220, 60, .25) 45%, transparent 70%); animation: portal-pulse 2.4s ease-in-out infinite; }
.city-portal::after { content: ''; position: absolute; inset: 14%; border-radius: 50%; background: conic-gradient(from 0deg, transparent, rgba(220, 255, 180, .5), transparent 30%, rgba(160, 255, 120, .4), transparent 65%);
  animation: portal-spin 3.5s linear infinite; filter: blur(2px); }
@keyframes portal-pulse { 50% { opacity: .6; scale: 1.06; } }
@keyframes portal-spin { to { rotate: 360deg; } }
/* герой на лестнице */
.city-menu .city-hero { --x: 50%; --y: 46%; width: 15%; height: auto; aspect-ratio: 1; margin: 0; transform: translate(-50%, -100%); z-index: 2; image-rendering: pixelated; object-fit: contain;
  filter: drop-shadow(0 6px 4px #000c) drop-shadow(0 0 10px #6dff4a66); animation: evo-breathe 1.8s ease-in-out infinite; }
/* капли слизи сверху, водопады, светлячки */
.city-drips i { position: absolute; left: var(--x); top: 3%; width: 1.2%; aspect-ratio: 1 / 1.6; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  background: radial-gradient(circle at 40% 35%, #eaffc8, #7dff3a 45%, #2f9a1c); box-shadow: 0 0 8px #7dff3a; animation: city-drip 3.2s ease-in infinite; animation-delay: var(--d); opacity: 0; z-index: 2; }
@keyframes city-drip { 0% { opacity: 0; transform: translateY(0) scale(.4); } 15% { opacity: 1; transform: translateY(0) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(60vh) scale(.8, 1.3); } }
.city-falls i { position: absolute; left: var(--x); top: var(--y); width: 2.4%; height: var(--h); transform: translateX(-50%); border-radius: 4px; mix-blend-mode: screen; z-index: 1;
  background: repeating-linear-gradient(180deg, rgba(200, 255, 150, .0) 0 6px, rgba(200, 255, 150, .45) 6px 9px, rgba(200, 255, 150, 0) 9px 16px);
  background-size: 100% 32px; animation: city-fall .6s linear infinite; opacity: .8; }
@keyframes city-fall { to { background-position: 0 32px; } }
.city-flies i { position: absolute; left: var(--x); top: var(--y); width: 5px; height: 5px; border-radius: 50%; background: #d6ff8a; box-shadow: 0 0 8px 2px #9dff4a; z-index: 2;
  animation: city-fly 6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes city-fly { 0%, 100% { transform: translate(0, 0); opacity: .2; } 25% { transform: translate(14px, -18px); opacity: 1; } 50% { transform: translate(-8px, -30px); opacity: .6; } 75% { transform: translate(-16px, -10px); opacity: 1; } }
/* шапка и низ поверх города */
.city-top { position: absolute; left: 0; right: 0; top: 0; z-index: 4; padding: calc(max(8px, var(--sa-top)) + 4px) 12px 18px; text-align: center;
  background: linear-gradient(180deg, rgba(4, 10, 6, .75), transparent); pointer-events: none; }
.city-top .menu-res { pointer-events: auto; justify-content: flex-end; }
.city-title { display: flex; flex-direction: column; align-items: center; line-height: 1; margin-top: 2px; }
.city-title b { font-size: clamp(30px, 9.5vw, 46px); font-weight: 900; color: #c8ff9a; letter-spacing: 1px;
  text-shadow: 0 2px 0 #1a4a12, 0 4px 0 #0b2a08, 0 0 18px #6dff4a99; }
.city-title span { margin-top: 4px; font-size: clamp(13px, 4vw, 17px); font-weight: 800; color: #f2ecd8; text-shadow: 0 1px 2px #000; letter-spacing: 1px; }
.city-top .menu-run { margin: 4px 0 0; font-size: 12px; color: #dfe9d8; text-shadow: 0 1px 2px #000; }
.city-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 22px 12px calc(10px + var(--sa-bottom));
  background: linear-gradient(0deg, rgba(4, 10, 6, .85) 40%, transparent); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.city-bottom .menu-life { width: min(100%, 460px); margin: 0; }
.city-bottom .menu-life span { padding: 7px 2px; border-radius: 12px; background: rgba(10, 14, 10, .78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.city-bottom .menu-life b { font-size: 15px; }
.city-bottom .menu-best, .city-bottom .menu-codes { margin: 0; font-size: 10px; }
/* город вписан целиком: по ширине на телефоне, по высоте на широком экране */
.city { width: min(100vw, calc(100dvh * 0.5595)); }
.city-label { padding: 5px 11px 5px 8px; }
.city-label b { font-size: 13px; }
.city-label.start { font-size: 16px; padding: 9px 18px; }
.city-menu .city-hero { transform: none; translate: -50% -100%; }
@media (orientation: landscape) {
  .city-title b { font-size: clamp(22px, 5vh, 34px); }
  .city-title span { font-size: 12px; }
  .city-top { padding-bottom: 4px; background: linear-gradient(180deg, rgba(4, 10, 6, .6), transparent); }
  .city-top .menu-run { font-size: 11px; }
  .city-bottom { padding-top: 10px; }
}


/* v73: дом Мурлиона на дороге, вход и выход */
.merchant-house { position: absolute; z-index: 4; image-rendering: pixelated; pointer-events: none; filter: drop-shadow(0 8px 6px #000a); }
.arena.entering-house #slime, .arena.entering-house .helper-slot.filled { animation: enter-house .65s ease-in forwards; }
@keyframes enter-house { to { translate: 34px -6px; scale: .7; opacity: 0; } }
.screen-fade { position: fixed; inset: 0; z-index: 60; pointer-events: none; animation: screen-dark .4s ease-in-out forwards; }
.screen-fade.dark { background: #000; }
.screen-fade.flash { background: #fff6d8; animation-name: screen-flash; }
@keyframes screen-dark { 0% { opacity: 0; } 70% { opacity: 1; } 100% { opacity: 1; } }
@keyframes screen-flash { 0% { opacity: 1; } 100% { opacity: 0; } }
.merchant-house { transform: scaleX(-1); }   /* дверь — к отряду */
.cards-tools.only-auto .tool-row { display: none; }

/* v74: дом стоит на земле — короткая тень у основания, без «парящей» тени */
.merchant-house { filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .55)); }


/* v74: горизонтальное главное меню. Широкая картинка = полоса 18%…86% вертикальной, дорисованная по бокам:
   старая картинка занимает её середину (27.03%…72.97% по ширине). Координаты зданий и табличек остались
   в долях вертикальной картинки и пересчитываются здесь: x' = 27.03% + x·0.4593, y' = (y − 18%) / 0.68 */
@media (orientation: landscape) {
  .city-menu .city { width: max(100vw, calc(100dvh * 2752 / 1536)); aspect-ratio: 2752 / 1536; overflow: hidden; }
  .city-menu .city-backdrop { display: none; }
  .city .city-spot, .city .city-label, .city .city-portal, .city .city-hero, .city .city-falls i, .city .city-flies i {
    left: calc(27.035% + var(--x) * .4593); top: calc((var(--y) - 18%) / .68); }
  .city .city-spot { width: calc(var(--w) * .4593); height: calc(var(--h) / .68); }
  .city .city-portal { width: 9.65%; }
  .city-menu .city-hero { width: 6.9%; }
  .city .city-falls i { width: 1.1%; height: calc(var(--h) / .68); }
  .city .city-drips { display: none; }   /* капли падали со свода — свод в широкой картинке срезан */
}
/* низкий горизонтальный экран (телефон боком): шапка — узкой строкой, статистика — в левый нижний угол, таблички открыты */
@media (orientation: landscape) and (max-height: 520px) {
  .city-top { display: grid; grid-template-columns: max-content 1fr max-content; align-items: start; text-align: left; padding: 6px 10px 14px;
    background: linear-gradient(180deg, rgba(4, 10, 6, .65), transparent); }
  .city-top .city-title { grid-column: 1; grid-row: 1; align-items: flex-start; margin: 0; }
  .city-top .city-title b { font-size: 20px; }
  .city-top .city-title span { font-size: 10px; margin-top: 2px; }
  .city-top .menu-run { grid-column: 1; grid-row: 2; max-width: 210px; font-size: 10px; margin-top: 2px; }
  .city-top .menu-res { grid-column: 3; grid-row: 1; }
  .city-bottom { left: 8px; right: auto; width: min(300px, 36vw); padding: 0 0 calc(6px + var(--sa-bottom)); background: none; align-items: flex-start; gap: 2px; }
  .city-bottom .menu-life span { padding: 3px 2px; border-radius: 9px; }
  .city-bottom .menu-life b { font-size: 12px; }
  .city-bottom .menu-life small, .city-bottom .menu-life i { font-size: 9px; }
  .city-bottom .menu-best, .city-bottom .menu-codes { font-size: 9px; text-shadow: 0 1px 2px #000; }
}


/* v75: карты предметов в слизистой рамке (по референсу). Рамка — две картинки через border-image:
   верх (название, гнездо камня, окно рисунка) и низ (панель описания, табличка редкости). Масштаб — от ширины карты (cqw),
   поэтому узоры не искажаются, а нижняя панель растёт под текст. Доли взяты из картинки 640 px шириной. */
.card.tcg { --rc: var(--common); }
.card.tcg.uncommon { --rc: #7dff8a; } .card.tcg.rare { --rc: var(--rare); } .card.tcg.epic { --rc: var(--epic); }
.card.tcg.legendary { --rc: var(--legendary); } .card.tcg.lunar { --rc: var(--lunar); }
.cards #cards-list .card.tcg { container-type: inline-size; display: flex; flex-direction: column; align-items: stretch; gap: 0;
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; min-height: 0; aspect-ratio: auto; text-align: center;
  overflow: visible; filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .6)); width: 100%; max-width: 200px; margin: 0 auto; }
.cards.play-mode #cards-list .card.tcg { flex: 1 1 0; min-width: 108px; max-width: 184px; margin: 0; box-shadow: none; }
.cards #cards-list .card.tcg.legendary { filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .6)) drop-shadow(0 0 8px #ffd25e88); }
.cards #cards-list .card.tcg.lunar { filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .6)) drop-shadow(0 0 8px #8fd0ff88); }
.card.tcg .tcg-top { position: relative; display: block; flex: none; height: calc(29.4cqw + 50cqw);
  border-style: solid; border-width: 0; border-image: url('assets/card-frame-top.webp') 109 43 4 43 fill / 28.3cqw 11.2cqw 1.1cqw 11.2cqw stretch; }
.card.tcg .tcg-bot { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 4px; flex: 1 1 auto; min-height: 44cqw;
  padding: calc(1.25cqw + 5px) calc(11.2cqw + 3px) calc(21.3cqw + 4px);
  border-style: solid; border-width: 0; border-image: url('assets/card-frame-bot.webp') 5 43 82 43 fill / 1.25cqw 11.2cqw 21.3cqw 11.2cqw stretch; }
/* название — на верхней табличке */
.cards #cards-list .card.tcg .card-name { position: absolute; left: 17.3cqw; width: 61cqw; top: 17.8cqw; height: 9.1cqw; display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 0 2px; font-size: clamp(9px, 7cqw, 14px); line-height: 1; font-weight: 900; color: #f4f0dc; text-shadow: 0 1px 0 #000, 0 0 4px #000;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* камень редкости — в гнезде справа сверху */
.card.tcg .tcg-gem { position: absolute; left: 88.1cqw; top: 21.4cqw; width: 7.5cqw; height: 7.5cqw; translate: -50% -50%; rotate: 45deg; border-radius: 2px;
  background: linear-gradient(135deg, #fff 0%, var(--rc) 35%, color-mix(in srgb, var(--rc) 45%, #000) 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 0 7px var(--rc); }
/* рисунок — в окне */
.cards #cards-list .card.tcg .card-art { position: absolute; left: 11.2cqw; right: 11.2cqw; top: 28.3cqw; bottom: 1.1cqw; width: auto; height: auto; margin: 0;
  display: flex; align-items: center; justify-content: center; border-radius: 6px; box-shadow: none;
  background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--rc) 28%, transparent), transparent 68%); }
.cards #cards-list .card.tcg .card-art img { width: 72%; height: 72%; object-fit: contain; image-rendering: pixelated; }
.cards #cards-list .card.tcg .card-badge { position: absolute; right: 13cqw; bottom: 3cqw; top: auto; left: auto; margin: 0; padding: 2px 5px; border-radius: 7px;
  font-size: 9px; font-weight: 900; background: rgba(8, 12, 9, .85); color: #d8ff9a; box-shadow: inset 0 0 0 1px rgba(150, 255, 100, .45); }
/* описание и комбо — в нижней панели */
.cards #cards-list .card.tcg .card-desc { font-size: 11px; line-height: 1.25; color: #e6eedc; }
.cards #cards-list .card.tcg .card-combo { margin-top: auto; }
/* редкость — на нижней табличке */
.cards #cards-list .card.tcg .card-rarity { position: absolute; left: 22.3cqw; width: 55cqw; bottom: 13.1cqw; height: 5.3cqw; top: auto; right: auto; display: flex; align-items: center;
  justify-content: center; padding: 0; margin: 0; border-radius: 0; background: none; font-size: clamp(7px, 4.6cqw, 10px); font-weight: 900; letter-spacing: 1px;
  text-transform: uppercase; color: var(--rc); text-shadow: 0 1px 0 #000; }
/* кольцо удержания — по краю рамки */
#cards-list .card.tcg::after { inset: 4cqw 7cqw 8cqw; border-radius: 12px; }
/* название — до двух строк, без капса; значок «Новый / ×N» — маленький, в левом верхнем углу окна */
.cards #cards-list .card.tcg .card-name { text-transform: none; letter-spacing: 0; white-space: normal; text-overflow: clip; text-align: center;
  font-size: clamp(8px, 6.4cqw, 13px); line-height: 1.02; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; padding-top: .5cqw; }
.cards #cards-list .card.tcg .card-badge { right: auto; bottom: auto; left: 13cqw; top: 30.5cqw; padding: 1px 4px; font-size: 8px; border-radius: 6px; border: 0; }
.cards #cards-list .card.tcg .card-art img { width: 80%; height: 80%; }
.cards #cards-list .card.tcg .card-name { top: 22.35cqw; height: auto; max-height: none; translate: 0 -50%; padding-top: 0; }


/* v76: встреча со спутником (по образцу событий Slay the Spire) */
.event { position: fixed; inset: 0; z-index: 55; display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0, 46%) auto; align-content: center;
  gap: 4px; padding: max(12px, var(--sa-top)) 16px max(16px, var(--sa-bottom)); overflow-y: auto;
  background: radial-gradient(ellipse at 30% 40%, #18221d 0%, #0b0f0d 70%); animation: event-in .4s ease-out; }
.event[hidden] { display: none; }
@keyframes event-in { from { opacity: 0; } to { opacity: 1; } }
.event-art { display: flex; align-items: center; justify-content: center; min-height: 0; }
.event-art img { max-width: 100%; max-height: 100%; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated;
  -webkit-mask: radial-gradient(circle, #000 52%, transparent 72%); mask: radial-gradient(circle, #000 52%, transparent 72%); animation: event-breathe 4s ease-in-out infinite; }
@keyframes event-breathe { 50% { scale: 1.025; } }
.event-side { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; max-width: 560px; margin: 0 auto; }
.event-title { margin: 0; font-size: 26px; font-weight: 900; color: #f2c94c; text-shadow: 0 2px 0 #000; }
.event-text { margin: 0; font-size: 15px; line-height: 1.4; color: #ece6d6; }
.event-prompt { margin: 2px 0 4px; font-size: 15px; color: #ece6d6; font-style: italic; }
.event-prompt:empty { display: none; }
.event-options { display: flex; flex-direction: column; gap: 10px; width: 100%; }
/* вариант — тёмная плашка со скошенными краями: жёлтый заголовок, под ним что даёт */
.event-opt { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 10px 26px; border: 0; cursor: pointer;
  font: inherit; text-align: left; color: #e6efe9; background: #6fb3aa;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%); transition: transform .12s; }
.event-opt::before { content: ''; position: absolute; inset: 2px; z-index: 0; background: #1f3b3a; transition: background .12s;
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 13px 100%, 0 50%); }
.event-opt > * { position: relative; z-index: 1; }
.event-opt > b { font-size: 16px; color: #f2c94c; }
.event-opt > span { font-size: 13px; line-height: 1.3; }
.event-opt span b, .event-opt span strong { color: #f2c94c; }
.event-opt:hover:not(:disabled)::before, .event-opt:active:not(:disabled)::before { background: #2a504e; }
.event-opt:hover:not(:disabled), .event-opt:active:not(:disabled) { transform: translateX(3px); }
.event-opt:disabled { opacity: .45; cursor: default; }
.event-opt.next { align-items: center; }
@media (orientation: landscape) {
  .event { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: 1fr; align-items: center; gap: 24px; padding: 16px 32px; }
  .event-art { height: 100%; max-height: 92dvh; }
}
.event { grid-template-columns: minmax(0, 1fr); }
.event-art img { width: min(100%, 44dvh); height: auto; max-height: none; }
.event-side { width: 100%; min-width: 0; }
@media (orientation: landscape) {
  .event { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .event-art img { width: min(100%, 86dvh); }
}
@media (orientation: landscape) and (min-height: 600px) {
  .event-title { font-size: 34px; }
  .event-text, .event-prompt { font-size: 18px; }
  .event-opt { padding: 14px 32px; }
  .event-opt > b { font-size: 19px; }
  .event-opt > span { font-size: 15px; }
}


/* v77: экран договора (по образцу Neow): на фоне Древняя Слизь, внизу её реплика и варианты длинными плашками */
.pact-scene, .pact-keeper, .pact-speech { display: none; }
.cards.pact-mode { background: #050806; justify-content: flex-end; align-items: center; padding: 0; overflow: hidden; }
.cards.pact-mode .pact-scene { display: block; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(4, 8, 6, .55) 52%, rgba(4, 8, 6, .92) 78%), url('assets/pact-keeper-tall.webp') center top / cover no-repeat;
  animation: pact-breathe 6s ease-in-out infinite; }
@keyframes pact-breathe { 50% { scale: 1.02; } }
.cards.pact-mode .pact-keeper { display: flex; flex-direction: column; position: absolute; left: 14px; bottom: calc(10px + var(--sa-bottom)); z-index: 1;
  line-height: 1; pointer-events: none; opacity: .75; }
.pact-keeper b { font-size: 22px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: #dfe8d6; text-shadow: 0 2px 0 #000; }
.pact-keeper small { margin-top: 3px; font-size: 11px; font-style: italic; color: #b9c7b0; }
.cards.pact-mode .cards-box { position: relative; z-index: 2; width: min(760px, 100%); max-width: none; margin: auto auto 0; padding: 0 12px calc(54px + var(--sa-bottom));
  background: none; box-shadow: none; border: 0; }
.cards.pact-mode .cards-title { display: none; }
/* реплика: иконка-рожица и тёмный пузырь */
.cards.pact-mode .pact-speech { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.pact-face { flex: none; width: 46px; height: 46px; border-radius: 50%; background: url('assets/pact-keeper-face.webp') center / cover; box-shadow: 0 0 0 2px #6fb3aa, 0 0 12px #7dff8a55; }
.pact-speech span { position: relative; flex: 1; padding: 10px 14px; border-radius: 14px; background: rgba(20, 30, 28, .92); box-shadow: inset 0 0 0 1px rgba(160, 220, 200, .25);
  font-size: 14px; line-height: 1.35; color: #e8efe6; text-align: left; font-style: italic; }
.pact-speech span::before { content: ''; position: absolute; left: -7px; top: 50%; translate: 0 -50%; border: 7px solid transparent; border-left: 0; border-right-color: rgba(20, 30, 28, .92); }
.cards.pact-mode .cards-sub { margin: 0 0 8px 56px; text-align: left; font-size: 11px; color: #9fb5a7; }
/* варианты — длинные плашки */
.cards.pact-mode #cards-list { display: flex; flex-direction: column; gap: 6px; }
.cards.pact-mode #cards-list .card.pact, .cards.pact-mode .cards-close { display: flex; flex-direction: row; align-items: center; gap: 12px; width: 100%; min-height: 0; margin: 0;
  padding: 9px 16px; border: 0; border-radius: 10px; text-align: left; font: inherit; color: #e6efe9; aspect-ratio: auto;
  background: linear-gradient(90deg, rgba(30, 60, 58, .94), rgba(22, 44, 42, .9)); box-shadow: inset 0 0 0 1px rgba(111, 179, 170, .45); }
.cards.pact-mode #cards-list .card.pact:hover, .cards.pact-mode #cards-list .card.pact.holding { box-shadow: inset 0 0 0 2px #8ff0e0, 0 0 16px #6fe8d888; background: linear-gradient(90deg, rgba(40, 80, 76, .96), rgba(26, 52, 50, .94)); transform: none; }
.cards.pact-mode #cards-list .card.pact::after { border-radius: 10px; }
.cards.pact-mode .pact-icon { flex: none; width: 38px; height: 38px; display: grid; place-items: center; font-size: 26px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 70%); filter: drop-shadow(0 2px 2px #000); }
.cards.pact-mode .pact-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cards.pact-mode .pact-text > b { font-size: 16px; font-weight: 800; color: #f2c94c; text-shadow: 0 1px 0 #000; }
.cards.pact-mode .pact-text .card-desc, .cards.pact-mode .pact-text > span { font-size: 13px; line-height: 1.3; color: #e6efe9; }
.cards.pact-mode .pact-text .num, .cards.pact-mode .pact-text .kw { color: #7fe3ff; }
.cards.pact-mode .pact-text .minus { color: #ff6b5e; }
.cards.pact-mode .cards-close { margin-top: 6px; opacity: .85; background: rgba(16, 24, 22, .88); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.cards.pact-mode .cards-close .pact-text > b { color: #cfd8cc; }
@media (orientation: landscape) {
  .cards.pact-mode .pact-scene { background-image: linear-gradient(180deg, transparent 35%, rgba(4, 8, 6, .5) 55%, rgba(4, 8, 6, .9) 85%), url('assets/pact-keeper-wide.webp'); background-position: center 20%; }
  .cards.pact-mode .cards-box { padding-bottom: 14px; }
  .cards.pact-mode .pact-keeper { bottom: 14px; left: 22px; }
  .pact-keeper b { font-size: 30px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .cards.pact-mode .cards-box { width: min(620px, 72vw); margin-right: 12px; }
  .cards.pact-mode #cards-list .card.pact, .cards.pact-mode .cards-close { padding: 5px 12px; }
  .cards.pact-mode .pact-speech span { padding: 6px 10px; font-size: 12px; }
  .pact-face { width: 34px; height: 34px; }
}
.cards.pact-mode .pact-text > b { text-transform: none; letter-spacing: 0; }
@media (orientation: landscape) { .pact-keeper b { font-size: 24px; } }
@media (orientation: landscape) and (max-height: 520px) { .cards.pact-mode .pact-keeper { top: 12px; bottom: auto; } .pact-keeper b { font-size: 20px; } }
@media (orientation: landscape) and (min-height: 600px) {
  .cards.pact-mode .pact-text > b { font-size: 19px; }
  .cards.pact-mode .pact-text .card-desc, .cards.pact-mode .pact-text > span { font-size: 15px; }
  .cards.pact-mode .pact-speech span { font-size: 16px; }
  .cards.pact-mode #cards-list .card.pact, .cards.pact-mode .cards-close { padding: 11px 18px; }
}


/* v78: карты по редкостям (по референсу): своя рамка у каждой редкости, кольцо удержания по внутренней рамке, свечение выбранной, слоты комбо */
.card.tcg.common .tcg-top { border-image-source: url('assets/card-frame-top-common.webp'); } .card.tcg.common .tcg-bot { border-image-source: url('assets/card-frame-bot-common.webp'); }
.card.tcg.uncommon .tcg-top { border-image-source: url('assets/card-frame-top-uncommon.webp'); } .card.tcg.uncommon .tcg-bot { border-image-source: url('assets/card-frame-bot-uncommon.webp'); }
.card.tcg.rare .tcg-top { border-image-source: url('assets/card-frame-top-rare.webp'); } .card.tcg.rare .tcg-bot { border-image-source: url('assets/card-frame-bot-rare.webp'); }
.card.tcg.epic .tcg-top { border-image-source: url('assets/card-frame-top-epic.webp'); } .card.tcg.epic .tcg-bot { border-image-source: url('assets/card-frame-bot-epic.webp'); }
.card.tcg.legendary .tcg-top { border-image-source: url('assets/card-frame-top-legendary.webp'); } .card.tcg.legendary .tcg-bot { border-image-source: url('assets/card-frame-bot-legendary.webp'); }
.card.tcg.lunar .tcg-top { border-image-source: url('assets/card-frame-top-lunar.webp'); } .card.tcg.lunar .tcg-bot { border-image-source: url('assets/card-frame-bot-lunar.webp'); }

.card.tcg.common { --rc: #c9d1d6; }
.card.tcg.lunar { --rc: #ff4d5e; }
/* редкость на нижней табличке — названием, как «ОБЫЧНАЯ / РЕДКАЯ / ПРОКЛЯТАЯ» */
.cards #cards-list .card.tcg .card-rarity { font-size: clamp(7px, 5cqw, 11px); letter-spacing: .5px; }
/* кольцо удержания — по внутренней рамке окна с рисунком */
#cards-list .card.tcg::after { display: none; }
.cards #cards-list .card.tcg .card-art::after { content: ''; position: absolute; inset: -1px; border-radius: 6px; pointer-events: none; opacity: 0; padding: 3px;
  background: conic-gradient(from -90deg, var(--rc) calc(var(--p, 0) * 1%), transparent 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.cards #cards-list .card.tcg.holding .card-art::after { opacity: 1; animation: hold-ring var(--hold, 350ms) linear forwards; }
.cards.banish-mode #cards-list .card.tcg .card-art::after { background: conic-gradient(from -90deg, #ff5a5a calc(var(--p, 0) * 1%), transparent 0); }
/* выбранная (удерживаемая) карта — яркое свечение цветом редкости и чуть выше остальных */
.cards #cards-list .card.tcg { transition: transform .15s, filter .15s; }
.cards #cards-list .card.tcg.holding { transform: translateY(-5px) scale(1.03); filter: drop-shadow(0 0 6px var(--rc)) drop-shadow(0 0 16px var(--rc)) brightness(1.08); }
.cards #cards-list .card.tcg:hover:not(.holding) { transform: translateY(-2px); }
.cards #cards-list .card.tcg.legendary { filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .6)) drop-shadow(0 0 10px #ffc94a77); }
.cards #cards-list .card.tcg.lunar { filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .6)) drop-shadow(0 0 12px #ff3b4f88); }
.cards #cards-list .card.tcg.legendary.holding, .cards #cards-list .card.tcg.lunar.holding { filter: drop-shadow(0 0 6px var(--rc)) drop-shadow(0 0 18px var(--rc)) brightness(1.08); }
/* слоты комбо внизу карты */
.card.tcg .card-combo { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; margin-top: auto; padding: 3px 3px 4px; border-radius: 7px; text-align: center;
  background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 45%, transparent); animation: none; }
.card.tcg .card-combo .combo-h { font-size: 8px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--rc); }
.card.tcg .combo-slots { display: flex; align-items: center; justify-content: center; gap: 2px; }
.card.tcg .combo-slots > b { font-size: 10px; color: #cfd8cc; }
.card.tcg .combo-slots .slot { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; font-style: normal; font-size: 12px; color: #e2d4ff;
  background: #151a17; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); opacity: .6; }
.card.tcg .combo-slots .slot.on { opacity: 1; box-shadow: inset 0 0 0 1px var(--rc), 0 0 5px color-mix(in srgb, var(--rc) 60%, transparent); }
.card.tcg .combo-slots .slot.evo { background: radial-gradient(circle, #6a3dd8, #241245); box-shadow: inset 0 0 0 1px #b48cff; opacity: 1; }
.card.tcg .combo-slots .slot img { width: 18px; height: 18px; object-fit: contain; image-rendering: pixelated; }
.card.tcg .card-combo .combo-note { font-size: 8.5px; line-height: 1.15; color: #bfb0e8; }
.card.tcg .card-combo .combo-note b { color: #e2d4ff; }
.card.tcg .card-combo.ready { background: rgba(255, 210, 94, .16); box-shadow: inset 0 0 0 1px #ffd25e, 0 0 10px #ffd25e55; animation: combo-glow 1.2s ease-in-out infinite; }
.card.tcg .card-combo.ready .combo-note, .card.tcg .card-combo.ready .combo-note b { color: #ffe9a0; }
.card.tcg .card-combo.done { opacity: .55; }
.card.tcg .card-combo .combo-slots { flex-direction: row; min-width: 0; }
@media (orientation: landscape) and (min-width: 700px) {
  .cards.play-mode .cards-box { max-width: min(96vw, 1000px); }
  .cards.play-mode #cards-list { flex-wrap: nowrap; }
}


/* v79: символы предметов */
.sym-bar { display: flex; justify-content: center; gap: 4px; margin-top: 4px; pointer-events: auto; cursor: pointer; min-height: 0; }
.sym-bar:empty { display: none; }
.schip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px 2px 2px; border-radius: 10px; background: rgba(8, 12, 9, .72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); font-size: 11px; font-weight: 900; color: #cfd8cc; opacity: .75; }
.schip img { width: 20px; height: 20px; object-fit: contain; image-rendering: pixelated; }
.schip.t1 { opacity: 1; color: #fff; box-shadow: inset 0 0 0 1px var(--sc); }
.schip.t2 { opacity: 1; color: #fff; box-shadow: inset 0 0 0 2px var(--sc), 0 0 8px var(--sc); }
.results-syms { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.results-syms .schip { font-size: 12px; padding-right: 8px; }
/* блок символа на карте */
.card.tcg .card-sym { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 100%; margin-top: auto; padding: 3px 3px 4px; border-radius: 7px;
  background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc) 45%, transparent); }
.card.tcg .card-sym + .card-combo { margin-top: 3px; }
.card.tcg .card-sym .combo-h { font-size: 8px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--sc); }
.card.tcg .card-sym .sym-row { display: flex; flex-direction: row; align-items: center; gap: 4px; }
.card.tcg .card-sym .sym-row .slot { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; background: #151a17;
  box-shadow: inset 0 0 0 1px var(--sc), 0 0 5px color-mix(in srgb, var(--sc) 55%, transparent); }
.card.tcg .card-sym .sym-row .slot img { width: 18px; height: 18px; object-fit: contain; image-rendering: pixelated; }
.card.tcg .card-sym .sym-row b { font-size: 10px; color: #f0f4ec; }
.card.tcg .card-sym .sym-row em { font-style: normal; font-size: 10px; font-weight: 900; color: var(--sc); }
.card.tcg .card-sym .sym-note { font-size: 8.5px; line-height: 1.15; color: #b9c4b5; }
.card.tcg .card-sym .sym-note b { color: #ffe9a0; }
.card.tcg .card-sym.up { background: rgba(255, 210, 94, .14); box-shadow: inset 0 0 0 1px #ffd25e, 0 0 10px #ffd25e55; animation: combo-glow 1.2s ease-in-out infinite; }
.card.tcg .card-sym.up .sym-note { color: #ffe9a0; }
/* список символов во вкладке «Предметы» */
.sym-list { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.sym-list-h { font-size: 12px; color: #cfd8cc; }
.sym-line { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 10px; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); opacity: .7; }
.sym-line.t1, .sym-line.t2 { opacity: 1; box-shadow: inset 0 0 0 1px var(--sc); }
.sym-line img { width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; }
.sym-line span { display: flex; flex-direction: column; text-align: left; }
.sym-line b { font-size: 13px; color: #fff; }
.sym-line small { font-size: 11px; color: #8d978a; }
.sym-line small.on { color: var(--sc); font-weight: 800; }
.card.tcg .card-sym .sym-row { flex-wrap: nowrap; white-space: nowrap; gap: 3px; }
.card.tcg .card-sym .sym-row b { font-size: 9.5px; }
.card.tcg .card-sym .sym-row em { font-size: 9.5px; }


/* v80: умения свёрнуты в плашку автобоя, внизу — панель из 5 кнопок; летающий сундук, «🎁» и боковые кнопки убраны */
.arena .road-chest, .rewards-btn, .edge, .edge-btn.right { display: none !important; }
.dock { position: absolute; left: calc(6px + var(--sa-left)); right: calc(6px + var(--sa-right)); bottom: calc(6px + var(--sa-bottom)); z-index: 26; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.dock[hidden] { display: none; }
.dock button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 58px; padding: 4px 2px 5px;
  border: 0; border-radius: 12px; font: inherit; color: #f2ecd8; cursor: pointer;
  background: linear-gradient(180deg, rgba(40, 46, 38, .95), rgba(18, 22, 18, .95)); box-shadow: inset 0 0 0 1px rgba(214, 196, 140, .45), 0 3px 0 rgba(0, 0, 0, .45); }
.dock button:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px rgba(214, 196, 140, .45); }
.dock .dock-ic { display: grid; place-items: center; height: 26px; font-size: 22px; line-height: 1; color: #9dff7a; filter: drop-shadow(0 1px 1px #000); }
.dock .dock-ic img { width: 30px; height: 26px; object-fit: contain; image-rendering: pixelated; }
.dock b { font-size: 11px; font-weight: 800; }
.dock small { font-size: 9.5px; font-weight: 800; color: #ffd25e; margin-top: -1px; }
.dock .dot { position: absolute; top: 4px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 2px #2a0e0e, 0 0 6px #ff4d4d; display: none; }
.dock button.ready .dot { display: block; }
.dock #dock-chest.ready { box-shadow: inset 0 0 0 2px #ffd25e, 0 0 12px #ffd25e66, 0 3px 0 rgba(0, 0, 0, .45); animation: dock-pulse 1.4s ease-in-out infinite; }
@keyframes dock-pulse { 50% { box-shadow: inset 0 0 0 2px #ffd25e, 0 0 20px #ffd25eaa, 0 3px 0 rgba(0, 0, 0, .45); } }
/* плашка автобоя над панелью */
.arena .skillbar { left: calc(6px + var(--sa-left)); right: calc(6px + var(--sa-right)); bottom: calc(72px + var(--sa-bottom)); display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.arena .skillbar .energy-line { display: flex; flex-direction: row; align-items: center; gap: 6px; }
.arena .skillbar .energy-line .auto-btn { width: auto; min-height: 36px; padding: 2px 10px; flex: none; }
.skill-pill { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px; border: 0; border-radius: 12px; font: inherit; cursor: pointer;
  color: #f2ecd8; background: rgba(14, 18, 14, .86); box-shadow: inset 0 0 0 1px rgba(214, 196, 140, .45); text-align: left; }
.skill-pill i { font-style: normal; color: #9dff7a; font-size: 16px; }
.skill-pill span { flex: 1; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skill-pill .caret { font-style: normal; font-size: 14px; color: #d6c48c; transition: rotate .15s; }
.skillbar.open .skill-pill .caret { rotate: 180deg; }
.skillbar.call .skill-pill { animation: pill-call 1.1s ease-in-out infinite; }
@keyframes pill-call { 50% { box-shadow: inset 0 0 0 2px #ffd25e, 0 0 14px #ffd25e88; } }
.arena .skillbar .energy-num { position: relative; display: flex; align-items: baseline; gap: 1px; width: auto; height: 36px; min-width: 64px; padding: 0 10px; border-radius: 12px;
  align-items: center; justify-content: center; font-size: 15px; color: #ffd25e; background: rgba(14, 18, 14, .86); box-shadow: inset 0 0 0 1px rgba(214, 196, 140, .45); overflow: hidden; }
.arena .skillbar .energy-num small { font-size: 11px; color: #cfc6a0; }
.arena .skillbar .energy-num .energy-bar { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0, 0, 0, .5); }
.arena .skillbar .energy-num .energy-bar i { display: block; height: 100%; background: #ffd25e; }
/* лоток умений — над плашкой, только когда раскрыт */
.arena .skillbar .skills { display: none; }
.arena .skillbar.open .skills { display: grid; grid-template-columns: repeat(4, 1fr); animation: tray-in .15s ease-out; }
@keyframes tray-in { from { opacity: 0; translate: 0 8px; } }
/* сработавшее умение всплывает над плашкой */
.skill-pop { position: absolute; left: 50%; bottom: 40px; width: 0; height: 0; pointer-events: none; }
.skill-pop img { position: absolute; left: -22px; bottom: 0; width: 44px; height: 44px; border-radius: 10px; image-rendering: pixelated;
  box-shadow: 0 0 0 2px #ffd25e, 0 0 14px #ffd25e88; animation: skill-pop 1.1s ease-out forwards; }
@keyframes skill-pop { 0% { opacity: 0; translate: 0 10px; scale: .7; } 20% { opacity: 1; translate: 0 0; scale: 1.05; } 75% { opacity: 1; translate: 0 -14px; scale: 1; } 100% { opacity: 0; translate: 0 -26px; } }
/* «Статы» — кнопкой в шапке нижней панели */
.sheet-head { gap: 8px; }
.sheet-stats { margin-left: auto; padding: 4px 10px; border: 0; border-radius: 10px; font: inherit; font-size: 12px; font-weight: 800; color: #f2ecd8; background: rgba(255, 255, 255, .1); cursor: pointer; }
/* спутник на дороге (встреча) */
.merchant-house.road-npc { image-rendering: pixelated; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .55)); animation: npc-idle 1.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes npc-idle { 50% { scale: 1.03 .97; } }
/* горизонтальный экран: панель и плашка по центру внизу */
@media (orientation: landscape) and (min-width: 700px) {
  .dock { left: 50%; right: auto; width: min(620px, 70vw); translate: -50% 0; }
  .arena .skillbar { left: 50%; right: auto; width: min(560px, 64vw); translate: -50% 0; bottom: calc(74px + var(--sa-bottom)); }
}


/* v81: шапка по референсу — портрет с линейной полосой здоровья слева, опыт по центру, золото и сундук справа; мир и полоса босса — табличками */
.arena .hud { padding: max(6px, var(--sa-top)) calc(6px + var(--sa-right)) 10px calc(6px + var(--sa-left)); }
.arena .hud .hud-row { display: grid; grid-template-columns: minmax(0, auto) 1fr auto; grid-template-areas: "hero . right" "xp xp xp"; align-items: start; gap: 4px 6px; }
.arena .hero-card { grid-area: hero; }
.arena .lvl-box { grid-area: xp; }
.arena .hud-right { grid-area: right; justify-self: end; }
/* общая «рамка»: тёмная панель, золотистый кант, ромбики по бокам */
.arena .hero-card, .arena .lvl-box, .arena .hud-right > .res-col > *, .arena .hud-chest, .arena .hud-right .gear-btn, .arena .scene-top .world, .boss-head, .boss-bar-track {
  background: linear-gradient(180deg, rgba(34, 40, 32, .94), rgba(14, 18, 14, .94)); box-shadow: inset 0 0 0 1px rgba(214, 196, 140, .55), 0 0 0 1px rgba(0, 0, 0, .7), 0 3px 8px rgba(0, 0, 0, .45); }
/* портрет */
.arena .hero-card { gap: 8px; padding: 4px 12px 5px 4px; border-radius: 14px; }
.arena .portrait { width: 50px; height: 50px; }
.arena .portrait svg { display: none; }
.arena .portrait img { left: 0; top: 0; width: 50px; height: 50px; box-shadow: 0 0 0 2px #2a3a26, 0 0 0 3px rgba(214, 196, 140, .7); background: #0f1a10; }
.arena .hero-card-text { gap: 2px; }
.arena .hero-card-text b#portrait-hp { font-size: 15px; }
.hp-line { position: relative; display: block; width: 104px; height: 8px; border-radius: 4px; background: #1a0d0d; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .8); overflow: hidden; }
.hp-line i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 4px; transition: width .2s; }
#hp-line-fill { background: linear-gradient(180deg, #7dff6a, #2fb83a 60%, #1c7a26); }
#hp-line-shield { background: linear-gradient(180deg, rgba(255, 233, 160, .9), rgba(255, 210, 94, .7)); width: 0; height: 3px; top: auto; }
.hero-card.low #hp-line-fill { background: linear-gradient(180deg, #ff8a7a, #d02a2a); animation: low-pulse 1s ease-in-out infinite; }
.arena .hero-card-text small#portrait-name { font-size: 11px; }
/* опыт по центру */
.arena .lvl-box { justify-self: center; width: min(280px, 72%); max-width: none; padding: 3px 10px; border-radius: 10px; position: relative; }
.arena .lvl-box .bar.xp { height: 14px; min-height: 14px; border-radius: 7px; background: #15120a; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .8); }
.arena .lvl-box .bar.xp #xp-fill { background: linear-gradient(180deg, #ffe48a, #e0a82a 60%, #a8741a); border-radius: 7px; }
.arena .lvl-box .bar.xp span { font-size: 10px; font-weight: 800; }
.arena .lvl-box::before, .arena .lvl-box::after, .arena .scene-top .world::before, .arena .scene-top .world::after, .boss-head::before, .boss-head::after {
  content: ''; position: absolute; top: 50%; width: 7px; height: 7px; translate: 0 -50%; rotate: 45deg; background: #6fd46a; box-shadow: 0 0 0 1px #0a120a, 0 0 6px #6fd46a99; }
.arena .lvl-box::before, .arena .scene-top .world::before, .boss-head::before { left: -4px; }
.arena .lvl-box::after, .arena .scene-top .world::after, .boss-head::after { right: -4px; }
/* золото и сундук справа */
.arena .hud-right { gap: 5px; align-items: center; }
.arena .hud-right .res-col > * { height: 36px; padding: 0 10px; font-size: 15px; font-weight: 900; border-radius: 12px; }
.arena .hud-chest { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 9px 0 5px; border: 0; border-radius: 12px; font: inherit; font-size: 14px; font-weight: 900; color: #ffd25e; cursor: pointer; pointer-events: auto; }
.arena .hud-chest img { width: 26px; height: 22px; object-fit: contain; image-rendering: pixelated; }
.arena .hud-chest.ready { box-shadow: inset 0 0 0 2px #ffd25e, 0 0 12px #ffd25e77; animation: dock-pulse 1.4s ease-in-out infinite; }
.arena .hud-right .gear-btn { height: 36px; width: 36px; border: 0; }
/* мир — табличкой под опытом */
.arena .scene-top { top: calc(max(6px, var(--sa-top)) + 84px); }
.arena .scene-top .world { position: relative; display: inline-block; padding: 3px 18px; border-radius: 10px; font-size: 15px; color: #f6efc8; text-shadow: 0 1px 0 #000; }
.arena .scene-top .world small { font-size: 11px; color: #cfc6a0; }
/* полоса босса: табличка с именем и фазой, под ней красная полоса */
.boss-bar { top: calc(max(6px, var(--sa-top)) + 150px); width: min(92%, 460px); }
.boss-head { position: relative; display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 4px; padding: 3px 14px; border-radius: 10px; }
.boss-bar .boss-head b { display: inline; margin: 0; font-size: 15px; color: #fff1e0; text-shadow: 0 1px 0 #000, 0 0 8px #ff3b3b88; }
.boss-phase { font-style: normal; font-size: 11px; font-weight: 900; padding: 2px 8px; border-radius: 8px; color: #ffb3b3; background: rgba(120, 10, 20, .75); box-shadow: inset 0 0 0 1px #ff5a5a88; white-space: nowrap; }
.boss-bar-track { height: 20px; border-radius: 10px; padding: 3px; box-sizing: border-box; }
.boss-bar-track i { inset: 3px auto 3px 3px; border-radius: 7px; max-width: calc(100% - 6px); }
.boss-bar-track span { line-height: 14px; font-size: 11px; }
.boss-bar.rage .boss-phase { color: #fff; background: #c0141f; box-shadow: 0 0 10px #ff3b3b; animation: rage-pulse .8s ease-in-out infinite; }
.boss-bar.rage .boss-bar-track { box-shadow: inset 0 0 0 1px #ff5a5a, 0 0 0 1px rgba(0, 0, 0, .7), 0 0 14px #ff2a2a88; }
@keyframes rage-pulse { 50% { box-shadow: 0 0 18px #ff3b3b; } }
.arena .evo-status { top: calc(max(6px, var(--sa-top)) + 140px); }
/* широкий экран: всё в одну строку, опыт по центру, как в референсе */
@media (orientation: landscape) and (min-width: 700px) {
  .arena .hud .hud-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "hero xp right"; }
  .arena .hero-card { justify-self: start; }
  .arena .lvl-box { width: min(420px, 34vw); align-self: start; margin-top: 4px; }
  .arena .scene-top { top: calc(max(6px, var(--sa-top)) + 46px); }
  .boss-bar { top: calc(max(6px, var(--sa-top)) + 96px); width: min(560px, 46vw); }
  .hp-line { width: 160px; height: 10px; }
}


/* v82: капли лечения на дороге — тапни, чтобы вылечиться */
.heal-drop { position: absolute; z-index: 6; width: 34px; height: 34px; margin: 0; padding: 0; border: 0; background: none; translate: -50% -50%; cursor: pointer;
  pointer-events: auto; animation: drop-in .35s ease-out, drop-bob 1s ease-in-out .35s infinite; filter: drop-shadow(0 0 6px #7dff6a) drop-shadow(0 2px 1px #000a); }
.heal-drop img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
.heal-drop.big { width: 46px; height: 46px; filter: drop-shadow(0 0 10px #b6ff7a) drop-shadow(0 2px 1px #000a); }
.heal-drop.fading { animation: drop-blink .25s steps(2) infinite; }
.heal-drop.taken { animation: drop-take .3s ease-in forwards; pointer-events: none; }
@keyframes drop-in { from { translate: -50% -120%; scale: .4; opacity: 0; } }
@keyframes drop-bob { 50% { translate: -50% -62%; } }
@keyframes drop-blink { 50% { opacity: .35; } }
@keyframes drop-take { to { scale: 1.8; opacity: 0; } }


/* v83: крупный сундук готов — кнопка светится фиолетовым */
.dock #dock-chest.big, .arena .hud-chest.big { box-shadow: inset 0 0 0 2px #c49bff, 0 0 14px #c49bffaa, 0 3px 0 rgba(0, 0, 0, .45); animation: big-pulse 1.1s ease-in-out infinite; }
.dock #dock-chest.big small, .arena .hud-chest.big b { color: #e2d4ff; }
@keyframes big-pulse { 50% { box-shadow: inset 0 0 0 2px #c49bff, 0 0 22px #c49bffdd, 0 3px 0 rgba(0, 0, 0, .45); } }
#cards-list .card.companion.bonus .card-badge { background: #7dff8a; }


/* v84: ульта — одна кнопка вместо четырёх умений; копится энергией (полоса внутри), готова — светится */
.arena .skillbar .skills { display: none !important; }
.skill-pill.ult { position: relative; overflow: hidden; justify-content: center; }
.skill-pill.ult i { color: #ffd25e; position: relative; z-index: 1; }
.skill-pill.ult span { position: relative; z-index: 1; flex: none; }
.skill-pill.ult .ult-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--ult, 0) * 1%); background: linear-gradient(90deg, rgba(255, 210, 94, .15), rgba(255, 210, 94, .35)); transition: width .2s; }
.skillbar.ult-ready .skill-pill.ult { box-shadow: inset 0 0 0 2px #ffd25e, 0 0 16px #ffd25e88; animation: pill-call 1.1s ease-in-out infinite; }
.skillbar.ult-ready .skill-pill.ult span { color: #fff6d8; }
/* щит босса */
.boss-bar.shielded .boss-bar-track { box-shadow: inset 0 0 0 2px #7fd8ff, 0 0 0 1px rgba(0, 0, 0, .7), 0 0 14px #7fd8ff88; }
/* лавка: предмет для эволюции */
.m-evo { display: block; font-size: 10px; font-weight: 900; color: #c49bff; text-shadow: 0 0 6px #8a5cff; }


/* v85: арена босса — босс огромный и он и есть фон; лапы слева и справа бьют по герою */
.boss-backdrop { position: absolute; inset: 0; pointer-events: none; background: #000 var(--tall) center bottom / cover no-repeat; animation: arena-in .6s ease-out; }
@media (orientation: landscape) { .boss-backdrop { background-image: var(--wide); } }
@keyframes arena-in { from { opacity: 0; } }
.boss-backdrop::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 38%, rgba(255, 60, 30, .0), transparent 40%); transition: background .3s; }
.boss-backdrop.charge::after { background: radial-gradient(ellipse at 50% 38%, rgba(255, 120, 40, .55), transparent 35%); animation: mouth-charge .25s ease-in-out infinite alternate; }
@keyframes mouth-charge { to { opacity: .6; } }
.arena.arena-boss .monster.boss, .arena.arena-boss .mon.boss { opacity: 0; }   /* сам босс — фон, его спрайт не нужен */
.arena.arena-boss .bg .layer.far { opacity: 0; }
.boss-backdrop { z-index: 0; }
.boss-limb { position: absolute; top: -6%; width: 40%; max-width: 360px; z-index: 30; pointer-events: none; image-rendering: pixelated;
  transform-origin: 50% 0; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .55)); translate: 0 -12%; transition: translate .5s ease-out, filter .2s;
  animation: limb-sway 2.4s ease-in-out infinite; }
.boss-limb.left { left: -8%; rotate: -10deg; }
.boss-limb.right { right: -8%; scale: -1 1; rotate: 10deg; }
@keyframes limb-sway { 50% { translate: 0 -9%; } }
.boss-limb.raise { translate: 0 -34%; filter: drop-shadow(0 0 14px #ff3b3b) drop-shadow(0 10px 10px rgba(0, 0, 0, .55)); animation: none; transition: translate .35s ease-out; }
.boss-limb.slam { translate: var(--tx) var(--ty); animation: none; transition: translate .14s ease-in; }
.boss-limb { top: 14%; width: 30%; max-width: 260px; z-index: 20; }
.boss-limb.left { left: -6%; } .boss-limb.right { right: -6%; }
@media (orientation: landscape) { .boss-limb { top: 8%; width: 22%; } .boss-limb.left { left: 4%; } .boss-limb.right { right: 4%; } }


/* v86: покадровый облик (холст 192 вместо 128 — тот же размер героя, места хватает под дугу меча и прыжок) */
#evolved-art.frames { width: 150px; height: 150px; left: -32px; top: -55px; animation: none !important; image-rendering: pixelated; }


/* v87: режим разработчика, окно-карточка формы/предмета, коллекция по редкости */
.dev-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 999px; border: 0; font: inherit; font-size: 12px; color: #cfd8c8; cursor: pointer;
  background: rgba(10, 14, 10, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.dev-toggle i { width: 26px; height: 15px; border-radius: 999px; background: #3a3f3a; position: relative; transition: background .2s; }
.dev-toggle i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #cfd8c8; transition: transform .2s; }
.dev-toggle.on { color: #ffe08a; box-shadow: inset 0 0 0 1px #ffd25e; }
.dev-toggle.on i { background: #e0a526; }
.dev-toggle.on i::after { transform: translateX(11px); background: #fff; }
.dev-levels { width: min(100%, 520px); margin: 0 auto 8px; pointer-events: auto; }
.dev-track { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 30%; scrollbar-width: none; }
.dev-track::-webkit-scrollbar { display: none; }
.dev-world { flex: 0 0 132px; scroll-snap-align: center; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 34px 8px 7px; border: 0; border-radius: 12px; font: inherit; color: #fff; text-align: left; cursor: pointer;
  background: linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, .85)), var(--img) center 30% / cover, #1a2418; image-rendering: pixelated; opacity: .6; transform: scale(.92); transition: opacity .2s, transform .2s;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.dev-world.on { opacity: 1; transform: none; box-shadow: inset 0 0 0 2px #ffd25e, 0 0 14px rgba(255, 210, 94, .45); }
.dev-world .dw-n { font-size: 10px; color: #ffd25e; font-weight: 800; text-transform: uppercase; }
.dev-world b { font-size: 12px; line-height: 1.1; }
.dev-world small { font-size: 10px; color: #dfe9d8; }

.info-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .62); animation: arena-in .18s ease-out; }
.info-modal[hidden] { display: none; }
.info-card { position: relative; width: min(100%, 340px); max-height: 90vh; overflow-y: auto; padding: 18px 16px 16px; border-radius: 16px; text-align: center; color: #f7f1dc;
  background: linear-gradient(180deg, #2b2216, #17120b); box-shadow: inset 0 0 0 2px #7a4f2b, 0 12px 40px rgba(0, 0, 0, .6); }
.info-close { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border: 0; border-radius: 50%; font-size: 16px; font-weight: 900; color: #f7f1dc; cursor: pointer; background: rgba(255, 255, 255, .1); }
.info-card h3 { margin: 8px 0 2px; font-size: 19px; }
.info-sub { margin: 0 0 10px; font-size: 12px; color: #cdbf98; }
.info-stage { width: 168px; height: 168px; margin: 4px auto 0; border-radius: 14px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--bc) 30%, transparent), transparent 70%), #1a2418; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.info-stage img { width: 130px; height: 130px; object-fit: contain; image-rendering: pixelated; }
.info-stage img.frames { width: 168px; height: 168px; }
.info-strip { display: flex; justify-content: center; flex-wrap: wrap; gap: 3px; margin: 8px 0 4px; }
.info-strip img { width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; border-radius: 6px; background: rgba(255, 255, 255, .05); opacity: .5; }
.info-strip img.on { opacity: 1; box-shadow: inset 0 0 0 1px #ffd25e; }
.anim-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-bottom: 4px; }
.anim-tab { padding: 4px 8px; border: 0; border-radius: 999px; font: inherit; font-size: 11px; color: #f7f1dc; cursor: pointer; background: rgba(255, 255, 255, .08); }
.anim-tab.on { background: #e0a526; color: #1d1a14; font-weight: 800; }
.info-skill { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; border-radius: 10px; text-align: left; font-size: 13px; background: rgba(255, 255, 255, .06); }
.info-skill b { color: var(--bc, #ffd25e); }
.info-note { margin: 6px 0 0; font-size: 11px; color: #cdbf98; }
.info-icon { width: 96px; height: 96px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.info-icon.locked { filter: brightness(0) drop-shadow(0 0 1px #8d8057); opacity: .7; }
.info-desc { margin: 0 0 12px; font-size: 14px; line-height: 1.35; }
.info-sym { display: inline-flex; align-items: center; gap: 3px; color: var(--sc); font-weight: 700; }
.info-sym img { width: 14px; height: 14px; }
.info-btn { width: 100%; padding: 11px; border: 0; border-radius: 10px; font: inherit; font-weight: 800; font-size: 14px; color: #fff; cursor: pointer; background: #9b3a2e; }
.info-btn.on { background: #2f7a3e; }
.r-common { color: var(--common); } .r-uncommon { color: var(--uncommon); } .r-rare { color: #5aa0ff; } .r-epic { color: #c07bff; } .r-legendary { color: var(--legendary); } .r-lunar { color: var(--lunar); }
.coll-group { grid-column: 1 / -1; margin: 8px 0 0; text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.coll-group:first-child { margin-top: 0; }
.coll-group small { font-size: 11px; color: #cdbf98; text-transform: none; }
button.form-cell { border: 0; font: inherit; color: inherit; cursor: pointer; }


/* v88: стартовый уровень героя в режиме разработчика */
.dev-level { display: flex; align-items: center; gap: 10px; margin: 6px auto 0; padding: 6px 12px; width: min(100%, 360px); box-sizing: border-box; border-radius: 12px; font-size: 12px; color: #dfe9d8;
  background: rgba(10, 14, 10, .78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.dev-level span { white-space: nowrap; }
.dev-level input { flex: 1; accent-color: #e0a526; min-width: 0; }
.dev-level b { min-width: 22px; font-size: 16px; color: #ffd25e; text-align: right; }

/* v89: договор — три линии (дар, сделка, жертва), пиксельные иконки в медальонах, цена отдельной строкой */
.cards.pact-mode #cards-list .card.pact { --lc: #6fb3aa; --lc2: rgba(30, 60, 58, .95); position: relative; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 14px;
  background: linear-gradient(100deg, var(--lc2), rgba(14, 20, 18, .94) 75%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lc) 70%, transparent), inset 4px 0 0 0 var(--lc), 0 6px 14px rgba(0, 0, 0, .45); }
.cards.pact-mode #cards-list .card.pact.line-gift { --lc: #7ddc6a; --lc2: rgba(26, 58, 30, .95); }
.cards.pact-mode #cards-list .card.pact.line-deal { --lc: #f2c14c; --lc2: rgba(62, 48, 18, .95); }
.cards.pact-mode #cards-list .card.pact.line-vow { --lc: #ff5d6c; --lc2: rgba(70, 18, 30, .95); }
.cards.pact-mode #cards-list .card.pact:hover, .cards.pact-mode #cards-list .card.pact.holding { background: linear-gradient(100deg, color-mix(in srgb, var(--lc) 35%, #0c1210), rgba(14, 20, 18, .94) 80%);
  box-shadow: inset 0 0 0 2px var(--lc), inset 4px 0 0 0 var(--lc), 0 0 18px color-mix(in srgb, var(--lc) 55%, transparent); }
.cards.pact-mode .pact-icon { width: 58px; height: 58px; border-radius: 14px; font-size: 30px; filter: none;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--lc, #6fb3aa) 35%, transparent), rgba(0, 0, 0, .55) 75%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lc, #6fb3aa) 80%, #000), inset 0 0 0 4px rgba(0, 0, 0, .5); }
.cards.pact-mode .pact-icon img { width: 50px; height: 50px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6)); }
.cards.pact-mode .card.pact.holding .pact-icon img { animation: pact-bob .5s ease-in-out infinite alternate; }
@keyframes pact-bob { to { translate: 0 -3px; } }
.pact-tag { align-self: flex-start; margin-bottom: 2px; padding: 1px 7px; border-radius: 999px; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #10140f; background: var(--lc, #6fb3aa); }
.cards.pact-mode .pact-text > b { font-size: 17px; }
.cards.pact-mode .pact-text .pact-cost { display: block; margin-top: 3px; padding-top: 3px; border-top: 1px dashed rgba(255, 107, 94, .35); font-size: 12.5px; color: #ff8a7e; }
.cards.pact-mode .pact-text .pact-cost::before { content: '⚠ '; }
.cards.pact-mode .pact-text .pact-cost .num, .cards.pact-mode .pact-text .pact-cost .kw { color: #ffb4ab; }
.cards.pact-mode .cards-close .pact-icon { --lc: #8a958e; width: 46px; height: 46px; }
.cards.pact-mode .cards-close .pact-icon img { width: 38px; height: 38px; }
@media (orientation: landscape) and (max-height: 520px) {
  .cards.pact-mode .pact-icon { width: 44px; height: 44px; } .cards.pact-mode .pact-icon img { width: 38px; height: 38px; }
  .pact-tag { display: none; }
  /* низкий ландшафт: плашки компактнее, имя хранителя переносится и не лезет под реплику, кнопка «Уйти» всегда в кадре */
  .cards.pact-mode #cards-list .card.pact { padding: 5px 12px 5px 8px; }
  .cards.pact-mode #cards-list { gap: 5px; }
  .cards.pact-mode .cards-sub { margin-bottom: 5px; }
  .cards.pact-mode .cards-close { margin-top: 5px; }
  .cards.pact-mode .pact-text .pact-cost { margin-top: 1px; padding-top: 1px; }
  .cards.pact-mode .cards-box { max-height: 100%; overflow-y: auto; scrollbar-width: none; padding-top: 8px; }
  .cards.pact-mode .pact-keeper { max-width: calc(100vw - min(620px, 72vw) - 44px); }
  .cards.pact-mode .pact-keeper b { white-space: normal; overflow-wrap: anywhere; }
}


/* v90: главное меню — привал у светящейся лужи (горизонтальный экран), иконки-кнопки как в мобильных RPG */
.camp-menu { background: #040806; }
.camp-menu .camp-stage { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: max(100vw, calc(100dvh * 1344 / 752)); aspect-ratio: 1344 / 752; overflow: hidden; }
.camp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.camp-glow { position: absolute; left: 50%; top: 77%; width: 26%; aspect-ratio: 2.4; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(140, 255, 90, .45), transparent 65%); mix-blend-mode: screen; animation: camp-glow 3.2s ease-in-out infinite; }
@keyframes camp-glow { 50% { opacity: .55; scale: 1.08; } }
.camp-flies i { position: absolute; left: var(--x); top: var(--y); width: 5px; height: 5px; border-radius: 50%; background: #d8ff8a; box-shadow: 0 0 8px 3px #a8ff5a99;
  animation: camp-fly 5s ease-in-out var(--d) infinite; opacity: 0; }
@keyframes camp-fly { 0% { opacity: 0; translate: 0 0; } 30% { opacity: 1; } 70% { opacity: .8; } 100% { opacity: 0; translate: 18px -46px; } }
.camp-menu .camp-hero { position: absolute; left: 25%; top: 61%; width: 13%; height: auto; aspect-ratio: 1; margin: 0; translate: -50% -100%; object-fit: contain; object-position: 50% 100%;
  image-rendering: pixelated; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .55)) drop-shadow(0 0 14px rgba(140, 255, 90, .25)); animation: camp-breathe 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes camp-breathe { 50% { scale: 1.03 .97; } }

.camp-top { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 10px;
  padding: max(8px, var(--sa-top)) max(14px, var(--sa-right)) 18px max(14px, var(--sa-left));
  background: linear-gradient(180deg, rgba(2, 6, 4, .75), transparent); pointer-events: none; }
.camp-top > * { pointer-events: auto; }
.camp-profile { display: flex; align-items: center; gap: 8px; min-width: 0; }
.camp-profile img { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: contain; image-rendering: pixelated; background: radial-gradient(circle, #2c5a2a, #0c1a0e);
  box-shadow: 0 0 0 3px #7ddc6a, 0 0 0 5px #0c1a0e, 0 4px 10px rgba(0, 0, 0, .5); }
.camp-profile .menu-run { margin: 0; font-size: 11px; line-height: 1.25; color: #dfe9d8; text-shadow: 0 1px 2px #000; text-align: left; }
.camp-profile .menu-run b { display: block; font-size: 14px; color: #ffe08a; }
.camp-title { text-align: center; padding-top: 4px; }
.camp-title b { display: block; font-size: clamp(18px, 3.2vw, 30px); font-weight: 900; color: #f7f1dc; letter-spacing: .02em; text-shadow: 0 2px 0 #000, 0 0 14px rgba(0, 0, 0, .8); }
.camp-title b::before, .camp-title b::after { content: '✦'; margin: 0 .5em; font-size: .5em; vertical-align: middle; color: #9ee07a; }
.camp-title .menu-best { margin: 2px 0 0; font-size: 11px; color: #c9e3c9; }
.camp-menu .menu-res { display: flex; justify-content: flex-end; align-items: center; gap: 6px; flex-wrap: wrap; }
.camp-menu .res-chip { padding: 4px 10px 4px 6px; font-size: 14px; background: rgba(8, 14, 10, .82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.camp-menu .res-chip img { width: 22px; height: 22px; }
.camp-menu .res-chip:has(img) { gap: 4px; }
.camp-gear { width: 46px; height: 46px; padding: 3px; border: 0; border-radius: 12px; cursor: pointer; background: rgba(8, 14, 10, .82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.camp-gear img { width: 100%; height: 100%; object-fit: contain; transition: rotate .4s; }
.camp-gear:hover img { rotate: 60deg; }

.camp-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; width: 92px; padding: 0; border: 0; background: none; font: inherit; color: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.camp-btn img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .65)); transition: transform .15s; }
.camp-btn:hover img { transform: translateY(-3px) scale(1.06); }
.camp-btn:active img { transform: scale(.94); }
.camp-btn b { margin-top: -4px; font-size: 13px; font-weight: 900; line-height: 1.1; text-align: center; color: #f7f1dc;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 4px #000; }
.camp-btn small { font-size: 9.5px; color: #c9e3c9; text-shadow: 0 1px 2px #000; text-align: center; line-height: 1.1; }
.camp-btn .menu-badge { top: -2px; right: 10px; }
.camp-left { position: absolute; z-index: 3; left: max(10px, var(--sa-left)); top: 50%; translate: 0 -46%; display: flex; flex-direction: column; gap: 10px; }
.camp-bottom { position: absolute; z-index: 3; left: max(10px, var(--sa-left)); bottom: max(8px, var(--sa-bottom)); display: flex; gap: 6px; }
.camp-left .camp-btn:first-child { margin-left: 0; }

.camp-center { position: absolute; z-index: 3; left: 50%; bottom: max(8px, var(--sa-bottom)); translate: -50% 0; width: min(46vw, 520px); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.camp-center .dev-levels { width: 100%; margin: 0; }
.camp-center .dev-track { padding: 4px 34%; }
.camp-center .dev-world { flex-basis: 118px; padding-top: 26px; }
.camp-center .menu-codes { margin: 0; font-size: 9.5px; color: #9fb5a7; text-align: center; text-shadow: 0 1px 2px #000; }

.camp-start { position: absolute; z-index: 3; right: max(14px, var(--sa-right)); bottom: max(12px, var(--sa-bottom)); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.camp-go { position: relative; display: flex; align-items: center; gap: 4px; min-width: 210px; padding: 8px 26px 8px 8px; border: 0; border-radius: 18px; cursor: pointer; font: inherit;
  background: linear-gradient(180deg, #ffd25e, #f29a1f 60%, #d9761a); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .22), inset 0 2px 0 rgba(255, 255, 255, .55), 0 0 0 3px #3a1f06, 0 8px 18px rgba(0, 0, 0, .55);
  animation: camp-go 2.4s ease-in-out infinite; }
@keyframes camp-go { 50% { box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .22), inset 0 2px 0 rgba(255, 255, 255, .55), 0 0 0 3px #3a1f06, 0 0 24px rgba(255, 210, 94, .7); } }
.camp-go:active { translate: 0 3px; }
.camp-go img { width: 58px; height: 58px; margin: -18px 0 -10px -4px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5)); }
.camp-go span { font-size: 22px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; color: #3a1f06; text-shadow: 0 1px 0 rgba(255, 255, 255, .45); white-space: nowrap; }
.camp-start .menu-link { padding: 4px 10px; border-radius: 999px; background: rgba(8, 14, 10, .7); font-size: 11px; }

/* низкий экран (телефон лёжа): всё компактнее */
@media (max-height: 430px) {
  .camp-btn { width: 76px; } .camp-btn img { width: 50px; height: 50px; } .camp-btn b { font-size: 11.5px; } .camp-btn small { display: none; }
  .camp-left { gap: 4px; translate: 0 -42%; }
  .camp-profile img { width: 42px; height: 42px; } .camp-gear { width: 38px; height: 38px; }
  .camp-title .menu-best { display: none; }
  .camp-go { min-width: 170px; padding-right: 18px; } .camp-go img { width: 46px; height: 46px; } .camp-go span { font-size: 18px; }
}
/* вертикальное окно на компьютере: меню всё равно читается (на телефоне — просьба повернуть) */
@media (orientation: portrait) {
  .camp-left { top: 22%; translate: 0 0; }
  .camp-top { grid-template-columns: 1fr auto; } .camp-title { grid-column: 1 / -1; grid-row: 2; }
  .camp-center { bottom: 110px; width: 92vw; }
}

/* только горизонтально: на телефоне в портрете — экран «поверни» поверх всего */
.rotate-hint { display: none; }
@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
  .rotate-hint { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 24px; text-align: center; color: #f7f1dc;
    background: radial-gradient(circle at 50% 40%, #1d3a20, #040806 70%); }
  .rotate-hint > div { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .rotate-hint img { width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 0 20px rgba(140, 255, 90, .4)); }
  .rotate-hint b { font-size: 24px; font-weight: 900; }
  .rotate-hint span { font-size: 14px; color: #c9e3c9; }
  .rotate-phone { width: 46px; height: 76px; margin-top: 10px; border: 4px solid #f7f1dc; border-radius: 10px; animation: rotate-phone 2s ease-in-out infinite; }
  @keyframes rotate-phone { 0%, 20% { rotate: 0deg; } 60%, 100% { rotate: -90deg; } }
}


/* v91: слайм нарисован в самом фоне (на бревне); лужа — кнопка «В портал»; мерцают фонари, светятся грибы */
.camp-menu .camp-hero { display: none; }
.camp-lamps i { position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 200, 110, .55), rgba(255, 150, 60, .18) 40%, transparent 70%); animation: camp-lamp 2.8s ease-in-out var(--d) infinite; }
@keyframes camp-lamp { 0%, 100% { opacity: .85; scale: 1; } 30% { opacity: 1; scale: 1.08; } 55% { opacity: .7; scale: .96; } 70% { opacity: .95; } }
.camp-shrooms i { position: absolute; left: var(--x); top: var(--y); width: 3.2%; aspect-ratio: 1; translate: -50% -60%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(170, 255, 140, .7), rgba(120, 255, 90, .2) 45%, transparent 70%); animation: camp-shroom 3.4s ease-in-out var(--d) infinite; }
@keyframes camp-shroom { 0%, 100% { opacity: .45; scale: .9; } 50% { opacity: 1; scale: 1.15; } }
.camp-flies i { width: 4px; height: 4px; }

/* лужа-портал */
.camp-portal { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); translate: -50% -50%; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: none; font: inherit; color: #fff; -webkit-tap-highlight-color: transparent; z-index: 2; }
.camp-portal .cp-swirl { position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: screen; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 10%, rgba(190, 255, 120, .35) 18%, transparent 30% 50%, rgba(190, 255, 120, .3) 62%, transparent 75%);
  -webkit-mask: radial-gradient(closest-side, transparent 30%, #000 55%, #000 85%, transparent 100%); mask: radial-gradient(closest-side, transparent 30%, #000 55%, #000 85%, transparent 100%);
  animation: cp-spin 6s linear infinite; }
@keyframes cp-spin { to { rotate: 360deg; } }
.camp-portal .cp-ring { position: absolute; inset: -6% -3%; border-radius: 50%; pointer-events: none; box-shadow: 0 0 22px 6px rgba(150, 255, 90, .45), inset 0 0 18px 4px rgba(200, 255, 140, .5);
  animation: cp-pulse 2.2s ease-in-out infinite; }
@keyframes cp-pulse { 50% { box-shadow: 0 0 40px 14px rgba(150, 255, 90, .6), inset 0 0 26px 8px rgba(220, 255, 160, .7); } }
.camp-portal:hover .cp-ring, .camp-portal:focus-visible .cp-ring { box-shadow: 0 0 46px 18px rgba(180, 255, 110, .75), inset 0 0 30px 10px rgba(230, 255, 170, .8); }
.camp-portal:active { scale: .97; }
.cp-motes i { position: absolute; left: var(--o); bottom: 45%; width: 5px; height: 5px; border-radius: 50%; pointer-events: none; background: #e4ffb0; box-shadow: 0 0 8px 3px rgba(170, 255, 100, .8);
  opacity: 0; animation: cp-mote 2.6s ease-out var(--d) infinite; }
@keyframes cp-mote { 0% { opacity: 0; translate: 0 0; } 15% { opacity: 1; } 100% { opacity: 0; translate: 6px -260%; } }
.cp-label { position: relative; display: inline-block; padding: .25em .9em; border-radius: 999px; font-weight: 900; font-size: clamp(14px, 2.2vw, 26px); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  color: #f4ffe0; background: rgba(6, 30, 8, .45); text-shadow: 0 0 10px #8cff5a, 0 0 2px #2c7a14, 0 2px 0 #0a2a08; box-shadow: 0 0 0 1px rgba(200, 255, 150, .35);
  animation: cp-label 2.2s ease-in-out infinite; }
@keyframes cp-label { 50% { text-shadow: 0 0 18px #b4ff7a, 0 0 2px #2c7a14, 0 2px 0 #0a2a08; translate: 0 -2px; } }
.camp-start { bottom: max(10px, var(--sa-bottom)); }
@media (prefers-reduced-motion: reduce) { .camp-lamps i, .camp-shrooms i, .camp-portal *, .camp-flies i { animation: none !important; } }


/* v92: экран «Персонаж» как тренировочная площадка: вкладки слева, слайм в центре, медальоны и кнопка справа */
.menu.screen.meta-screen { display: block; padding: 0; overflow: hidden; background: #050806; }
.meta-screen::before { display: none; }
.meta-bg { position: absolute; inset: 0; background: url('assets/meta-bg.webp') 30% 50% / cover no-repeat; }
.meta-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 7, 5, .35), transparent 30%, transparent 48%, rgba(4, 7, 5, .7) 70%); }
.meta-head { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px;
  padding: max(8px, var(--sa-top)) max(14px, var(--sa-right)) 8px max(10px, var(--sa-left)); }
.meta-back { width: 48px; height: 44px; border: 0; border-radius: 10px; font: 900 34px/1 inherit; color: #ffd25e; cursor: pointer;
  background: linear-gradient(180deg, #4a3520, #2a1d10); box-shadow: inset 0 0 0 2px #b8893d, inset 0 -3px 0 rgba(0, 0, 0, .35), 0 3px 6px rgba(0, 0, 0, .5); }
.meta-title { padding: 6px 22px 6px 16px; font-size: clamp(16px, 2.6vw, 24px); font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: #ffd25e;
  background: linear-gradient(90deg, rgba(20, 14, 8, .9), rgba(20, 14, 8, .6) 80%, transparent); clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%); text-shadow: 0 2px 0 #000; }
.meta-res { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px 4px 6px; border-radius: 999px; font-size: 18px; font-weight: 900; color: #fff;
  background: rgba(8, 12, 9, .85); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.meta-res img { width: 28px; height: 28px; }

/* вкладки веток — каменные плашки */
.meta-tabs { position: absolute; z-index: 2; left: max(10px, var(--sa-left)); top: 50%; translate: 0 -45%; display: flex; flex-direction: column; gap: 8px; }
.meta-tab { position: relative; display: flex; flex-direction: column; align-items: center; width: 96px; padding: 6px 4px 5px; border: 0; border-radius: 12px; cursor: pointer; font: inherit; color: #e8dcc0;
  background: linear-gradient(180deg, #3d3326, #241d14); box-shadow: inset 0 0 0 2px #6b5636, inset 0 -4px 0 rgba(0, 0, 0, .35), 0 4px 8px rgba(0, 0, 0, .5); transition: transform .12s; }
.meta-tab img { width: 46px; height: 46px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
.meta-tab b { font-size: 12px; font-weight: 900; text-transform: uppercase; text-shadow: 0 1px 0 #000; }
.meta-tab.on { color: #2a1604; background: linear-gradient(180deg, #ffd25e, #e9962a); box-shadow: inset 0 0 0 2px #fff2b0, inset 0 -4px 0 rgba(0, 0, 0, .25), 0 0 16px rgba(255, 200, 80, .5); transform: translateX(6px); }
.meta-tab.on b { text-shadow: none; }
.meta-tab .menu-badge { top: -6px; right: -6px; }

/* правая колонка */
.meta-right { position: absolute; z-index: 2; right: max(14px, var(--sa-right)); top: 64px; bottom: max(10px, var(--sa-bottom)); width: min(50vw, 560px);
  display: flex; flex-direction: column; align-items: center; gap: 8px; }
.meta-rank { width: 100%; }
.mr-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-size: 14px; color: #e8dcc0; text-shadow: 0 1px 2px #000; }
.mr-head b { font-size: 17px; font-weight: 900; color: #fff; }
.mr-head span { display: inline-flex; align-items: center; gap: 4px; color: #ffd25e; font-weight: 800; }
.mr-head img { width: 22px; height: 22px; }
.mr-bar { position: relative; height: 16px; border-radius: 999px; background: #0d120e; box-shadow: inset 0 0 0 2px #6b5636, 0 2px 4px rgba(0, 0, 0, .6); overflow: hidden; }
.mr-bar i { position: absolute; inset: 2px auto 2px 2px; border-radius: 999px; background: linear-gradient(180deg, #8af06a, #3fae3a); box-shadow: 0 0 10px #7ddc6a; transition: width .3s; }
.mr-bar em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px #000; }
.meta-nodes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; margin-top: 4px; }
.medal { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; border: 0; background: none; font: inherit; color: #fff; cursor: pointer; }
.md-ring { position: relative; display: grid; place-items: center; width: min(100%, 104px); aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(#5ff0a0 var(--p), #1b2a20 0); padding: 6px; box-shadow: 0 4px 10px rgba(0, 0, 0, .6); }
.md-ring::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #2f5a3c, #102016 75%); box-shadow: inset 0 0 0 3px #0a120c, inset 0 -6px 12px rgba(0, 0, 0, .5); }
.md-ring img { position: relative; width: 62%; height: 62%; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .6)); }
.medal b { font-size: 11.5px; font-weight: 800; line-height: 1.1; text-align: center; text-shadow: 0 1px 2px #000; }
.medal em { font-style: normal; font-size: 13px; font-weight: 900; color: #7dffb0; text-shadow: 0 1px 2px #000; }
.medal.maxed .md-ring { background: conic-gradient(#ffd25e 100%, #ffd25e 0); }
.medal.maxed em { color: #ffd25e; }
.medal.locked .md-ring { background: #1a1c1a; } .medal.locked img { filter: grayscale(1) brightness(.45); } .medal.locked em, .medal.locked b { color: #8a918a; }
.medal.sel .md-ring { box-shadow: 0 0 0 3px #fff2b0, 0 0 18px rgba(255, 220, 120, .7), 0 4px 10px rgba(0, 0, 0, .6); }
.medal.can:not(.sel) .md-ring { animation: medal-can 1.6s ease-in-out infinite; }
@keyframes medal-can { 50% { box-shadow: 0 0 14px rgba(95, 240, 160, .7), 0 4px 10px rgba(0, 0, 0, .6); } }
.medal-up .md-ring { animation: medal-up .35s ease-out; }
@keyframes medal-up { 40% { scale: 1.12; filter: brightness(1.5); } }
.meta-detail { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 8px 14px; border-radius: 12px; text-align: center; font-size: 13px; color: #e8dcc0;
  background: linear-gradient(180deg, rgba(40, 32, 22, .92), rgba(22, 17, 11, .92)); box-shadow: inset 0 0 0 2px #6b5636, 0 4px 10px rgba(0, 0, 0, .5); }
.meta-detail b { font-size: 16px; color: #ffd25e; }
.meta-detail .next { color: #9ef0b8; font-weight: 700; }
.meta-detail .lock { color: #ff8a7e; }
.meta-hint { margin: auto 0 0; font-size: 12px; color: #e8dcc0; text-shadow: 0 1px 2px #000; text-align: center; }
.meta-buy { display: flex; flex-direction: column; align-items: center; min-width: 260px; padding: 8px 30px 10px; border: 0; border-radius: 14px; cursor: pointer; font: inherit; color: #2a1604; touch-action: none;
  background: linear-gradient(180deg, #ffe27a, #f1b72f 55%, #d48f1c); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -5px 0 rgba(0, 0, 0, .22), 0 0 0 3px #3a2208, 0 8px 16px rgba(0, 0, 0, .55); }
.meta-buy b { font-size: 24px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.meta-buy span { display: inline-flex; align-items: center; gap: 4px; font-size: 20px; font-weight: 900; }
.meta-buy span img { width: 26px; height: 26px; }
.meta-buy:active:not(:disabled) { translate: 0 3px; }
.meta-buy.poor span { color: #a3170c; }
.meta-buy:disabled { filter: grayscale(.85) brightness(.75); cursor: default; }
@media (max-height: 430px) {
  .meta-head { padding-top: 6px; } .meta-back { width: 40px; height: 38px; font-size: 28px; }
  .meta-right { top: 54px; gap: 5px; } .md-ring { width: min(100%, 78px); padding: 5px; } .medal b { font-size: 10.5px; }
  .meta-tab { width: 82px; } .meta-tab img { width: 36px; height: 36px; }
  .meta-detail { padding: 5px 10px; font-size: 12px; } .meta-detail b { font-size: 14px; }
  .meta-buy { padding: 5px 24px 7px; } .meta-buy b { font-size: 19px; } .meta-buy span { font-size: 17px; }
  .meta-hint { font-size: 10.5px; }
}
@media (orientation: portrait) { .meta-right { width: 92vw; top: auto; height: 62%; } .meta-tabs { top: 22%; } .meta-bg { background-position: 34% 20%; } }

/* главное меню: подписи кнопок — на каменных плашках с золотой окантовкой (как в Hearthstone), чтобы читались на любом фоне */
.camp-btn b { margin-top: -10px; padding: 3px 9px 4px; border-radius: 8px; font-size: 12px; text-shadow: 0 1px 0 #000;
  background: linear-gradient(180deg, #4a3c2a, #2a2116); box-shadow: inset 0 0 0 1.5px #b8893d, inset 0 -2px 0 rgba(0, 0, 0, .35), 0 3px 6px rgba(0, 0, 0, .6); }
.camp-btn small { margin-top: 2px; padding: 1px 6px; border-radius: 6px; background: rgba(8, 12, 9, .78); }
.camp-btn img { position: relative; z-index: 0; }
.camp-btn b { position: relative; z-index: 1; }
.camp-left .camp-btn, .camp-bottom .camp-btn { padding: 4px 0 0; }
.camp-profile .menu-run { padding: 4px 10px; border-radius: 8px; background: rgba(20, 16, 10, .78); box-shadow: inset 0 0 0 1px #6b5636; }
.camp-title b { padding: 2px 16px 4px; border-radius: 10px; background: linear-gradient(180deg, rgba(40, 32, 22, .85), rgba(22, 17, 11, .85)); box-shadow: inset 0 0 0 1.5px #b8893d, 0 4px 10px rgba(0, 0, 0, .5); }
.camp-title .menu-best { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 6px; background: rgba(8, 12, 9, .7); }
.meta-nodes .tree-node.medal { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; opacity: 1; filter: none; }
.menu.screen.meta-screen[hidden] { display: none; }


/* v93: ускорение ×2 — кнопка рядом с шестерёнкой и окно */
.speed-btn { font-weight: 900; font-size: 15px; letter-spacing: -.02em; }
.speed-btn.on { color: #2a1604; background: linear-gradient(180deg, #ffe27a, #f1b72f); box-shadow: inset 0 0 0 2px #fff2b0, 0 0 12px rgba(255, 210, 94, .7); animation: speed-on 1.6s ease-in-out infinite; }
@keyframes speed-on { 50% { box-shadow: inset 0 0 0 2px #fff2b0, 0 0 20px rgba(255, 210, 94, .95); } }
.info-speed h3 { text-transform: uppercase; letter-spacing: .06em; color: #ffd25e; }
.sp-badge { display: grid; place-items: center; width: 110px; height: 110px; margin: 6px auto 12px; border-radius: 50%; color: #ffd25e; line-height: .9;
  background: radial-gradient(circle, #2a2418 55%, #12100a); box-shadow: 0 0 0 6px #ffd25e, 0 0 0 10px #1a160c, 0 0 30px rgba(255, 210, 94, .35); }
.sp-badge b { font-size: 44px; font-weight: 900; }
.sp-badge small { font-size: 11px; font-weight: 900; letter-spacing: .3em; margin-top: -18px; }
.sp-badge.on { box-shadow: 0 0 0 6px #ffd25e, 0 0 0 10px #1a160c, 0 0 46px rgba(255, 210, 94, .8); }
#speed-btn { color: #f7f1dc; }
#speed-btn.on { color: #2a1604; background: linear-gradient(180deg, #ffe27a, #f1b72f); }


/* v94: лапы босса висят сверху — их обрезанный верх всегда за краем экрана; удар — вниз в землю с поворотом-маятником */
.boss-limb, .arena .boss-limb { top: -66%; height: 110%; width: auto; max-width: none; z-index: 20; object-fit: contain; object-position: 50% 100%;
  transform-origin: 50% -60%; translate: 0 0; rotate: var(--rot0, 0deg); transition: translate .45s ease-out, rotate .45s ease-out, filter .2s;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%); mask-image: linear-gradient(180deg, transparent 0, #000 14%);
  animation: limb-hang 2.6s ease-in-out infinite; }
.boss-limb.left { left: 3%; right: auto; --rot0: 5deg; }
.boss-limb.right { right: 3%; left: auto; --rot0: -5deg; }
@keyframes limb-hang { 50% { rotate: calc(var(--rot0, 0deg) * 1.5); translate: 0 1.5%; } }
.boss-limb.raise { translate: 0 -9%; rotate: calc(var(--rot0, 0deg) * 2); animation: none; transition: translate .35s ease-out, rotate .35s ease-out;
  filter: drop-shadow(0 0 14px #ff3b3b) drop-shadow(0 10px 10px rgba(0, 0, 0, .55)); }
.boss-limb.slam, .boss-limb.right.slam { translate: 0 var(--ty, 0px); rotate: var(--rot, 0deg); animation: none; transition: translate .15s cubic-bezier(.6, 0, 1, .6), rotate .15s ease-in; }
@media (orientation: landscape) { .boss-limb.left { left: 6%; } .boss-limb.right { right: 6%; } }


/* v95: на арене босса отряд переходит в центр дороги (плавно); лапы висят ближе к центру, чтобы доставать до героя */
.arena .slime, .arena #slime, .arena .helper-slot { transition: left .6s ease-in-out, top .6s ease-in-out; }
.arena.arena-boss .boss-limb.left { left: 16%; }
.arena.arena-boss .boss-limb.right { right: 16%; }
@media (orientation: landscape) { .arena.arena-boss .boss-limb.left { left: 20%; } .arena.arena-boss .boss-limb.right { right: 20%; } }


/* v96: капли — опыт (зелёная искра опыта вместо лечения) */
.float.t-xp { color: #b6ff7a; text-shadow: 0 0 8px #5bff3a, 0 2px 0 #0b2a08; font-weight: 900; }
.heal-drop img { filter: hue-rotate(-12deg) saturate(1.3) drop-shadow(0 0 6px #9dff5a); }


/* v97: «ты на мели» — сцена у Мурлиона, когда автопокупка всё потратила */
.event.broke .event-art img { animation: broke-wobble 2.6s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes broke-wobble { 0%, 100% { rotate: 0deg; } 20% { rotate: -1.2deg; } 40% { rotate: 1deg; } 60% { rotate: -.6deg; } }
.event.broke .event-title { color: #ffd25e; }
.event.broke .event-title::before { content: '🪙 '; display: inline-block; animation: broke-coin 1.4s ease-in-out infinite; }
@keyframes broke-coin { 50% { translate: 0 -4px; rotate: 20deg; } }
.event.broke .event-prompt { color: #ff8a7e; font-weight: 800; }


/* v98: склейка между мирами — ворота на шве и заставка; живые детали у дороги */
.world-gate { position: absolute; z-index: 3; width: 150px; translate: -50% -100%; pointer-events: none; image-rendering: pixelated; }
.world-gate img { display: block; width: 100%; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .5)) drop-shadow(0 0 16px rgba(120, 255, 140, .35)); }
.world-gate .wg-sign { position: absolute; left: 50%; top: 23.5%; translate: -50% -50%; width: 52%; font-size: 10px; font-weight: 900; line-height: 1.05; text-align: center; color: #fff2c8;
  text-shadow: 0 1px 0 #2a1604, 0 0 4px #000; white-space: normal; }
.world-gate .wg-mist { position: absolute; left: -30%; right: -30%; bottom: -8%; height: 30%; border-radius: 50%; background: radial-gradient(ellipse, rgba(170, 255, 170, .35), transparent 70%); filter: blur(4px); }
.world-card { position: absolute; z-index: 60; left: 50%; top: 46%; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 26px 12px; border-radius: 14px;
  pointer-events: none; text-align: center; color: #f7f1dc; background: linear-gradient(180deg, rgba(40, 32, 22, .92), rgba(22, 17, 11, .92)); box-shadow: inset 0 0 0 2px #b8893d, 0 10px 30px rgba(0, 0, 0, .6);
  animation: world-card 3.2s ease-in-out forwards; }
.world-card small { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #9ee07a; }
.world-card b { font-size: clamp(20px, 3.6vw, 32px); font-weight: 900; color: #ffd25e; text-shadow: 0 2px 0 #000; }
.world-card span { font-size: 12px; color: #e8dcc0; }
@keyframes world-card { 0% { opacity: 0; scale: .8; } 12% { opacity: 1; scale: 1.04; } 20% { scale: 1; } 80% { opacity: 1; } 100% { opacity: 0; translate: -50% -60%; } }

.road-fx { position: absolute; z-index: 2; pointer-events: none; width: calc(10px * var(--s)); height: calc(10px * var(--s)); border-radius: 50%; animation: road-fx 2.6s ease-out forwards; }
@keyframes road-fx { 0% { opacity: 0; translate: 0 0; } 15% { opacity: .9; } 100% { opacity: 0; translate: var(--dx) -46px; } }
.road-fx.fx-steam { width: calc(22px * var(--s)); height: calc(22px * var(--s)); background: radial-gradient(circle, rgba(255, 255, 255, .55), transparent 70%); filter: blur(1px); }
.road-fx.fx-spores { background: radial-gradient(circle, #f7d4ff, #c77dff 50%, transparent 70%); box-shadow: 0 0 8px #e3a6ff; }
.road-fx.fx-confetti { border-radius: 2px; width: calc(6px * var(--s)); height: calc(9px * var(--s)); background: hsl(calc(var(--s) * 300deg) 80% 62%); animation-name: road-confetti; }
@keyframes road-confetti { 0% { opacity: 0; translate: 0 -40px; rotate: 0deg; } 15% { opacity: 1; } 100% { opacity: 0; translate: var(--dx) 30px; rotate: 540deg; } }
.road-fx.fx-glints { width: calc(14px * var(--s)); height: calc(14px * var(--s)); border-radius: 0; background: conic-gradient(from 45deg, transparent 0 20%, #fff7c8 25%, transparent 30% 45%, #fff7c8 50%, transparent 55% 70%, #fff7c8 75%, transparent 80%); animation-name: road-glint; }
@keyframes road-glint { 0%, 100% { opacity: 0; scale: .3; } 40% { opacity: 1; scale: 1; } }
.road-fx.fx-bubbles { background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .8), rgba(140, 220, 180, .35) 45%, rgba(80, 160, 120, .15) 70%); box-shadow: inset 0 0 0 1px rgba(200, 255, 220, .6); }


/* v99: шкала опыта снова заливается (пустой div схлопывался в 0 высоты) */
.lvl-box .bar.xp { position: relative; }
.lvl-box .bar.xp #xp-fill { position: absolute; left: 0; top: 0; bottom: 0; height: auto; min-width: 0; transition: width .3s ease-out; }
.lvl-box .bar.xp span { position: relative; z-index: 1; }

/* полоса добычи: последние предметы под портретом героя */
.loot-strip { position: absolute; z-index: 25; left: 10px; top: 84px; display: flex; flex-direction: column; gap: 4px; pointer-events: auto; }
.loot { position: relative; width: 38px; height: 38px; padding: 2px; border: 0; border-radius: 9px; cursor: pointer;
  background: radial-gradient(circle, var(--tint, #3b3f45) 0 45%, #14100a 100%); box-shadow: inset 0 0 0 2px var(--edge, #9a9aa8), 0 2px 5px rgba(0, 0, 0, .55); }
.loot.uncommon { --tint: #1f4a2b; --edge: #5ee07a; } .loot.rare { --tint: #1d3560; --edge: #5aa0ff; } .loot.epic { --tint: #3d2160; --edge: #c07bff; }
.loot.legendary { --tint: #5a3d0e; --edge: #ff6b4a; } .loot.lunar { --tint: #163f45; --edge: #5e8bff; }
.loot img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.loot b { position: absolute; right: -3px; bottom: -3px; min-width: 15px; padding: 0 3px; border-radius: 7px; font-size: 10px; font-weight: 900; line-height: 15px; color: #fff; background: #1d1a14; box-shadow: 0 0 0 1px var(--edge, #999); }
.loot.more { display: grid; place-items: center; font-size: 18px; font-weight: 900; color: #f7f1dc; --edge: #6b5636; }
.loot-new { animation: loot-new .7s ease-out; }
@keyframes loot-new { 0% { scale: 1.6; filter: brightness(2) drop-shadow(0 0 10px #ffd25e); } 100% { scale: 1; filter: none; } }
@media (max-height: 430px) { .loot-strip { top: 72px; gap: 3px; } .loot { width: 32px; height: 32px; } .loot-strip .loot:nth-child(n+6):not(.more) { display: none; } }


/* v100: лавка Мурлиона как в Slay the Spire — витрина на сукне: 7 карт, расходники, услуга-монета */
.merchant-panel { width: min(100%, 900px); }
.merchant-say small { display: block; margin-top: 2px; font-style: normal; font-size: 10.5px; color: #c9b8e6; }
.shop-board { position: relative; padding: 12px 12px 10px; border-radius: 14px; background-color: #2c4741;
  background-image: repeating-linear-gradient(135deg, rgba(255, 210, 94, .05) 0 2px, transparent 2px 22px), repeating-linear-gradient(45deg, rgba(255, 210, 94, .05) 0 2px, transparent 2px 22px);
  box-shadow: inset 0 0 0 2px #1b2e29, inset 0 0 30px rgba(0, 0, 0, .45), 0 10px 26px rgba(0, 0, 0, .55); }
.shop-cards.merchant-list { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; }
.shop-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .15s; z-index: 1; }
.shop-item .card.tcg { container-type: inline-size; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border: 0; background: none; box-shadow: none;
  min-height: 0; text-align: center; overflow: visible; filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .6)); width: 100%; margin: 0; cursor: zoom-in; }
.shop-item .card.tcg:disabled { opacity: 1; }
.shop-item.special::before { content: ''; position: absolute; inset: -6px -4px 22px; border-radius: 12px; background: radial-gradient(ellipse at 50% 40%, rgba(255, 210, 94, .22), transparent 70%); z-index: -1; }
.shop-item.zoom { z-index: 30; transform: scale(1.9) translateY(-14%); }
.shop-item:first-child.zoom { transform-origin: left center; } .shop-item:last-child.zoom { transform-origin: right center; }
.shop-item.sold .card.tcg { filter: grayscale(.9) brightness(.55); }
.shop-sale { position: absolute; top: 18%; right: -6px; padding: 2px 6px; border-radius: 6px; font-style: normal; font-size: 11px; font-weight: 900; color: #fff; background: #d8322b;
  box-shadow: 0 2px 0 #7a120d; rotate: 12deg; z-index: 2; }
.shop-evo { position: absolute; top: -6px; left: 50%; translate: -50% 0; white-space: nowrap; font-style: normal; font-size: 9px; font-weight: 900; color: #2a1604; background: #ffd25e; padding: 1px 6px; border-radius: 6px; z-index: 2; }
.shop-price { padding: 3px 8px; border: 0; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 900; color: #fff4c8; cursor: pointer; white-space: nowrap;
  background: rgba(10, 16, 14, .82); box-shadow: inset 0 0 0 1px rgba(255, 210, 94, .5); }
.shop-price s { margin-right: 4px; font-size: 10px; color: #a9a6a0; }
.shop-item.sale .shop-price:not(.done):not(.poor) { color: #9dff7a; box-shadow: inset 0 0 0 1px #6bd26b; }
.shop-price.poor { color: #ff6b5e; box-shadow: inset 0 0 0 1px rgba(255, 107, 94, .5); }
.shop-price.done { color: #9a9a9a; cursor: default; }
.shop-price:not(.done):not(.poor):hover { background: #3f5f2e; }
.shop-row2 { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-top: 10px; }
.shop-goods { display: flex; gap: 8px; }
.shop-good { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 84px; padding: 4px 2px; border: 0; border-radius: 10px; font: inherit; color: #f7f1dc; cursor: pointer;
  background: rgba(10, 16, 14, .45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.shop-good img { width: 40px; height: 40px; image-rendering: pixelated; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
.shop-good small { font-size: 9.5px; line-height: 1.1; text-align: center; }
.shop-good b { font-size: 12px; color: #fff4c8; } .shop-good b.poor { color: #ff6b5e; }
.shop-good.done { opacity: .45; }
.shop-service { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.shop-coin { width: 64px; height: 64px; padding: 10px; border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 40% 35%, #ffe68a, #e0a526 55%, #9c6a12); box-shadow: inset 0 0 0 3px #fff2b0, inset 0 -4px 0 rgba(0, 0, 0, .25), 0 4px 10px rgba(0, 0, 0, .5); }
.shop-coin img { width: 100%; height: 100%; object-fit: contain; }
.shop-coin.poor { filter: grayscale(.6) brightness(.8); }
.shop-coin-price { font-size: 13px; color: #fff4c8; } .shop-coin-price.poor { color: #ff6b5e; }
.shop-service > small { font-size: 9.5px; color: #e8dcc0; }
.shop-mentor { position: absolute; right: 0; bottom: 100%; margin-bottom: 6px; display: flex; flex-direction: column; gap: 4px; width: 220px; padding: 6px; border-radius: 10px; z-index: 40;
  background: #1d1a14; box-shadow: inset 0 0 0 2px #b8893d, 0 8px 18px rgba(0, 0, 0, .6); }
.shop-mentor button { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 0; border-radius: 8px; font: inherit; color: #f7f1dc; text-align: left; cursor: pointer; background: rgba(255, 255, 255, .06); }
.shop-mentor button:hover { background: rgba(255, 210, 94, .18); }
.shop-mentor img { width: 26px; height: 26px; }
.shop-mentor span { display: flex; flex-direction: column; font-size: 12px; font-weight: 800; } .shop-mentor em { font-style: normal; font-size: 10px; color: #9ee07a; }
.shop-mentor p { margin: 4px; font-size: 12px; color: #cdbf98; }
@media (max-height: 430px) {
  .merchant-panel { gap: 4px; padding-top: 4px; padding-bottom: 4px; }
  .merchant-say { font-size: 10px; } .merchant-say small { display: none; }
  .merchant-head b { font-size: 16px; }
  .shop-board { padding: 6px 8px; }
  .shop-cards.merchant-list { gap: 5px; width: min(100%, 640px); margin: 0 auto; }
  .shop-row2 { margin-top: 4px; }
  .shop-good { width: 70px; } .shop-good img { width: 30px; height: 30px; }
  .shop-coin { width: 46px; height: 46px; padding: 7px; }
  .shop-item.zoom { transform: scale(1.7) translateY(-8%); }
  #merchant-close { padding: 6px; font-size: 14px; }
}
/* на витрине карта компактная: рисунок, название, редкость; описание — в окне по тапу */
.shop-item .tcg-bot .card-desc, .shop-item .tcg-bot .card-sym, .shop-item .tcg-bot .combo-h, .shop-item .tcg-bot .sym-row, .shop-item .tcg-bot [class^="combo"] { display: none; }
.shop-item .tcg-bot { min-height: 18cqw; }
.shop-item .card.tcg { cursor: pointer; }
.info-btn.buy { background: linear-gradient(180deg, #ffe27a, #e0a526); color: #2a1604; }
.info-btn.buy.poor { background: #5a4a3a; color: #ff8a7e; }
.info-btn.buy s { font-size: 11px; opacity: .7; margin-left: 4px; }
#info-modal { z-index: 300; }
.shop-item .card-badge { display: none; }
.shop-item .card-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.shop-item .card-name { display: block; font-size: 11.5cqw; line-height: 1.2; padding: 0 6cqw; }
.shop-item .card-rarity { font-size: 9.5cqw; }
.info-item .card-sym img, .info-item .sym-row img { width: 22px; height: 22px; }
.info-item .card-sym { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 8px; font-size: 12px; }

/* v101: стартовый слайм — покадровый (assets/hero/slime): крупнее холст, центр и линия ног на прежнем месте */
#slime.base-frames #evolved-art.frames { width: 260px; height: 260px; left: -87px; top: -141px; }


/* v102: флажок категории пассивки вместо «новая»; «★ Новый» — только у открытых достижениями предметов */
.pcat { display: inline-block; margin-left: 8px; padding: 1px 8px 2px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; vertical-align: middle;
  color: var(--pc); background: color-mix(in srgb, var(--pc) 16%, rgba(0, 0, 0, .35)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 55%, transparent); }
.card.passive .card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; }
.card.passive .card-head .card-rarity { margin-left: 8px; }
.card-badge:empty { display: none; }
.card-badge.new { color: #2a1604; background: #ffd25e; }

/* v103: тень стартового слайма — плотнее и чётче, тоньше по высоте (он лежит на земле, а не парит) */
.arena:has(#slime.base-frames) .hero-shadow { height: 9px; margin-top: -5px; background: radial-gradient(ellipse, rgba(0, 0, 0, .62) 0, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .18) 66%, transparent 72%); }


/* v104: Воин — девиз направления, символы лута и подсказка «Лут зовёт» */
.evolution-option .evo-motto { display: block; font-style: normal; font-size: 11px; color: #cdbf98; }
.evolution-option .evo-syms { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-style: normal; font-size: 11px; font-weight: 800; color: #ffd25e; }
.evolution-option .evo-syms img { width: 18px; height: 18px; }
.evolution-option.hint { box-shadow: inset 0 0 0 2px #ffd25e, 0 0 18px rgba(255, 210, 94, .5); }

/* v105: опыт — золотым кольцом вокруг портрета (верхняя полоса убрана), номер уровня на портрете; тосты ниже шапки */
.arena .lvl-box { display: none; }
.arena .portrait { width: 58px; height: 58px; }
.arena .portrait svg { display: block; }
.arena .portrait .ring-hp, .arena .portrait .ring-shield, .arena .portrait .ring-track { display: none; }
.portrait .ring-xp-track, .portrait .ring-xp { display: none; }
.arena .portrait .ring-xp-track { display: inline; stroke: #15120a; stroke-width: 5; }
.arena .portrait .ring-xp { display: inline; stroke: #f0b83a; stroke-width: 3.6; stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset .3s ease-out; filter: drop-shadow(0 0 2px #ffcf5a99); }
.arena .portrait img { left: 6px; top: 6px; width: 46px; height: 46px; box-shadow: 0 0 0 1px #000; }
.portrait-lvl { display: none; }
.arena .portrait-lvl { display: block; position: absolute; left: 50%; bottom: -5px; translate: -50% 0; min-width: 20px; padding: 0 4px; box-sizing: border-box;
  font-size: 11px; line-height: 15px; font-weight: 900; text-align: center; color: #2a1a04; border-radius: 8px;
  background: linear-gradient(180deg, #ffe48a, #e0a82a); box-shadow: 0 0 0 1px #000, 0 2px 3px rgba(0, 0, 0, .5); }
#portrait-xp { display: none; }
.arena #portrait-xp { display: inline; margin-left: 6px; font-style: normal; font-size: 10px; font-weight: 800; color: #f0c860; }
.arena .scene-top { top: calc(max(6px, var(--sa-top)) + 8px); }
@media (orientation: landscape) and (min-width: 700px) { .boss-bar { top: calc(max(6px, var(--sa-top)) + 52px); } }
.toast { top: calc(max(6px, var(--sa-top)) + 168px); }
.arena .hero-card-text small#portrait-name { max-width: 210px; }
.arena #portrait-form { max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
.arena .portrait { border-radius: 50%; }
.arena .portrait svg { z-index: 1; }
.arena .portrait-lvl { z-index: 2; }
.arena .portrait img { clip-path: circle(50%); }
.arena .portrait img.fallback { clip-path: circle(31.2% at 50% 38.8%); }
/* v108: окно «Ты получил» — предметы из договора картами, крупная кнопка «Забрать» */
.cards.gift-mode #cards-title small { display: block; font-size: 12px; color: #cfc6a0; font-weight: 700; letter-spacing: .04em; }
.cards.gift-mode #cards-list .card { cursor: pointer; animation: gift-in .45s ease-out both; }
.cards.gift-mode #cards-list .card:nth-child(2) { animation-delay: .08s; } .cards.gift-mode #cards-list .card:nth-child(3) { animation-delay: .16s; }
.cards.gift-mode #cards-list .card:nth-child(4) { animation-delay: .24s; } .cards.gift-mode #cards-list .card:nth-child(5) { animation-delay: .32s; }
@keyframes gift-in { from { opacity: 0; transform: translateY(18px) scale(.9) rotateY(70deg); } to { opacity: 1; transform: none; } }
.cards.gift-mode #cards-close { display: block; margin: 12px auto 0; min-width: 180px; padding: 10px 26px; font-size: 17px; font-weight: 900; color: #10200c;
  background: linear-gradient(180deg, #a6f27a, #4fbf3a); border: 0; border-radius: 12px; box-shadow: 0 0 0 2px #0b1a08, 0 4px 0 #2a6a1e, 0 0 16px #7dff6a55; cursor: pointer; }
.cards.gift-mode #cards-list { flex-wrap: nowrap; }
.cards.gift-mode #cards-list .card { min-width: 0; }
/* «Забрать» всегда на экране: высокие карты не уводят кнопку за край */
.cards.gift-mode #cards-close { position: fixed; left: 50%; bottom: calc(10px + var(--sa-bottom)); translate: -50% 0; margin: 0; z-index: 6; }
.cards.gift-mode #cards-list { padding-bottom: 64px; }

/* Пространство для прыжка и дуги меча: кадры 384 px, земля на 300 px. */
#slime.action-frames #evolved-art.frames { width: 480px; height: 480px; left: -197px; top: -313px; }
.info-stage img.frames.action-frames { width: 336px; height: 336px; max-width: none; }
.info-stage:has(img.action-frames) { width: 336px; max-width: 100%; height: 336px; }
#evolved-art.frames.hero-hit-flash { animation: hero-red-flash .22s linear !important; }
@keyframes hero-red-flash {
  0%, 100% { filter: none; }
  20%, 65% { filter: brightness(.6) sepia(1) saturate(22) hue-rotate(320deg); }
}

/* v110: старая карта, но короче: в панели — крупные числа с подписью вместо текста, строка символа; подробности — по тапу */
.card.tcg .card-desc.short { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.card.tcg .short-stats { display: flex; justify-content: center; gap: 6px; width: 100%; }
.card.tcg .short-stat { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.card.tcg .short-stat b { font-size: clamp(13px, 11cqw, 22px); font-weight: 900; line-height: 1.05; color: #fff; text-shadow: 0 2px 0 #000, 0 0 6px rgba(0, 0, 0, .7); white-space: nowrap; }
.card.tcg .short-stats:has(.short-stat + .short-stat) .short-stat b { font-size: clamp(11px, 9cqw, 18px); }
.card.tcg .short-stat small { font-size: clamp(8px, 5.4cqw, 11px); font-weight: 700; line-height: 1.1; color: #cfe0c4; }
.card.tcg .short-cost { font-size: clamp(8px, 5.2cqw, 10px); font-weight: 800; color: #ff9aa8; }
.card.tcg .card-links { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: auto; font-size: clamp(8px, 5.2cqw, 10px); font-weight: 800; }
.card.tcg .link-sym { display: inline-flex; align-items: center; gap: 2px; padding: 1px 5px 1px 2px; border-radius: 8px; color: #f4f0dc;
  background: color-mix(in srgb, var(--sc) 28%, rgba(0, 0, 0, .55)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc) 70%, transparent); }
.card.tcg .link-sym img { width: 13px; height: 13px; image-rendering: pixelated; }
.card.tcg .link-sym.up { color: #fff; box-shadow: inset 0 0 0 1px #fff, 0 0 8px var(--sc); animation: combo-glow 1.2s ease-in-out infinite; }
.card.tcg .link-combo { padding: 1px 5px; border-radius: 8px; color: #2a1a04; background: #ffd25e; box-shadow: 0 0 8px #ffd25e88; }
.card.tcg .link-more { opacity: .6; color: #f4f0dc; }
/* подробная карточка: синергия — свои предметы того же символа */
.info-links { margin-top: 8px; text-align: left; }
.info-links .link-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.info-links .link-item { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px 2px 2px; border-radius: 8px; font-size: 11px; font-weight: 700; color: #e6eedc; background: rgba(255, 255, 255, .08); }
.info-links .link-item img { width: 18px; height: 18px; image-rendering: pixelated; }
/* в подробном окне символ и комбо — широкими строками: подпись сверху, содержимое в ряд */
.info-item :is(.card-sym, .card-combo) { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; margin-top: 8px; padding: 6px 8px; border-radius: 10px; text-align: left; box-sizing: border-box; }
.info-item :is(.card-sym, .card-combo) .combo-h { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.info-item .card-sym .sym-row, .info-item .card-combo .combo-slots { display: flex; flex-direction: row; align-items: center; gap: 6px; }
.info-item .card-combo .combo-slots .slot, .info-item .card-sym .slot { width: 26px; height: 26px; display: grid; place-items: center; }
.info-item .card-combo .combo-slots img, .info-item .card-sym .slot img { width: 22px; height: 22px; image-rendering: pixelated; }
.info-item :is(.card-sym, .card-combo) small:not(.combo-h) { font-size: 11px; line-height: 1.3; }
/* v111: покадровые формы Воина — кадр вдвое больше рамки картинки формы, с тем же центром (запас под выпады и вспышки) */
#slime.warrior-frames #evolved-art.frames { width: 200px; height: 200px; left: -57px; top: -80px; transform-origin: 50% 72.5%; image-rendering: auto; }
#slime.warrior-frames.size-big #evolved-art.frames { width: 300px; height: 300px; left: -107px; top: -155px; }
#slime.warrior-frames.size-huge #evolved-art.frames { width: 348px; height: 348px; left: -131px; top: -191px; }
.info-stage img.frames.double { width: 300px; height: 300px; max-width: none; margin: -60px 0 -40px; image-rendering: auto; }
/* v112: снаряды Воина — спрайт летит от героя к цели, сзади размытые копии (след) */
.fx.fx-shot { width: var(--w); height: var(--h); background: center / contain no-repeat; image-rendering: pixelated; pointer-events: none; z-index: 40;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .35)); }
.fx.fx-shot.ghost { opacity: var(--o); filter: blur(1.5px); }
/* быстрый снаряд — спидлайн за спиной (элемент повёрнут по полёту, хвост уходит назад по оси X) */
.fx.streak::before { content: ""; position: absolute; right: 50%; top: 50%; width: var(--len, 60px); height: 3px; transform: translateY(-50%);
  border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75)); pointer-events: none; }
/* v113: подложка на сенсорных устройствах — видна только встроенная игра (повёрнутая, если телефон вертикально) */
html.rot-host, html.rot-host body { margin: 0; height: 100%; overflow: hidden; background: #050805; }
html.rot-host body > *:not(#rot-frame):not(script) { display: none !important; }
#rot-frame { position: fixed; left: 0; top: 0; border: 0; transform-origin: 0 0; background: #050805; display: block; }
/* v114: итоги забега на горизонтальном экране — две колонки: итог и кнопка слева, подробности справа */
.results-main, .results-more { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
@media (orientation: landscape) {
  #results .menu-panel.results-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; align-items: start;
    width: min(900px, 96vw); max-width: none; max-height: 94vh; overflow: hidden; padding: 12px 16px; box-sizing: border-box; }
  #results .results-main { max-height: calc(94vh - 24px); overflow-y: auto; }
  #results .results-more { max-height: calc(94vh - 24px); overflow-y: auto; padding-right: 4px; }
  #results .results-main .menu-title { margin: 0; font-size: 22px; }
  #results .results-main .sheet-note { margin: 0; }
  #results .results-more .results-h:first-child { margin-top: 0; }
  #results .results-crystals { font-size: 20px; }
  #results #results-ok { margin-top: auto; position: sticky; bottom: 0; }
  #results .session-code { padding: 4px 8px; }
}
/* v114: заставка появления босса и «Босс повержен!» */
.fx.fx-letterbox { width: var(--w); height: var(--h); z-index: 60; pointer-events: none; }
.fx.fx-letterbox::before, .fx.fx-letterbox::after { content: ''; position: absolute; left: 0; right: 0; height: 13%; background: #050505; box-shadow: 0 0 18px #000;
  animation: lb-in 1.9s cubic-bezier(.2,.8,.3,1) both; }
.fx.fx-letterbox::before { top: 0; --y: -100%; }
.fx.fx-letterbox::after { bottom: 0; --y: 100%; }
@keyframes lb-in { 0% { transform: translateY(var(--y)); } 18%, 80% { transform: none; } 100% { transform: translateY(var(--y)); } }
.fx.fx-bossintro { z-index: 61; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none;
  font-family: 'Rubik', system-ui, sans-serif; animation: boss-intro 1.9s ease-out both; white-space: nowrap; }
.fx-bossintro small { font-size: 13px; font-weight: 800; letter-spacing: .25em; text-transform: uppercase; color: #ffd0c0; text-shadow: 0 2px 0 #000; }
.fx-bossintro b { font-size: 54px; font-weight: 900; line-height: .95; letter-spacing: .08em; color: #ff3b3b;
  -webkit-text-stroke: 3px #1a0505; paint-order: stroke fill; text-shadow: 0 4px 0 #000, 0 0 26px #ff2a2a; }
.fx-bossintro em { margin-top: 4px; font-style: normal; font-size: 24px; font-weight: 900; color: #fff1e0; -webkit-text-stroke: 2px #000; paint-order: stroke fill; text-shadow: 0 3px 0 #000; }
@keyframes boss-intro { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); filter: blur(4px); } 14% { opacity: 1; transform: translate(-50%, -50%) scale(.94); filter: none; }
  22% { transform: translate(-50%, -50%) scale(1.04); } 30%, 78% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1.05); } }
.fx.fx-bossflash { width: var(--w); height: var(--h); z-index: 59; pointer-events: none; background: radial-gradient(circle at 50% 42%, rgba(255, 240, 180, .85), rgba(255, 210, 94, .25) 40%, transparent 70%);
  animation: boss-flash .7s ease-out both; }
@keyframes boss-flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
.fx.fx-bossdown { z-index: 61; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 26px 12px; border-radius: 14px; pointer-events: none;
  font-family: 'Rubik', system-ui, sans-serif; white-space: nowrap; background: linear-gradient(180deg, rgba(60, 40, 8, .92), rgba(24, 16, 4, .92));
  box-shadow: inset 0 0 0 2px #ffd25e, 0 0 0 2px #000, 0 0 30px #ffd25e88; animation: boss-down 2.4s ease-out both; }
.fx-bossdown b { font-size: 30px; font-weight: 900; letter-spacing: .04em; color: #ffd25e; -webkit-text-stroke: 2px #2a1a04; paint-order: stroke fill; text-shadow: 0 3px 0 #000, 0 0 16px #ffb02e; }
.fx-bossdown em { font-style: normal; font-size: 15px; font-weight: 800; color: #f3ead0; text-decoration: line-through; text-decoration-color: #ff5a4a; text-decoration-thickness: 2px; }
@keyframes boss-down { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-6deg); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(2deg); }
  20%, 82% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); } 100% { opacity: 0; transform: translate(-50%, -70%) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .fx.fx-bossintro, .fx.fx-bossdown { animation-duration: .01s; } }
@media (orientation: landscape) {
  #results .results-main { gap: 6px; }
  #results .session-code { display: inline-flex; flex-direction: row; align-items: baseline; gap: 6px; margin-top: 4px; padding: 3px 10px; }
  #results .session-code b { font-size: 20px; letter-spacing: .08em; }
  #results .session-code small { display: none; }
  #results .results-main .results-stats div { padding: 5px 8px; }
  #results #results-ok { padding-top: 8px; padding-bottom: 8px; }
}
/* v115: сундук ждёт, а его не открывают — иконка подпрыгивает и раскачивается, кант горит ярче */
.dock #dock-chest.nag, .arena .hud-chest.nag { animation: chest-nag 1.6s ease-in-out infinite; box-shadow: inset 0 0 0 2px #ffe48a, 0 0 18px #ffd25e, 0 3px 0 rgba(0, 0, 0, .45); }
.dock #dock-chest.nag img, .arena .hud-chest.nag img { animation: chest-nag-lid 1.6s ease-in-out infinite; }
@keyframes chest-nag { 0%, 52%, 100% { transform: none; } 58% { transform: translateY(-5px) rotate(-7deg) scale(1.06); } 66% { transform: translateY(-3px) rotate(6deg) scale(1.06); }
  74% { transform: translateY(-1px) rotate(-4deg); } 82% { transform: rotate(2deg); } }
@keyframes chest-nag-lid { 0%, 55%, 100% { filter: none; } 62%, 75% { filter: brightness(1.5) drop-shadow(0 0 6px #ffd25e); } }
@media (prefers-reduced-motion: reduce) { .dock #dock-chest.nag, .arena .hud-chest.nag, .dock #dock-chest.nag img { animation: none; } }
/* v116: кнопки окна карт в стиле рамок: тёмный «обсидиан», слизисто-зелёный кант с подтёками, счётчики — камни-ромбы как на картах */
#cards .cards-tools { --slime: #8cff3a; --slime-d: #3f9a1c; display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 10px; width: min(620px, 100%); margin: 14px auto 4px; }
#cards .cards-tools[hidden] { display: none; }
#cards .cards-tools .tool-row { display: contents; }
#cards :is(.tool-btn, .autopick-switch) { position: relative; display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 12px 8px; border: 0; border-radius: 12px;
  font: inherit; color: #eaf6d8; text-align: left; cursor: pointer;
  background: radial-gradient(120% 90% at 50% 0%, rgba(140, 255, 58, .10), transparent 60%), linear-gradient(180deg, #23291f, #121610);
  box-shadow: inset 0 0 0 2px #0b0e09, inset 0 0 0 3px var(--slime-d), inset 0 1px 0 4px rgba(255, 255, 255, .04), 0 0 0 1px #000, 0 4px 0 rgba(0, 0, 0, .45), 0 0 14px rgba(140, 255, 58, .12); }
/* подтёки слизи по нижнему краю */
#cards :is(.tool-btn, .autopick-switch)::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: -5px; height: 8px; pointer-events: none;
  background: radial-gradient(4px 6px at 12% 0, var(--slime) 60%, transparent 62%), radial-gradient(3px 5px at 38% 0, var(--slime) 60%, transparent 62%),
    radial-gradient(5px 7px at 66% 0, var(--slime) 60%, transparent 62%), radial-gradient(3px 4px at 88% 0, var(--slime) 60%, transparent 62%);
  filter: drop-shadow(0 1px 0 #1d4a0c); opacity: .9; }
#cards :is(.tool-btn, .autopick-switch):hover { box-shadow: inset 0 0 0 2px #0b0e09, inset 0 0 0 3px var(--slime), 0 0 0 1px #000, 0 4px 0 rgba(0, 0, 0, .45), 0 0 18px rgba(140, 255, 58, .3); }
#cards :is(.tool-btn, .autopick-switch):active { transform: translateY(2px); }
#cards .tool-btn i, #cards .autopick-switch > i { font-style: normal; font-size: 22px; line-height: 1; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); }
#cards .tool-btn span, #cards .autopick-switch > span:not(.sw) { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
#cards :is(.tool-btn, .autopick-switch) b { font-size: 14px; font-weight: 900; color: #f2ffe0; text-shadow: 0 1px 0 #000; }
#cards :is(.tool-btn, .autopick-switch) small { font-size: 10px; color: #a9c39a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* счётчик — камень-ромб, как камень редкости на карте: повёрнута только подложка, цифра прямая */
#cards .tool-btn em { position: absolute; top: -10px; right: -8px; width: 26px; height: 26px; min-width: 0; padding: 0; border-radius: 0; background: none; box-shadow: none;
  display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 900; color: #fff; text-shadow: 0 1px 0 #000, 0 0 3px #000; z-index: 1; }
#cards .tool-btn em::before { content: ''; position: absolute; inset: 3px; z-index: -1; rotate: 45deg; border-radius: 3px;
  background: linear-gradient(135deg, #fff 0%, var(--gem) 38%, color-mix(in srgb, var(--gem) 45%, #000) 100%); box-shadow: 0 0 0 2px #0b0e09, 0 0 8px var(--gem); }
#cards .tool-btn.reroll { --gem: #4fb4ff; }
#cards .tool-btn.banish { --gem: #ff5a5a; }
#cards .tool-btn:disabled { filter: grayscale(.9) brightness(.65); cursor: default; }
#cards.banish-mode #cards-banish { --slime: #ff6b6b; --slime-d: #a62a2a; box-shadow: inset 0 0 0 2px #0b0e09, inset 0 0 0 3px #ff5a5a, 0 0 0 1px #000, 0 0 18px #ff5a5a88; animation: banish-pulse .8s ease-in-out infinite; }
/* автовыбор — переключатель в той же плашке */
#cards .autopick-switch { width: auto; justify-content: flex-start; }
#cards .autopick-switch .sw { margin-left: auto; flex: none; }
/* «Пропустить» / «Не брать» — в том же стиле, тише */
#cards.play-mode #cards-close:not(.hidden) { --slime: #c9d6b8; --slime-d: #59644c; position: relative; display: block; margin: 12px auto 0; min-width: 210px; padding: 9px 22px; border: 0; border-radius: 12px;
  font-family: 'Rubik', system-ui, sans-serif; font-size: 14px; font-weight: 800; color: #dfe8d2; cursor: pointer;
  background: linear-gradient(180deg, #23291f, #121610); box-shadow: inset 0 0 0 2px #0b0e09, inset 0 0 0 3px #59644c, 0 0 0 1px #000, 0 4px 0 rgba(0, 0, 0, .45); }
#cards.play-mode #cards-close:not(.hidden):hover { color: #fff; box-shadow: inset 0 0 0 2px #0b0e09, inset 0 0 0 3px var(--slime), 0 0 0 1px #000, 0 4px 0 rgba(0, 0, 0, .45); }
/* узкий экран: автовыбор — отдельной строкой */
@media (max-width: 560px) { #cards .cards-tools { grid-template-columns: 1fr 1fr; } #cards .autopick-switch { grid-column: 1 / -1; } }

/* ---------- обучение: затемнение, светящееся окно над целью, облачко ---------- */
.tut { position: fixed; inset: 0; z-index: 6000; pointer-events: auto; }
.tut[hidden] { display: none; }
.tut.no-hole { background: rgba(4, 8, 4, .66); }
.tut-hole { position: fixed; border-radius: 14px; border: 3px solid #ffe07a; pointer-events: none;
  box-shadow: 0 0 0 200vmax rgba(4, 8, 4, .66), 0 0 14px 3px rgba(255, 224, 122, .85);
  animation: tut-glow 1.2s ease-in-out infinite; transition: left .2s, top .2s, width .2s, height .2s; }
@keyframes tut-glow {
  50% { box-shadow: 0 0 0 200vmax rgba(4, 8, 4, .66), 0 0 26px 9px rgba(255, 224, 122, .55); border-color: #fff4c4; }
}
.tut-hand { position: absolute; right: -14px; bottom: -22px; font-size: 30px; font-style: normal; filter: drop-shadow(0 2px 2px #000); animation: tut-tap .9s ease-in-out infinite; }
@keyframes tut-tap { 50% { transform: translate(-5px, -7px) scale(.92); } }
.tut-box { position: fixed; width: min(340px, calc(100vw - 32px)); display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; background: #f4ecd6; color: #2a2116; border: 3px solid #1d1a14; border-radius: 12px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .35), 0 0 0 2px #c9b98f inset; animation: tut-pop .25s ease-out; }
@keyframes tut-pop { from { transform: scale(.85); opacity: 0; } }
.tut-face { width: 44px; height: 44px; object-fit: contain; flex: none; image-rendering: pixelated; }
.tut-body { flex: 1; min-width: 0; }
.tut-body b { display: block; font-size: 15px; margin-bottom: 4px; }
.tut-body p { margin: 0 0 10px; font-size: 13px; line-height: 1.35; }
.tut-body p b { display: inline; font-size: inherit; margin: 0; color: #8a4a00; }
.tut-ok { display: block; margin-left: auto; min-height: 44px; min-width: 120px; padding: 10px 22px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
  background: #7ccf5a; color: #132b16; border: 0; box-shadow: inset 0 -4px 0 #488b32, 0 0 0 3px #1d1a14; }
.tut-ok:active { transform: translateY(2px); }
@media (prefers-reduced-motion: reduce) { .tut-hole, .tut-hand, .tut-box { animation: none; } }
/* v117: Проклятый — карта мутации (бледная кость и плоть) и съеденное место помощника */
.card.mutation { --tint: #3a2a26; --edge: #e8d6b8; --glow: #f1dcb055; box-shadow: inset 0 0 0 2px #e8d6b8, 0 0 14px #c98a7a66 !important;
  background: radial-gradient(120% 80% at 50% 0%, rgba(232, 214, 184, .14), transparent 60%), linear-gradient(180deg, #2c2220, #181212) !important; }
.card.mutation .card-name { color: #f3e6cf; }
.card.mutation .card-rarity { color: #e8a89a; }
.card.mutation .card-art img { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }
.card.mutation .card-badge { display: inline-flex; align-items: center; gap: 4px; color: #f3e6cf; background: rgba(60, 20, 18, .85); border-color: #c98a7a; }
.card.mutation .card-badge img { width: 16px; height: 16px; image-rendering: pixelated; }
.card.mutation.upgrade { box-shadow: inset 0 0 0 2px #ffd25e, 0 0 16px #ffd25e55 !important; }
.helper-slot.flesh img { animation: flesh-pulse 1.8s ease-in-out infinite !important; filter: drop-shadow(0 0 6px rgba(201, 138, 122, .6)) !important; }
.helper-slot.flesh::before { background: rgba(120, 40, 30, .35) !important; }
@keyframes flesh-pulse { 50% { transform: scale(1.08, .94); } }
/* v117: выбор ветки на горизонтальном экране — сеткой: 4 ветки в ряд (карточка: облик сверху, текст под ним), «в разработке» — узкой строкой */
@media (orientation: landscape) {
  #evolution .evolution-panel:has(#evolution-options .evolution-option:nth-child(4)) { max-width: min(900px, 96vw); padding: 12px 16px; }
  #evolution #evolution-options:has(.evolution-option:nth-child(4)) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  #evolution #evolution-options:has(.evolution-option:nth-child(4)) .evolution-option:not(.dev) { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 8px; margin: 0; }
  #evolution #evolution-options:has(.evolution-option:nth-child(4)) .evolution-option:not(.dev) img { width: 64px; height: 64px; }
  #evolution #evolution-options:has(.evolution-option:nth-child(4)) .evolution-option:not(.dev) small { font-size: 11px; line-height: 1.25; }
  #evolution #evolution-options:has(.evolution-option:nth-child(4)) .evolution-option.dev { grid-column: span 2; display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 6px 10px; margin: 0; min-height: 0; }
  #evolution #evolution-options:has(.evolution-option:nth-child(4)) .evolution-option.dev .dev-art { width: 28px; height: 28px; font-size: 16px; flex: none; }
  #evolution #evolution-options:has(.evolution-option:nth-child(4)) .evolution-option.dev small { font-size: 11px; }
  #evolution .evolution-panel:has(#evolution-options .evolution-option:nth-child(4)) #evolution-description { font-size: 12px; margin: 4px 0 8px; }
  #evolution .evolution-panel:has(#evolution-options .evolution-option:nth-child(4)) h2 { margin: 2px 0; }
}
/* v118: в автобое карта берётся тапом, подробности — значок ⓘ: делаем его заметной кнопкой */
.card.tcg .link-more { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; opacity: .9; font-size: 13px;
  background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); cursor: help; }
.card.tcg .link-more:hover { background: rgba(255, 255, 255, .25); }
/* v119: карты в лавке — рисунок в окне рамки по центру (правила окна сундука были только для #cards-list) */
.shop-item .card.tcg .card-art { position: absolute; left: 11.2cqw; right: 11.2cqw; top: 28.3cqw; bottom: 1.1cqw; width: auto; height: auto; margin: 0;
  display: flex; align-items: center; justify-content: center; border-radius: 6px; box-shadow: none; border: 0;
  background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--rc) 28%, transparent), transparent 68%); }
.shop-item .card.tcg .card-art img { width: 72%; height: 72%; object-fit: contain; image-rendering: pixelated; }
/* v119: «Новый облик» на телефоне горизонтально — в две колонки: облик и имя слева, характеристики, умение и «Окей» справа; с отступами Telegram */
.newlook { padding: max(10px, var(--sa-top)) max(12px, var(--sa-right)) max(10px, var(--sa-bottom)) max(12px, var(--sa-left)); }
@media (orientation: landscape) and (max-height: 560px) {
  .newlook-panel { width: min(780px, 100%); max-height: 100%; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-areas: "lvl stats" "title stats" "row stats" "name ok"; column-gap: 22px; row-gap: 4px; align-items: center; }
  .newlook-panel > small { grid-area: lvl; }
  .newlook-panel > h2 { grid-area: title; font-size: 22px; }
  .newlook-panel > .newlook-row { grid-area: row; justify-content: center; margin: 0; }
  .newlook-panel > #newlook-name { grid-area: name; font-size: 18px; }
  .newlook-panel > .newlook-stats { grid-area: stats; align-self: center; }
  .newlook-panel > #newlook-ok { grid-area: ok; margin-top: 0; }
  .newlook-row img { max-height: 30vh; }
}
/* v120: рост формы по тапам — герой светится, с каждым тапом сильнее; на последнем — вспышка */
.evo-tap { --p: 0; position: fixed; inset: 0; z-index: 48; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  padding: max(10px, var(--sa-top)) 16px max(10px, var(--sa-bottom)); cursor: pointer; user-select: none; touch-action: manipulation;
  background: radial-gradient(circle at 50% 50%, rgba(60, 120, 50, calc(.55 + .35 * var(--p))), rgba(6, 12, 8, .94) 68%); animation: passive-in .35s ease-out; }
.evo-tap small { position: relative; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #ffd25e; }
.evo-tap > b { position: relative; font-size: 26px; font-weight: 900; color: #d9ffd0; text-shadow: 0 0 14px #4fd16b, 2px 2px 0 #000; animation: evo-tap-call 1.2s ease-in-out infinite; }
.evo-tap em { position: relative; font-style: normal; font-size: 12px; color: #b9d8b0; }
.evo-tap-rays { position: absolute; left: 50%; top: 50%; width: 140vmax; height: 140vmax; translate: -50% -50%; pointer-events: none; opacity: calc(.15 + .6 * var(--p));
  background: repeating-conic-gradient(from 0deg, rgba(200, 255, 170, .22) 0 6deg, transparent 6deg 18deg); animation: evo-rays 9s linear infinite;
  mask: radial-gradient(circle, #000 0, transparent 55%); -webkit-mask: radial-gradient(circle, #000 0, transparent 55%); }
.evo-tap-hero { position: relative; width: min(38vh, 180px); height: min(38vh, 180px); display: grid; place-items: center;
  filter: drop-shadow(0 0 calc(8px + 26px * var(--p)) #9dff7a) brightness(calc(1 + .6 * var(--p))); animation: evo-tap-breathe 1s ease-in-out infinite; }
.evo-tap-hero img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.evo-tap-hero.hit { animation: evo-tap-hit .28s ease-out; }
.evo-tap-pips { position: relative; display: flex; gap: 8px; }
.evo-tap-pips i { width: 16px; height: 16px; border-radius: 4px; rotate: 45deg; background: #1d2a19; box-shadow: inset 0 0 0 2px #4fd16b; transition: background .15s, box-shadow .15s; }
.evo-tap-pips i.on { background: #9dff7a; box-shadow: 0 0 10px #9dff7a, inset 0 0 0 2px #fff; }
.evo-tap.burst::after { content: ''; position: absolute; inset: 0; background: #fff; animation: evo-flash .65s ease-out forwards; pointer-events: none; }
@keyframes evo-tap-call { 50% { transform: scale(1.06); } }
@keyframes evo-tap-breathe { 50% { transform: scale(calc(1.03 + .05 * var(--p))); } }
@keyframes evo-tap-hit { 0% { transform: scale(1); } 35% { transform: scale(1.2, .82) rotate(-5deg); } 70% { transform: scale(.94, 1.08) rotate(4deg); } 100% { transform: scale(1); } }
@keyframes evo-rays { to { rotate: 360deg; } }
@keyframes evo-flash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@media (orientation: landscape) and (max-height: 560px) { .evo-tap > b { font-size: 22px; } .evo-tap-hero { width: min(44vh, 170px); height: min(44vh, 170px); } }

/* v121: дом Мурлиона крупный у правого края; отряд бежит к двери и заходит, после лавки — выбегает слева */
.merchant-house.big-house { z-index: 3; }
.arena.entering-house #slime, .arena.entering-house .helper-slot.filled { animation: enter-house-run 1s ease-in forwards; }
@keyframes enter-house-run { 0% { translate: 0 0; } 75% { translate: var(--door-dx, 34px) 0; scale: 1; opacity: 1; } 100% { translate: calc(var(--door-dx, 34px) + 14px) -6px; scale: .6; opacity: 0; } }
.arena.leaving-house #slime, .arena.leaving-house .helper-slot.filled { animation: leave-house-run 1.2s ease-out both; }
@keyframes leave-house-run { 0% { translate: -55vw 0; } 100% { translate: 0 0; } }

/* v122: переключатель символов закрыт до первой победы */
.style-toggle.locked { opacity: .6; filter: grayscale(.6); }

/* v124: у босса тень только на земле (овал .mon.boss::after) — без тёмной каймы по силуэту и без светящегося контура
   при замахе, попадании и тапе; лапы босса на арене — тоже без тени и ореола */
.monster.boss .art, .mon.boss .art, .mon.boss .art img, .mon.boss.tell .art, .mon.boss.tell-grab .art { filter: none; }
.mon.boss.tell .art { filter: brightness(1.12); }
.mon.boss .art.hitflash { filter: brightness(1.7) saturate(.6) !important; }
.boss-limb, .arena .boss-limb, .boss-limb.raise { filter: none; }

/* v127: дерево развития — вкладки веток, линейка уровней, формы слева направо, силуэты неоткрытых, справа — подробности */
.evotree[hidden] { display: none; }
.evotree { position: fixed; inset: 0; z-index: 46; display: flex; flex-direction: column; color: #f1e8d6;
  background: radial-gradient(ellipse at 30% 0, #2d1f3d, #120c1a 70%);
  padding: max(8px, var(--sa-top)) max(10px, var(--sa-right)) max(8px, var(--sa-bottom)) max(10px, var(--sa-left)); }
.et-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.et-title { flex-shrink: 0; }
.et-title h2 { margin: 0; font-size: 18px; font-weight: 900; color: #ffe2a8; text-shadow: 0 2px 0 #000; }
.et-title small { display: block; max-width: 320px; font-size: 11px; line-height: 1.3; color: #b9a8c9; }
.et-tabs { display: flex; flex: 1; gap: 6px; flex-wrap: wrap; justify-content: center; }
.et-tab { padding: 6px 10px; border-radius: 10px; border: 2px solid color-mix(in srgb, var(--tc) 50%, #000); background: #1d1528; color: #e9dcf2;
  font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.et-tab.on { background: color-mix(in srgb, var(--tc) 35%, #1d1528); border-color: var(--tc); color: #fff; }
.et-tab.mine::after { content: ' ✓'; color: var(--tc); }
.et-tab.pick:not(.on) { animation: et-tab-pulse 1.2s ease-in-out infinite; }
.et-btn { flex-shrink: 0; padding: 6px 12px; border-radius: 10px; border: 2px solid #7a5a2a; background: #2a1d10; color: #ffd25e; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.et-close { width: 36px; height: 36px; padding: 0; font-size: 16px; }
.et-main { flex: 1; min-height: 0; display: flex; gap: 8px; }
.et-body { flex: 1; min-width: 0; overflow: auto; border-radius: 12px; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px #3b2c4d; overscroll-behavior: contain; }
.et-detail { width: 230px; flex-shrink: 0; overflow-y: auto; padding: 10px; border-radius: 12px; background: #1d1528; box-shadow: inset 0 0 0 2px #3b2c4d; font-size: 12px; }
.et-grid { display: grid; grid-template-columns: 112px repeat(var(--n), 78px); column-gap: 14px; width: max-content; padding: 0 10px; }
.et-ruler { position: sticky; top: 0; z-index: 3; padding-top: 6px; padding-bottom: 6px; background: linear-gradient(#170f21 80%, transparent); }
.et-corner { position: sticky; left: 0; z-index: 1; margin-left: -10px; background: #170f21; }
.et-lv { display: grid; place-items: center; }
.et-lv i { min-width: 26px; padding: 2px 6px; border-radius: 9px; background: #241a30; box-shadow: inset 0 0 0 2px #5b4670; font-style: normal; font-size: 11px; font-weight: 900; text-align: center; }
.et-lv.passed i { background: #5a4410; box-shadow: inset 0 0 0 2px #ffd25e; color: #ffe9b0; }
.et-block { position: relative; margin: 4px 0; padding-top: 8px; padding-bottom: 8px; row-gap: 8px; align-items: center; border-top: 1px solid #2c2139; }
.et-head { position: sticky; left: 0; z-index: 2; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 2px; margin-left: -10px; padding: 6px 8px 6px 14px; border-radius: 0 10px 10px 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--bc) 45%, #1d1528), #1d1528); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bc) 70%, #000), 6px 0 10px #120c1a; }
.et-head b { font-size: 14px; font-weight: 900; color: #fff; text-shadow: 0 1px 0 #000; }
.et-head small { font-size: 10px; line-height: 1.25; color: #e6dcef; opacity: .85; }
.et-node { position: relative; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px 3px; border: 0; border-radius: 10px;
  background: #1d1528; box-shadow: inset 0 0 0 1px #3b2c4d; color: #efe6f7; font: inherit; cursor: pointer; }
.et-node::before { content: '›'; position: absolute; left: -12px; top: 20px; font-size: 18px; font-weight: 900; line-height: 1; color: color-mix(in srgb, var(--bc) 75%, #fff); opacity: .8; pointer-events: none; }
.et-node[style^="grid-column:2;"]::before { display: none; }
.et-node img { width: 52px; height: 52px; object-fit: contain; image-rendering: pixelated; }
.et-node span { max-width: 76px; font-size: 10px; font-weight: 800; line-height: 1.1; text-align: center; }
.et-node small { font-size: 9px; color: #a996bb; }
.et-node.locked img { filter: brightness(0) opacity(.55); }
.et-node.locked span { color: #7d6c8e; }
.et-node.off { opacity: .42; }
.et-node.done { box-shadow: inset 0 0 0 2px #8a6a2a; }
.et-node.cur { background: #33240f; box-shadow: inset 0 0 0 2px #ffd25e, 0 0 12px #ffd25e88; }
.et-node.pick { box-shadow: inset 0 0 0 2px #9dff7a, 0 0 14px #4fd16b; animation: et-pulse 1.2s ease-in-out infinite; }
.et-node.sel { outline: 2px solid #fff; outline-offset: 2px; }
.et-node.final span { color: #ffd25e; }
.et-here { position: absolute; top: -7px; left: 50%; translate: -50% 0; padding: 0 5px; border-radius: 6px; background: #ffd25e; color: #2a1a04; font-style: normal; font-size: 8px; font-weight: 900; white-space: nowrap; }
.et-crown { position: absolute; top: 2px; right: 5px; font-style: normal; font-size: 11px; color: #ffd25e; }
.et-hint { position: absolute; top: 2px; left: 5px; font-style: normal; color: #9dff7a; }
@keyframes et-pulse { 50% { box-shadow: inset 0 0 0 2px #c8ffb0, 0 0 24px #4fd16b; } }
@keyframes et-tab-pulse { 50% { box-shadow: 0 0 12px var(--tc); } }
.et-d-head { display: flex; align-items: center; gap: 8px; }
.et-d-head img { width: 64px; height: 64px; flex-shrink: 0; object-fit: contain; image-rendering: pixelated; }
.et-d-head img.locked { filter: brightness(0) opacity(.55); }
.et-d-head span { display: flex; flex-direction: column; gap: 2px; }
.et-d-head b { font-size: 14px; color: #fff; }
.et-d-head small { font-size: 10px; color: #b9a8c9; }
.et-detail p { margin: 8px 0 0; line-height: 1.4; color: #ddd0ea; }
.et-detail p b { color: #ffd25e; }
.et-detail .et-empty { color: #9d8bb0; }
.et-detail .et-d-hint { color: #9dff7a; }
.et-choose, .et-anim { display: block; width: 100%; margin-top: 10px; padding: 10px; border: 0; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 900; cursor: pointer; }
.et-choose { background: linear-gradient(#7be05a, #3fae45); color: #102a0c; box-shadow: 0 3px 0 #1d5a1f; }
.et-anim { background: #2a2036; color: #e9dcf2; box-shadow: inset 0 0 0 2px #5b4670; }
/* телефон горизонтально: всё мельче, подробности уже */
@media (max-height: 460px) {
  .et-top { margin-bottom: 4px; }
  .et-title h2 { font-size: 15px; }
  .et-title small { max-width: 250px; font-size: 10px; }
  .et-tab { padding: 4px 8px; font-size: 11px; }
  .et-close { width: 32px; height: 32px; }
  .et-detail { width: 200px; padding: 8px; }
  .et-grid { grid-template-columns: 96px repeat(var(--n), 68px); column-gap: 12px; }
  .et-node img { width: 42px; height: 42px; }
  .et-node span { max-width: 66px; font-size: 9px; }
  .et-node::before { top: 15px; }
  .et-head b { font-size: 12px; }
  .et-head small { font-size: 9px; }
}
/* узкий экран вертикально: подробности снизу */
@media (orientation: portrait) and (max-width: 700px) { .et-top { flex-wrap: wrap; } .et-main { flex-direction: column; } .et-detail { width: auto; max-height: 34vh; } }
.et-body, .et-detail { scrollbar-width: thin; scrollbar-color: #5b4670 transparent; }
.et-body::-webkit-scrollbar, .et-detail::-webkit-scrollbar { width: 6px; height: 6px; }
.et-body::-webkit-scrollbar-thumb, .et-detail::-webkit-scrollbar-thumb { background: #5b4670; border-radius: 3px; }
.et-body::-webkit-scrollbar-track, .et-detail::-webkit-scrollbar-track { background: transparent; }

/* ---------- карта предмета: ⓘ в гнезде камня справа сверху, значок группы — слева сверху ---------- */
.card.tcg .tcg-info, .card.tcg .tcg-cat { position: absolute; top: 21.4cqw; translate: -50% -50%; z-index: 3; display: grid; place-items: center;
  width: 13cqw; height: 13cqw; min-width: 20px; min-height: 20px; border-radius: 50%; font-style: normal; }
.card.tcg .tcg-info { left: 88.1cqw; cursor: pointer; font: 900 clamp(11px, 8cqw, 16px)/1 Georgia, 'Times New Roman', serif; color: #fff8e0;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--rc) 55%, #fff) 0%, var(--rc) 45%, color-mix(in srgb, var(--rc) 40%, #000) 100%);
  box-shadow: 0 0 0 1.5px #1d1a14, inset 0 -2px 0 rgba(0, 0, 0, .35), 0 0 8px color-mix(in srgb, var(--rc) 70%, transparent);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6); transition: transform .12s, box-shadow .12s; }
.card.tcg .tcg-info:hover { transform: scale(1.12); box-shadow: 0 0 0 1.5px #1d1a14, inset 0 -2px 0 rgba(0, 0, 0, .35), 0 0 12px var(--rc); }
.card.tcg .tcg-info:active { transform: scale(.94); }
.card.tcg .tcg-cat { left: 11.9cqw; color: var(--cc); pointer-events: auto;
  background: radial-gradient(circle at 40% 35%, #3a3326, #14110c 75%);
  box-shadow: 0 0 0 1.5px #1d1a14, 0 0 0 3px color-mix(in srgb, var(--cc) 75%, #000), 0 0 7px color-mix(in srgb, var(--cc) 60%, transparent); }
.card.tcg .tcg-cat svg { width: 64%; height: 64%; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .7)); }
.card.tcg .tcg-gem { display: none; }

/* v128: портрет героя — детальный бюст (assets/portrait, docs/slice_portraits.py) в круглой слизь-рамке.
   Рамка и есть шкала опыта: тусклая слизь — дорожка, яркая наливается по кругу (--xp, 0–100) от верха по часовой */
.arena .portrait { width: 64px; height: 64px; border-radius: 50%; }
.arena .portrait svg { display: none; }
.arena .portrait img { left: 9px; top: 9px; width: 46px; height: 46px; border-radius: 50%; object-fit: contain; object-position: 50% 50%;
  background: radial-gradient(circle at 50% 40%, #2f4a2a, #0f1a10 72%); box-shadow: inset 0 0 6px #000; image-rendering: auto; }
.arena .portrait img.fallback { object-fit: contain; transform: none; image-rendering: pixelated; }
.pf-frame { display: none; }
.arena .pf-frame { display: block; position: absolute; left: -7px; top: -6px; width: 78px; height: 78px; pointer-events: none; z-index: 1;
  background: url(assets/ui-portrait-frame.png) center / contain no-repeat; }
.arena .pf-track { filter: grayscale(.85) brightness(.45); }
.arena .pf-fill { --xpa: calc(var(--xp, 0) * 3.6deg);
  -webkit-mask: conic-gradient(#000 var(--xpa), transparent var(--xpa)); mask: conic-gradient(#000 var(--xpa), transparent var(--xpa));
  filter: drop-shadow(0 0 3px #7dff5a88); }
.hero-card.low .pf-fill { filter: hue-rotate(-95deg) saturate(1.4) drop-shadow(0 0 3px #ff4d4d); }
.arena .portrait-lvl { z-index: 2; bottom: -7px; }

/* v129: плашка героя (вариант A) — имя формы сверху, здоровье числом внутри полосы; уровень — только значок на рамке,
   опыт — только слизь-рамка (без «ур. 5» и «110/149» в тексте) */
.arena .hero-card { gap: 6px; padding: 4px 12px 4px 4px; }
.arena .hero-card-text { gap: 4px; }
.arena #portrait-level, .arena #portrait-xp { display: none; }
.arena .hero-card-text small#portrait-name { font-size: 12px; font-weight: 800; color: #e6f5df; text-shadow: 1px 1px 0 #000; }
.arena .hp-line { width: 132px; height: 18px; border-radius: 9px; }
.arena .hp-line i { border-radius: 9px; }
.arena #hp-line-shield { height: 4px; }
.arena .hp-line b#portrait-hp { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font-size: 12px; line-height: 1; font-weight: 900; color: #fff;
  text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000; white-space: nowrap; }

/* v130: плашка босса (вариант A) — в бою с боссом плашка мира прячется; имя босса и иконки эффектов в одну строку,
   число здоровья в полосе, щит — синий кусок полосы, засечка — где начнётся ярость; без надписи о фазе */
.arena.boss-fight .scene-top .world { display: none; }
.boss-bar .boss-head { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.boss-bar .boss-phase { display: none; }
.boss-debuffs { display: inline-flex; gap: 4px; }
.boss-debuffs .bd { position: relative; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; font-style: normal; font-size: 13px; line-height: 1;
  background: rgba(10, 6, 14, .82); box-shadow: inset 0 0 0 1.5px #6b5a7a; animation: bd-in .25s ease-out; }
.boss-debuffs .bd.fire { box-shadow: inset 0 0 0 1.5px #ff8a3a; }
.boss-debuffs .bd.poison { box-shadow: inset 0 0 0 1.5px #7dff5a; }
.boss-debuffs .bd.slow { box-shadow: inset 0 0 0 1.5px #7fd8ff; }
.boss-debuffs .bd.stun { box-shadow: inset 0 0 0 1.5px #ffd25e; }
.boss-debuffs .bd.curse { box-shadow: inset 0 0 0 1.5px #c040ff; }
.boss-debuffs .bd.tired { box-shadow: inset 0 0 0 1.5px #ff6b6b; }
.boss-debuffs .bd small { position: absolute; right: -4px; bottom: -4px; min-width: 12px; padding: 0 2px; border-radius: 5px; background: #000; color: #fff;
  font-size: 8px; font-weight: 900; line-height: 11px; text-align: center; }
@keyframes bd-in { from { transform: scale(.4); opacity: 0; } }
.boss-bar-track { position: relative; }
#boss-bar-shield { left: 0; width: 0; inset: 0 auto 0 auto; background: linear-gradient(180deg, #bfe6ff, #5aa0ff 60%, #2a5aa8); transition: width .15s, left .15s; }
.boss-mark { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: #fff1e0; box-shadow: 0 0 0 1px #000; text-decoration: none; pointer-events: none; }
.boss-mark[hidden] { display: none; }
.boss-bar-track span { z-index: 1; }

/* v131: один сундук — внизу в доке (крупный, под большим пальцем); верхний справа убран как дубль */
.arena .hud-chest { display: none !important; }
#evo-status:empty { display: none; }

/* v132: сверху в бою — только мир и номер волны; квадратики пути волн и строка DMG · ATK · CRIT скрыты (статы — в «📊 Статы») */
.arena .scene-top .path, .arena #auto-stats { display: none !important; }
.arena .evo-status { top: calc(max(6px, var(--sa-top)) + 44px); font-size: 11px; font-weight: 800; color: #f5e8ae; }

/* v133: по центру сверху — предметы героя рядом; мир и волна — мелкой строкой под ними (без плашки);
   в бою с боссом: сверху полоса босса, под ней предметы */
.arena .scene-top .loot-strip { position: static; order: 0; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 5px; max-width: min(70vw, 520px); }
.arena .scene-top .loot-strip:empty { display: none; }
.arena .scene-top .loot-strip .loot { width: 34px; height: 34px; }
.arena .scene-top .loot-strip .loot:nth-child(n) { display: block; }
.arena .scene-top .loot-strip .loot.more { display: grid; }
.arena .scene-top .world { order: 1; margin-top: 3px; padding: 0; background: none; box-shadow: none; font-size: 10px; font-weight: 800; color: #e6dcc0; text-shadow: 1px 1px 0 #000, 0 0 4px #000; }
.arena .scene-top .world::before, .arena .scene-top .world::after { display: none; }
.arena .scene-top .world small { font-size: 10px; color: #cfc6a0; }
.arena .scene-top .boss-bar { order: -1; margin-bottom: 4px; }
.arena .evo-status { top: calc(max(6px, var(--sa-top)) + 62px); }
.arena:has(.loot-strip:empty) .evo-status { top: calc(max(6px, var(--sa-top)) + 26px); }
.arena .evo-status { top: calc(max(6px, var(--sa-top)) + 94px); }
.arena:has(.loot-strip:empty) .evo-status { top: calc(max(6px, var(--sa-top)) + 54px); }

/* ---------- набор v2: мегакрит, кровавая метка, временные помощники, вспышка Бобика, остановка времени ---------- */
.float.mega { color: #ff3b3b; font-size: 42px; font-weight: 900; text-shadow: 0 2px 0 #3a0000, 0 0 10px #ff2a2a, 0 0 22px #ff6b3b; letter-spacing: -1px; }
.float.mega::after { content: ' МЕГА'; font-size: 16px; vertical-align: super; color: #ffd25e; }
.float.t-blood { color: #ff4d5e; }
.mon.bleed .art { filter: drop-shadow(0 0 calc(var(--blood, 1) * 1.6px) #ff1f3a) saturate(1.15); }
.mon.bleed .mon-hp { box-shadow: 0 0 0 1px #ff1f3a, 0 0 calc(var(--blood, 1) * 2px) #ff1f3a; }
.minion { position: absolute; z-index: 30; font-size: 26px; line-height: 1; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6));
  animation: minion-in .3s ease-out, minion-bob 1.1s ease-in-out .3s infinite; }
.minion.bite { animation: minion-bite .25s ease-out; }
.minion.out { opacity: 0; transform: scale(.4); transition: opacity .3s, transform .3s; }
@keyframes minion-in { from { opacity: 0; transform: translateY(-20px) scale(.5); } }
@keyframes minion-bob { 50% { transform: translateY(-4px); } }
@keyframes minion-bite { 50% { transform: translateX(10px) scale(1.15); } }
.arena.boby-flash::after { content: ''; position: absolute; inset: 0; z-index: 60; pointer-events: none; background: radial-gradient(circle at 25% 70%, #fffbe0, rgba(255, 240, 180, .55) 40%, transparent 75%); animation: boby-flash .6s ease-out forwards; }
@keyframes boby-flash { from { opacity: 1; } to { opacity: 0; } }
.arena.time-stop { filter: grayscale(.85) contrast(1.1); transition: filter .2s; }
.arena.time-stop .slime-body, .arena.time-stop #evolved-art { filter: drop-shadow(0 0 10px #7dff8a) saturate(1.4); }
@media (prefers-reduced-motion: reduce) { .minion { animation: none; } }

/* v134: механики v2 — выпадающие списки в настройках; звёзды повторных предметов */
.mech-head span { font-weight: 900; color: #ffd25e; }
.mech-select { min-width: 140px; padding: 6px 8px; border-radius: 10px; border: 2px solid #7a5a2a; background: #2a1d10; color: #ffe9b0; font: inherit; font-size: 13px; font-weight: 800; }
.loot.star2 { --edge: #c07bff; --tint: #3d2160; }
.loot.star3 { --edge: #ff6b4a; --tint: #5a3d0e; box-shadow: inset 0 0 0 2px var(--edge), 0 0 8px #ff6b4a88; }
.loot .lstar { position: absolute; left: -2px; top: -6px; font-style: normal; font-size: 9px; color: #ffd25e; text-shadow: 0 0 2px #000, 1px 1px 0 #000; letter-spacing: -1px; }
.card-badge.star { background: linear-gradient(180deg, #c07bff, #6b3ab0); color: #fff; }

/* v134: режим «Сумка и стопки» — награда предметами, стопки по редкости сверху, веер по тапу */
.cards.bag-mode #cards-list { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.bag-item { position: relative; width: 150px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px 12px; border: 0; border-radius: 16px; cursor: pointer;
  background: radial-gradient(circle at 50% 30%, var(--tint, #3b3f45), #14100a 80%); box-shadow: inset 0 0 0 2px var(--edge, #9a9aa8), 0 6px 14px rgba(0, 0, 0, .55); color: #f6efdc; font: inherit;
  animation: bag-drop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.bag-item:nth-child(2) { animation-delay: .07s; } .bag-item:nth-child(3) { animation-delay: .14s; }
@keyframes bag-drop { from { transform: translateY(-30px) scale(.6); opacity: 0; } }
.bag-item.common { --tint: #3b3f45; --edge: #a8a8b4; } .bag-item.uncommon { --tint: #1f4a2b; --edge: #5ee07a; } .bag-item.rare { --tint: #1d3560; --edge: #5aa0ff; }
.bag-item.epic { --tint: #3d2160; --edge: #c07bff; } .bag-item.legendary { --tint: #5a3d0e; --edge: #ff6b4a; } .bag-item.lunar { --tint: #163f45; --edge: #5e8bff; }
.bag-plate { width: 76px; height: 76px; display: grid; place-items: center; animation: bag-bob 1.6s ease-in-out infinite; }
.bag-plate img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 4px 4px #000a); }
@keyframes bag-bob { 50% { transform: translateY(-4px); } }
.bag-item b { font-size: 13px; font-weight: 900; text-align: center; }
.bag-item small { font-size: 11px; line-height: 1.3; color: #d9d2bc; text-align: center; }
.bag-item .bag-star { font-style: normal; font-size: 10px; font-weight: 900; color: #fff; padding: 1px 6px; border-radius: 6px; background: linear-gradient(180deg, #c07bff, #6b3ab0); }
.bag-item .link-more { position: absolute; right: 6px; top: 6px; font-style: normal; font-size: 13px; color: #fff; opacity: .8; }
.bag-fly { position: fixed; z-index: 400; pointer-events: none; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 0 8px #ffd25e); }
.loot-strip.bag { position: relative; align-items: flex-start; }
.loot-strip.bag .stack { position: relative; width: 36px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; }
.stack .stack-back, .stack .stack-top { position: absolute; inset: 0; border-radius: 8px; background: radial-gradient(circle, var(--tint, #3b3f45) 0 45%, #14100a 100%); box-shadow: inset 0 0 0 2px var(--edge, #9a9aa8), 0 2px 5px rgba(0, 0, 0, .55); }
.stack .stack-back { transform: translate(3px, -3px) rotate(6deg); opacity: .85; }
.stack .stack-top { display: grid; place-items: center; padding: 3px; }
.stack .stack-top img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.stack b { position: absolute; right: -5px; top: -7px; z-index: 1; min-width: 16px; padding: 0 3px; border-radius: 8px; font-size: 10px; font-weight: 900; line-height: 15px; color: #fff; background: #000; box-shadow: 0 0 0 1px var(--edge, #999); }
.stack.common { --tint: #3b3f45; --edge: #a8a8b4; } .stack.uncommon { --tint: #1f4a2b; --edge: #5ee07a; } .stack.rare { --tint: #1d3560; --edge: #5aa0ff; }
.stack.epic { --tint: #3d2160; --edge: #c07bff; } .stack.legendary { --tint: #5a3d0e; --edge: #ff6b4a; } .stack.lunar { --tint: #163f45; --edge: #5e8bff; }
.stack.open .stack-top { box-shadow: inset 0 0 0 2px #fff, 0 0 10px var(--edge); }
.bag-sum { flex-basis: 100%; text-align: center; font-size: 10px; font-weight: 800; color: #f6efdc; text-shadow: 1px 1px 0 #000, 0 0 4px #000; }
.bag-fan { flex-basis: 100%; display: flex; justify-content: center; gap: 2px; padding: 8px 6px 4px; margin-top: 2px; border-radius: 12px; background: rgba(10, 8, 6, .82); box-shadow: inset 0 0 0 1px rgba(214, 196, 140, .4);
  animation: fan-in .25s ease-out; }
@keyframes fan-in { from { transform: translateY(-8px) scale(.9); opacity: 0; } }
.fan-item { position: relative; width: 52px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px 2px; border: 0; border-radius: 8px; cursor: pointer; font: inherit;
  background: radial-gradient(circle, var(--tint, #3b3f45) 0 45%, #14100a 100%); box-shadow: inset 0 0 0 2px var(--edge, #9a9aa8); rotate: var(--rot, 0deg); transform-origin: 50% 140%; }
.fan-item.common { --tint: #3b3f45; --edge: #a8a8b4; } .fan-item.uncommon { --tint: #1f4a2b; --edge: #5ee07a; } .fan-item.rare { --tint: #1d3560; --edge: #5aa0ff; }
.fan-item.epic { --tint: #3d2160; --edge: #c07bff; } .fan-item.legendary { --tint: #5a3d0e; --edge: #ff6b4a; } .fan-item.lunar { --tint: #163f45; --edge: #5e8bff; }
.fan-item img { width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; }
.fan-item b { max-width: 50px; font-size: 8px; line-height: 1.05; color: #f6efdc; text-align: center; overflow: hidden; }
.fan-item em { position: absolute; left: 2px; top: -6px; font-style: normal; font-size: 9px; color: #ffd25e; text-shadow: 1px 1px 0 #000; }
.fan-item.star2 { box-shadow: inset 0 0 0 2px #c07bff; } .fan-item.star3 { box-shadow: inset 0 0 0 2px #ff6b4a, 0 0 8px #ff6b4a88; }
.bag-item .short-stats { display: flex; gap: 10px; justify-content: center; }
.bag-item .short-stat { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.bag-item .short-stat b { font-size: 14px; font-weight: 900; color: #ffd25e; }
.bag-item .short-stat small { font-size: 9px; color: #d9d2bc; }

/* v134: режим «Умения 3×3» — полоса из трёх умений над доком: кольцо перезарядки, точки улучшений */
.skill3[hidden] { display: none; }
.arena .skill3, .skill3 { position: absolute; left: 50%; translate: -50% 0; bottom: calc(66px + var(--sa-bottom)); z-index: 24; display: flex; gap: 10px; pointer-events: auto; }
.sk3 { --p: 0; position: relative; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: #14100a; box-shadow: 0 3px 6px rgba(0, 0, 0, .6); }
.sk3 .sk3-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#ffd25e calc(var(--p) * 1%), #3a3020 0); }
.sk3 img { position: absolute; inset: 4px; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #1d1a14; filter: grayscale(.6) brightness(.7); transition: filter .15s; }
.sk3.ready img { filter: none; }
.sk3.ready { box-shadow: 0 0 10px #ffd25e99, 0 3px 6px rgba(0, 0, 0, .6); }
.sk3-pips { position: absolute; left: 50%; bottom: -7px; translate: -50% 0; display: flex; gap: 2px; }
.sk3-pips b { width: 7px; height: 7px; border-radius: 2px; rotate: 45deg; background: #2a2418; box-shadow: inset 0 0 0 1px #8a7a50; }
.sk3-pips b.on { background: #ffd25e; box-shadow: 0 0 4px #ffd25e; }
.card .sk-mini { position: absolute; right: -4px; bottom: -4px; width: 26px !important; height: 26px !important; border-radius: 50%; box-shadow: 0 0 0 2px #000; }
.card-art { position: relative; }

/* v135: хранители договоров — Костяной ростовщик и Лунная гадалка: свой фон, лицо в реплике и цвет */
.cards.pact-mode[data-keeper="lender"] .pact-scene { background-image: linear-gradient(180deg, transparent 30%, rgba(5, 8, 6, .55) 52%, rgba(5, 8, 6, .92) 78%), url('assets/pact-lender-tall.webp'); }
.cards.pact-mode[data-keeper="seer"] .pact-scene { background-image: linear-gradient(180deg, transparent 30%, rgba(6, 4, 14, .55) 52%, rgba(6, 4, 14, .92) 78%), url('assets/pact-seer-tall.webp'); }
@media (orientation: landscape) {
  .cards.pact-mode[data-keeper="lender"] .pact-scene { background-image: linear-gradient(180deg, transparent 35%, rgba(5, 8, 6, .5) 55%, rgba(5, 8, 6, .9) 85%), url('assets/pact-lender-wide.webp'); }
  .cards.pact-mode[data-keeper="seer"] .pact-scene { background-image: linear-gradient(180deg, transparent 35%, rgba(6, 4, 14, .5) 55%, rgba(6, 4, 14, .9) 85%), url('assets/pact-seer-wide.webp'); }
}
.cards[data-keeper="lender"] .pact-face { background-image: url('assets/pact-lender-face.webp'); box-shadow: 0 0 0 2px #9bec64, 0 0 12px #9bec6466; }   /* v149: ростовщик в слизи */
.cards[data-keeper="seer"] .pact-face { background-image: url('assets/pact-seer-face.webp'); box-shadow: 0 0 0 2px #a78bff, 0 0 12px #b49bff66; }
.cards[data-keeper="lender"] .pact-keeper b { color: #f3dca0; }
.cards[data-keeper="lender"] .pact-keeper small { color: #c9b07a; }
.cards[data-keeper="seer"] .pact-keeper b { color: #e2d6ff; }
.cards[data-keeper="seer"] .pact-keeper small { color: #b5a3e6; }

/* v136: режим «Сумка» — полные карты, внизу слизистый портфель; тап — карта улетает вниз в него и тонет */
.bag-satchel { display: none; }
.cards.bag-mode:not(.pact-mode):not(.passive-mode):not(.gift-mode) .bag-satchel { display: block; position: absolute; left: 50%; bottom: calc(-14px + var(--sa-bottom)); translate: -50% 0; z-index: 3; width: 120px; height: 120px; pointer-events: none;
  animation: satchel-idle 2.2s ease-in-out infinite; }
.bag-satchel img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 4px 8px #000c) drop-shadow(0 0 10px #7dff5a55); }
@keyframes satchel-idle { 50% { transform: translateY(-4px) scale(1.02); } }
.bag-satchel.gulp { animation: satchel-gulp .45s ease-out; }
@keyframes satchel-gulp { 0% { transform: scale(1); } 30% { transform: scale(1.18, .86); } 60% { transform: scale(.94, 1.08); } 100% { transform: scale(1); } }
.cards.bag-mode:not(.pact-mode):not(.passive-mode) .cards-box { padding-bottom: 90px; }
.bag-fly-card { position: fixed; z-index: 400; margin: 0; pointer-events: none; transform-origin: 50% 50%; }
#cards-list.bag-sent .card:not(.bag-going) { opacity: .25; transition: opacity .25s; }
#cards-list .card.bag-going { position: relative; z-index: 50; pointer-events: none; }
@media (orientation: landscape) and (max-height: 460px) { .cards.bag-mode:not(.pact-mode):not(.passive-mode) .bag-satchel { width: 84px; height: 84px; bottom: -8px; } .cards.bag-mode:not(.pact-mode):not(.passive-mode) .cards-box { padding-bottom: 60px; } }

/* v137: пэт — у героя позади, покачивается; летающий парит; действие — подпрыг; рост — вспышка */
.pet[hidden] { display: none; }
.pet { position: absolute; z-index: 9; image-rendering: pixelated; object-fit: contain; pointer-events: none; transform-origin: 50% 100%;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .5)); animation: pet-bob 1.4s ease-in-out infinite; transition: left .5s ease-in-out, top .5s ease-in-out, width .4s, height .4s; }
.pet.flyer { animation: pet-fly 1.8s ease-in-out infinite; filter: drop-shadow(0 0 6px #fff27a88); }
@keyframes pet-bob { 50% { transform: scale(1.04, .96) translateY(1px); } }
@keyframes pet-fly { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px) rotate(-3deg); } }
.pet.pet-act { animation: pet-act .35s ease-out; }
@keyframes pet-act { 0% { transform: none; } 40% { transform: translateY(-10px) scale(1.12, .9); } 100% { transform: none; } }
.pet.pet-grow { animation: pet-grow .7s ease-out; }
@keyframes pet-grow { 0% { filter: brightness(3) drop-shadow(0 0 14px #fff); transform: scale(.6); } 100% { filter: none; transform: none; } }
.arena.pet-mode .helper-slot { display: none !important; }
.fx-float-pet { position: fixed; z-index: 60; transform: translate(-50%, -50%); font-size: 13px; font-weight: 900; color: #ffd25e; text-shadow: 1px 1px 0 #000, 0 0 4px #000;
  pointer-events: none; animation: pet-float .9s ease-out forwards; white-space: nowrap; }
@keyframes pet-float { to { transform: translate(-50%, -150%); opacity: 0; } }

/* v138: кадровые пэты; Сельдь торчит из земли: стоит основанием-горкой на дороге, на бегу ныряет (видна верхушка) */
.pet.grounded { animation: none; transform-origin: 50% 100%; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .45)); transition: left .5s ease-in-out, top .5s ease-in-out, translate .45s ease-in-out, clip-path .45s ease-in-out; }
.pet.grounded.burrowed { translate: 0 62%; clip-path: inset(0 0 62% 0); }
.pet.grounded.pet-act { animation: pet-act .35s ease-out; }

/* v139: карта предмета — фон-пьедестал по редкости (assets/card-bg-*.webp, предмет стоит на диске);
   внизу — крупные числа и понятная фраза из описания (вместо обрывков «лечение в с»), нижняя часть выше */
.cards #cards-list .card.tcg .card-art { background: #0d0a08 url('assets/card-bg-common.webp') center 72% / cover no-repeat; align-items: flex-end; padding-bottom: 9%; overflow: hidden; }
.cards #cards-list .card.tcg.uncommon .card-art { background-image: url('assets/card-bg-uncommon.webp'); }
.cards #cards-list .card.tcg.rare .card-art { background-image: url('assets/card-bg-rare.webp'); }
.cards #cards-list .card.tcg.epic .card-art { background-image: url('assets/card-bg-epic.webp'); }
.cards #cards-list .card.tcg.legendary .card-art { background-image: url('assets/card-bg-legendary.webp'); }
.cards #cards-list .card.tcg.lunar .card-art { background-image: url('assets/card-bg-lunar.webp'); }
.cards #cards-list .card.tcg .card-art img { width: 66%; height: 66%; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .7)); }
.card.tcg .tcg-bot { min-height: 70cqw; gap: 2px; }
.card.tcg .short-stats { gap: 4px; }
.card.tcg .short-stat b { font-size: clamp(12px, 10cqw, 20px); }
.card.tcg .short-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
  font-size: clamp(8px, 6.2cqw, 12px); line-height: 1.2; font-weight: 700; color: #e6eedc; text-shadow: 0 1px 0 #000; }
.card.tcg .short-line .num { color: #ffd25e; }
.card.tcg .short-line .kw { color: #9dff7a; }
.card.tcg .short-line .minus { color: #ff8a7a; }

/* v140: карта улучшения умения — крупно иконка умения, в углу крупный значок улучшения со стрелкой, золотая подсветка, точки 1/2/3 */
.card.skill-up { box-shadow: inset 0 0 0 2px #ffd25e, 0 0 16px #ffd25e55 !important; background: linear-gradient(100deg, #3a2a10 0%, #241a30 55%) !important; animation: skup-glow 1.6s ease-in-out infinite; }
@keyframes skup-glow { 50% { box-shadow: inset 0 0 0 2px #fff1b0, 0 0 26px #ffd25e88 !important; } }
.card.skill-up .card-art { position: relative; overflow: visible !important; box-shadow: inset 0 0 0 3px #ffd25e, 0 0 10px #ffd25e66 !important; }
.card.skill-up .card-art > img { width: 100% !important; height: 100% !important; object-fit: contain; }
.sk-up-badge { position: absolute; right: -14px; bottom: -12px; width: 52%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, #3a2a10, #120c06); box-shadow: 0 0 0 2px #ffd25e, 0 0 10px #ffd25e, 0 3px 6px rgba(0, 0, 0, .7); animation: skup-badge 1.2s ease-in-out infinite; }
.sk-up-badge img { width: 74% !important; height: 74% !important; object-fit: contain; image-rendering: pixelated; }
.sk-up-badge i { position: absolute; right: -4px; top: -6px; font-style: normal; font-size: 13px; font-weight: 900; color: #fff; text-shadow: 0 0 4px #ffd25e, 1px 1px 0 #000; }
@keyframes skup-badge { 50% { transform: scale(1.08); } }
.sk-up-tag { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 6px; font-size: 10px; font-weight: 900; letter-spacing: .5px; color: #2a1a04; background: linear-gradient(180deg, #ffe48a, #e0a82a); }
.sk-up-pips { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.sk-up-pips b { width: 8px; height: 8px; rotate: 45deg; border-radius: 2px; background: #2a2418; box-shadow: inset 0 0 0 1px #8a7a50; }
.sk-up-pips b.on { background: #ffd25e; }
.sk-up-pips b.new { background: #fff1b0; box-shadow: 0 0 6px #ffd25e; animation: skup-badge .8s ease-in-out infinite; }
#cards-list .card.skill-up .card-art, #cards-list .card.skill-new .card-art { width: 64px !important; height: 64px !important; flex: none; }
#cards-list .card.skill-new .card-art img { width: 100% !important; height: 100% !important; object-fit: contain; }
#cards-list .card.skill-up .card-art { margin: 4px 14px 10px 4px; }
.sk-up-badge { width: 62%; right: -16px; bottom: -14px; }
.sk-up-badge i { font-size: 12px; color: #7dff5a; text-shadow: 0 0 4px #000, 1px 1px 0 #000; }

/* v141: шрифты — Nunito для всего текста, кнопок, названий и чисел; Rubik Wet Paint (буквы с подтёками слизи) — только крупные заголовки */
body, body * { font-family: 'Nunito', system-ui, sans-serif !important; }
body { font-weight: 700; }
.card.tcg .tcg-info { font-family: Georgia, 'Times New Roman', serif !important; }
body #cards-title, body .newlook-panel h2, body .evo-tap > b, body #evolution-title, body #evotree-title, body #results-title,
body .pact-keeper b, body .fx-bossintro em, body .fx-bossdown b, body .merchant-head b, body #tavern-title, body .menu-title {
  font-family: 'Rubik Wet Paint', 'Nunito', system-ui, sans-serif !important; font-weight: 400 !important; letter-spacing: .02em; }
body #cards-title small, body .menu-title small, body .menu-title span { font-family: 'Nunito', system-ui, sans-serif !important; font-weight: 900 !important; }
#cards-title { font-size: clamp(24px, 4.2vw, 34px); line-height: 1.05; }
#cards-title small { display: block; font-size: 12px; letter-spacing: 2px; }
.newlook-panel h2, .evo-tap > b { font-size: clamp(24px, 4vw, 32px); }

/* v142: «Отряд» с пэтом — карточка пэта вместо мест и таверны */
.party-row.pet-row { box-shadow: inset 0 0 0 2px #9dff7a; }
.party-row.pet-row img { width: 72px; height: 72px; object-fit: contain; image-rendering: pixelated; }
.party-row .pet-next { display: block; margin-top: 3px; color: #ffd25e; }
.town-upgrade[hidden], .sheet-note[hidden] { display: none !important; }

/* v143: рюкзак на весь экран (assets/ui-backpack.webp): предметы — крупные плитки в центральном поле; тап — подробная модалка */
.backpack[hidden] { display: none; }
.backpack { position: fixed; inset: 0; z-index: 45; background: #120d07 url('assets/ui-backpack.webp') center / 100% 100% no-repeat; animation: arena-in .2s ease-out; }
.bp-panel { position: absolute; left: 13.5%; right: 13.5%; top: 11%; bottom: 10%; display: flex; flex-direction: column; min-height: 0; }
.bp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.bp-head h2 { margin: 0; font-size: clamp(22px, 4vw, 32px); color: #ffe9b0; text-shadow: 0 2px 0 #000; font-family: 'Rubik Wet Paint', 'Nunito', sans-serif !important; font-weight: 400 !important; }
.bp-head small { flex: 1; font-size: 12px; color: #e6dcc0; text-shadow: 1px 1px 0 #000; }
.bp-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; align-content: start; padding: 4px 2px; scrollbar-width: thin; }
.bp-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 5px; border: 0; border-radius: 12px; cursor: pointer; font: inherit;
  background: radial-gradient(circle at 50% 38%, var(--tint, #3b3f45) 0 40%, rgba(10, 8, 5, .85) 100%); box-shadow: inset 0 0 0 2px var(--edge, #a8a8b4), 0 4px 8px rgba(0, 0, 0, .5); transition: transform .12s; }
.bp-item:active { transform: scale(.94); }
.bp-item img { width: 52px; height: 52px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .6)); }
.bp-item small { max-width: 100%; font-size: 10px; line-height: 1.1; color: #f3ecd6; text-align: center; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.bp-item b { position: absolute; right: 4px; top: 4px; font-size: 10px; font-weight: 900; color: #fff; background: rgba(0, 0, 0, .7); border-radius: 6px; padding: 0 4px; }
.bp-item em { position: absolute; left: 4px; top: 2px; font-style: normal; font-size: 10px; color: #ffd25e; text-shadow: 1px 1px 0 #000; }
.bp-item.common { --tint: #3b3f45; --edge: #a8a8b4; } .bp-item.uncommon { --tint: #1f4a2b; --edge: #5ee07a; } .bp-item.rare { --tint: #1d3560; --edge: #5aa0ff; }
.bp-item.epic { --tint: #3d2160; --edge: #c07bff; } .bp-item.legendary { --tint: #5a3d0e; --edge: #ff6b4a; } .bp-item.lunar { --tint: #163f45; --edge: #5e8bff; }
.bp-item.star3 { box-shadow: inset 0 0 0 2px var(--edge), 0 0 10px #ffd25e88; }
.bp-empty { grid-column: 1 / -1; text-align: center; color: #e6dcc0; font-size: 14px; margin-top: 30px; }
@media (max-height: 460px) { .bp-panel { top: 10%; bottom: 9%; } .bp-grid { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 6px; } .bp-item img { width: 42px; height: 42px; } }

/* модалка предмета: широкая, предмет на пьедестале слева, подробности справа */
.info-modal.wide .info-card { width: min(96vw, 620px); text-align: left; padding: 16px; }
.im { display: flex; gap: 14px; align-items: flex-start; }
.im-left { flex: none; width: 150px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.im-stage { width: 150px; height: 150px; border-radius: 14px; background: #0d0a08 center 70% / cover no-repeat; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 16px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12), 0 6px 16px rgba(0, 0, 0, .5); }
.im-stage img { width: 96px; height: 96px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .7)); animation: im-float 2.2s ease-in-out infinite; }
@keyframes im-float { 50% { transform: translateY(-5px); } }
.im-rar { font-size: 11px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
.im-have { font-size: 11px; color: #cdbf98; }
.im-right { flex: 1; min-width: 0; }
.im-right h3 { margin: 0 0 6px; font-size: 20px; font-weight: 900; color: #fff3c6; }
.im-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.im-stats div { min-width: 64px; padding: 4px 8px; border-radius: 10px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 210, 94, .35); text-align: center; }
.im-stats b { display: block; font-size: 20px; font-weight: 900; color: #ffd25e; }
.im-stats small { font-size: 10px; color: #cdbf98; }
.im-desc { margin: 0 0 8px; font-size: 14px; line-height: 1.4; color: #f3ecd6; }
.im-desc .num { color: #ffd25e; } .im-desc .kw { color: #9dff7a; } .im-desc .minus { color: #ff8a7a; }
.im-star { display: flex; gap: 8px; align-items: center; margin: 4px 0; padding: 5px 8px; border-radius: 10px; background: rgba(192, 123, 255, .12); box-shadow: inset 0 0 0 1px rgba(192, 123, 255, .45); font-size: 12px; }
.im-star b { color: #ffd25e; white-space: nowrap; }
.im-star.on { background: rgba(255, 210, 94, .12); box-shadow: inset 0 0 0 1px rgba(255, 210, 94, .5); }
.im-extra { margin-top: 6px; font-size: 12px; }
@media (max-height: 460px) { .info-modal.wide .info-card { max-height: 94vh; padding: 12px; } .im-left { width: 120px; } .im-stage { width: 120px; height: 120px; } .im-stage img { width: 76px; height: 76px; } .im-desc { font-size: 13px; } }
@media (max-width: 520px) { .im { flex-direction: column; align-items: center; } .im-right { text-align: center; } .im-stats { justify-content: center; } }
.im-extra .card-combo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 4px 0; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(157, 255, 122, .35); }
.im-extra .card-combo .combo-h { width: 100%; font-size: 11px; font-weight: 900; color: #9dff7a; }
.im-extra .combo-slots { display: flex !important; flex-direction: row !important; align-items: center; gap: 6px; }
.im-extra .combo-slots .slot { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: #1d1a14; box-shadow: inset 0 0 0 1px #8a7a50; }
.im-extra .combo-slots .slot img { width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; }
.im-extra .combo-slots .slot.on { box-shadow: inset 0 0 0 2px #9dff7a; }
.im-extra .combo-slots b { color: #cdbf98; }
.im-extra .combo-note { flex: 1 1 100%; font-size: 12px; color: #e6dcc0; }
.im-extra .card-sym { display: block; margin: 4px 0; }

/* v144: итоги забега — без внутренних прокруток, «Ещё забег» главной кнопкой, открытый предмет подписан, бой плитками */
#results .menu-panel.results-panel { position: relative; padding: 16px; border-radius: 18px; text-align: left;
  background: linear-gradient(180deg, rgba(34, 26, 16, .9), rgba(16, 12, 8, .92)); box-shadow: inset 0 0 0 2px #6b5a36, 0 0 0 2px #000, 0 18px 40px rgba(0, 0, 0, .6); }
#results .results-main { align-items: stretch; text-align: center; }
#results .results-main .menu-title { font-size: clamp(26px, 4vw, 36px); line-height: 1; color: #ffd25e; text-shadow: 0 3px 0 #000, 0 0 18px rgba(255, 180, 46, .45); }
#results .results-main .sheet-note { color: #cfc6a0; }
#results .results-stats { gap: 5px; }
#results .results-stats div { align-items: baseline; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 210, 94, .22); color: #cfc6a0; }
#results .results-stats b { font-size: 16px; font-weight: 900; color: #fff3c6; }
#results .results-stats div:last-child:nth-child(odd) { grid-column: 1 / -1; }
#results .results-crystals { display: flex; align-items: baseline; justify-content: center; gap: 6px; font-size: 24px; font-weight: 900; color: #9fd8ff; text-shadow: 0 2px 0 #000, 0 0 12px rgba(120, 200, 255, .5); }
#results .results-crystals small { font-size: 12px; color: #9fb8c8; text-shadow: none; }
/* открытый предмет: подпись «Открыт новый предмет», кант по редкости, блик */
#results .unlock-row { position: relative; overflow: hidden; gap: 10px; padding: 8px 10px; border-radius: 12px; --edge: var(--rare);
  background: radial-gradient(circle at 26px 50%, rgba(255, 210, 94, .28), transparent 60px), linear-gradient(180deg, #2c3550, #1c2236);
  box-shadow: inset 0 0 0 2px var(--edge), 0 0 14px color-mix(in srgb, var(--edge) 45%, transparent); animation: unlock-in .5s cubic-bezier(.2, .9, .3, 1.3) both; }
#results .unlock-row.uncommon { --edge: #5ee07a; } #results .unlock-row.epic { --edge: var(--epic); } #results .unlock-row.legendary { --edge: var(--legendary); } #results .unlock-row.lunar { --edge: var(--lunar); }
#results .unlock-row::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%);
  transform: translateX(-100%); animation: unlock-shine 2.8s ease-in-out .6s infinite; pointer-events: none; }
#results .unlock-row img { width: 44px; height: 44px; flex: none; filter: drop-shadow(0 2px 3px #000); }
#results .unlock-row span { font-size: 16px; font-weight: 900; line-height: 1.15; color: #fff3c6; }
#results .unlock-row em { font-style: normal; font-size: 10px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: #ffd25e; }
#results .unlock-row small { margin-top: 2px; font-size: 11px; font-weight: 700; color: #b8c6a0; }
@keyframes unlock-in { 0% { opacity: 0; transform: scale(.85); } 100% { opacity: 1; transform: none; } }
@keyframes unlock-shine { 0% { transform: translateX(-100%); } 40%, 100% { transform: translateX(100%); } }
/* кнопки: «Ещё забег» — крупная зелёная, «В меню» — скромная под ней */
#results .results-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 4px; }
#results #results-again { padding: 14px 16px; font-size: 20px; font-weight: 900; border-radius: 14px; color: #0d2a14;
  background: linear-gradient(180deg, #e6ffb8 0%, #9cf06a 35%, #4fc24a 100%); box-shadow: inset 0 -4px #2f8a34, 0 5px 0 #0b3a1e, 0 0 18px rgba(124, 255, 90, .35);
  animation: again-pulse 2.2s ease-in-out infinite; }
#results #results-again:active { transform: translateY(3px); box-shadow: inset 0 -2px #2f8a34, 0 2px 0 #0b3a1e; }
#results #results-ok { padding: 9px 14px; font-size: 14px; font-weight: 800; border-radius: 12px; color: #e6dcc0; background: rgba(0, 0, 0, .4); box-shadow: inset 0 0 0 1px rgba(255, 210, 94, .3); }
@keyframes again-pulse { 50% { box-shadow: inset 0 -4px #2f8a34, 0 5px 0 #0b3a1e, 0 0 30px rgba(124, 255, 90, .65); } }
/* правая колонка — карточки */
#results .results-more { gap: 8px; }
#results .results-card { padding: 8px 10px 10px; border-radius: 12px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
#results .results-card[hidden] { display: none; }
#results .results-h { margin: 0 0 6px; font-size: 11px; font-weight: 900; letter-spacing: 1.5px; color: #ffd25e; }
#results .results-fight { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#results .rf { position: relative; display: flex; flex-direction: column; padding: 6px 8px 6px 10px; border-radius: 10px; min-width: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px rgba(255, 210, 94, .2); }
#results .rf:first-child { grid-column: span 2; background: linear-gradient(180deg, rgba(255, 210, 94, .18), rgba(255, 210, 94, .04)); box-shadow: inset 0 0 0 1px rgba(255, 210, 94, .5); }
#results .rf i { position: absolute; right: 7px; top: 5px; font-style: normal; font-size: 15px; opacity: .85; }
#results .rf b { font-size: 20px; font-weight: 900; line-height: 1.1; color: #fff3c6; white-space: nowrap; }
#results .rf:first-child b { font-size: 26px; color: #ffd25e; }
#results .rf span { font-size: 11px; color: #cfc6a0; }
#results .rf small { font-size: 10px; color: #9a9070; }
#results .src-row { grid-template-columns: minmax(0, 1fr) minmax(60px, 1.2fr) 36px; font-size: 13px; }
#results .src-row i { height: 10px; border-radius: 5px; }
#results .results-pair { display: flex; gap: 8px; }
#results .results-pair > .results-card { flex: 1; min-width: 0; }
#results .results-syms { justify-content: flex-start; }
#results .results-items .ri { width: 40px; height: 40px; }
@media (orientation: landscape) {
  #results .menu-panel.results-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: stretch; width: min(940px, 96vw); max-height: 96vh; padding: 14px 16px; }
  #results .results-main, #results .results-more { max-height: none; overflow: visible; padding-right: 0; }
  #results #results-ok { position: static; margin-top: 0; padding-top: 9px; padding-bottom: 9px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  #results .menu-panel.results-panel { padding: 10px 12px; gap: 10px; }
  #results .results-main, #results .results-more { gap: 5px; }
  #results .results-main .menu-title { font-size: 24px; }
  #results .results-stats div { padding: 4px 8px; }
  #results .results-stats b { font-size: 14px; }
  #results .results-crystals { font-size: 19px; }
  #results .unlock-row { padding: 5px 8px; } #results .unlock-row img { width: 34px; height: 34px; } #results .unlock-row span { font-size: 14px; }
  #results #results-again { padding: 9px 12px; font-size: 17px; }
  #results #results-ok { padding: 6px 12px; font-size: 13px; }
  #results .results-card { padding: 6px 8px 7px; }
  #results .rf { padding: 4px 8px; } #results .rf b { font-size: 16px; } #results .rf:first-child b { font-size: 20px; }
  #results .src-row { font-size: 12px; }
  #results .results-items .ri { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) { #results #results-again, #results .unlock-row, #results .unlock-row::after { animation: none; } }
@media (orientation: landscape) and (max-height: 420px) {
  #results { padding: 6px; }
  #results .menu-panel.results-panel { max-height: calc(100vh - 12px); padding: 8px 10px; }
  #results .results-main .menu-title { font-size: 21px; }
  #results .results-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  #results .results-stats div { padding: 3px 6px; font-size: 11px; }
  #results .results-stats div:last-child:nth-child(odd) { grid-column: auto; }
  #results .results-crystals { font-size: 17px; }
  #results .results-fight { gap: 4px; }
  #results .rf span { font-size: 10px; }
  #results .results-h { margin-bottom: 4px; }
}
#results .results-items .ri.more { display: grid; place-items: center; font-size: 13px; font-weight: 900; color: #ffd25e; }

/* v144: умения v2 — призванные (скелеты-лучники, страж), эффекты на герое, пассивки по редкости на картах */
.sk2-summon { position: absolute; z-index: 9; width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); animation: summon-in .35s ease-out, pet-bob 1.2s ease-in-out .35s infinite; transition: left .2s linear, top .2s linear; }
.sk2-summon.ranger { filter: drop-shadow(0 0 6px #7dff5a88) drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.sk2-summon.guardian { width: 52px; height: 52px; filter: drop-shadow(0 0 8px #9dff7a); }
@keyframes summon-in { from { transform: scale(.2) translateY(20px); opacity: 0; filter: brightness(3); } }
#slime.sk2-seal::before { content: ''; position: absolute; left: 50%; bottom: -14px; width: 120px; height: 34px; translate: -50% 0; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse, rgba(255, 90, 60, .55), rgba(255, 210, 94, .25) 50%, transparent 70%); box-shadow: 0 0 18px #ff5a3a; animation: seal-spin 2s linear infinite; }
@keyframes seal-spin { 50% { opacity: .6; transform: scale(1.08); } }
#slime.sk2-ghost #evolved-art, #slime.sk2-ghost .slime-body { filter: drop-shadow(0 0 10px #9ad8ff) brightness(1.15) saturate(.7); opacity: .85; }
#slime.sk2-ice #evolved-art, #slime.sk2-ice .slime-body { filter: drop-shadow(0 0 8px #7fe6ff) drop-shadow(0 0 3px #fff); }
#slime.sk2-holy #evolved-art, #slime.sk2-holy .slime-body { filter: drop-shadow(0 0 10px #fff1b0) drop-shadow(0 0 4px #ffd25e); }
.fx-proj.sk2-fire { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle, #fff3a0, #ff8a1f 60%, #ff3d1f); box-shadow: 0 0 10px 4px #ff7a1f, 0 0 20px 8px #ff3d1f88; }
#cards-list .card.sk2-pas { box-shadow: inset 0 0 0 2px var(--edge, #a8a8b4) !important; }
#cards-list .card.sk2-pas.common { --edge: #a8a8b4; } #cards-list .card.sk2-pas.uncommon { --edge: #5ee07a; } #cards-list .card.sk2-pas.rare { --edge: #5aa0ff; } #cards-list .card.sk2-pas.epic { --edge: #c07bff; }
#cards-list .card.sk2-pas .card-art { width: 64px !important; height: 64px !important; flex: none; }
#cards-list .card.sk2-pas .card-art img { width: 100% !important; height: 100% !important; object-fit: contain; }
#cards-list .card .r-common { color: #c9c9d4; } #cards-list .card .r-uncommon { color: #7dff8a; } #cards-list .card .r-rare { color: #7fb8ff; } #cards-list .card .r-epic { color: #d39bff; }
.sk3 img { object-fit: cover; border-radius: 50%; }

/* v145: рост формы — удачный тап (золотой ромбик и «+2% урона»), мимо (серый); итог снизу и в окне «Новый облик» */
.evo-tap-pips i { position: relative; }
.evo-tap-pips i.lucky { background: #ffd25e !important; box-shadow: 0 0 12px #ffd25e, inset 0 0 0 2px #fff !important; }
.evo-tap-pips i.miss { background: #4a4a4a !important; box-shadow: inset 0 0 0 2px #888 !important; }
.evo-tap-plus { position: absolute; left: 50%; bottom: 150%; rotate: -45deg; translate: -50% 0; white-space: nowrap; font-size: 11px; font-weight: 900; color: #ffd25e; text-shadow: 1px 1px 0 #000;
  animation: grow-plus 1s ease-out forwards; pointer-events: none; }
.evo-tap-plus.miss { color: #bbb; }
@keyframes grow-plus { 0% { opacity: 0; transform: translateY(6px) scale(.6); } 20% { opacity: 1; transform: translateY(0) scale(1.15); } 100% { opacity: 0; transform: translateY(-22px); } }
.evo-tap-gain { position: relative; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; min-height: 22px; }
.grow-chip { padding: 2px 8px; border-radius: 8px; font-size: 12px; font-weight: 900; color: #102a0c; background: linear-gradient(180deg, #ffe48a, #e0a82a); box-shadow: 0 0 8px #ffd25e66; }
.grow-chip.hp { background: linear-gradient(180deg, #ff9a8a, #e0524a); color: #2a0806; }
.grow-chip.spd { background: linear-gradient(180deg, #a8e6ff, #4aa8e0); color: #06202a; }
.grow-chip.none { background: #444; color: #ccc; box-shadow: none; }
.newlook-grow { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; margin-bottom: 6px; font-size: 13px; font-weight: 900; color: #ffd25e; }

/* v145: рюкзак — пиксельный, предметы лежат на срезе пня (assets/ui-backpack.webp) */
.backpack { image-rendering: pixelated; }
.bp-panel { left: 17%; right: 17%; top: 13%; bottom: 15%; }
.bp-head { padding: 4px 10px; border-radius: 12px; background: rgba(40, 22, 8, .78); box-shadow: inset 0 0 0 2px #7a4f2b; align-self: stretch; }
.bp-head h2 { font-size: clamp(20px, 3.4vw, 28px) !important; }
.bp-item { background: radial-gradient(circle at 50% 38%, var(--tint, #3b3f45) 0 40%, rgba(24, 14, 6, .92) 100%); }

/* модалка предмета в стиле слизи: рамка и подтёки цвета редкости (обычный — серо-белый), пиксельные ступени */
.info-modal.wide .info-card { --rc: #cfcfd8; --rd: #6b6b78; border-radius: 6px; background: linear-gradient(180deg, #2a2117, #15100a);
  box-shadow: 0 0 0 3px #000, 0 0 0 6px var(--rc), 0 0 0 9px #000, 0 0 24px color-mix(in srgb, var(--rc) 55%, transparent), 0 14px 40px rgba(0, 0, 0, .7);
  overflow: visible; margin-top: 18px; }
.info-modal.wide .info-card::before { content: ''; position: absolute; left: 6px; right: 6px; top: -14px; height: 22px; pointer-events: none;
  background:
    radial-gradient(circle at 8% 100%, var(--rc) 0 6px, transparent 7px),
    radial-gradient(circle at 22% 100%, var(--rc) 0 4px, transparent 5px),
    radial-gradient(circle at 41% 100%, var(--rc) 0 7px, transparent 8px),
    radial-gradient(circle at 63% 100%, var(--rc) 0 5px, transparent 6px),
    radial-gradient(circle at 84% 100%, var(--rc) 0 6px, transparent 7px),
    linear-gradient(var(--rc), var(--rc)) bottom / 100% 8px no-repeat;
  filter: drop-shadow(0 2px 0 #000); }
.info-modal.wide .info-card::after { content: ''; position: absolute; left: 14%; top: 100%; width: 70%; height: 16px; pointer-events: none;
  background: radial-gradient(circle at 10% 0, var(--rc) 0 5px, transparent 6px), radial-gradient(circle at 46% 0, var(--rc) 0 4px, transparent 5px), radial-gradient(circle at 80% 0, var(--rc) 0 6px, transparent 7px);
  filter: drop-shadow(0 2px 0 #000); opacity: .9; }
.info-modal.wide:has(.im.uncommon) .info-card { --rc: #6be07f; }
.info-modal.wide:has(.im.rare) .info-card { --rc: #5aa0ff; }
.info-modal.wide:has(.im.epic) .info-card { --rc: #c07bff; }
.info-modal.wide:has(.im.legendary) .info-card { --rc: #ff8a3a; }
.info-modal.wide:has(.im.lunar) .info-card { --rc: #7fe6ff; }
.info-modal.wide .im-stage { border-radius: 4px; box-shadow: 0 0 0 3px #000, 0 0 0 5px var(--rc), 0 6px 14px rgba(0, 0, 0, .6); image-rendering: pixelated; }
.info-modal.wide .im-rar { padding: 2px 10px; border-radius: 4px; color: #120c06 !important; background: var(--rc); box-shadow: 0 2px 0 #000; }
.info-modal.wide .im-right h3 { color: var(--rc); text-shadow: 0 2px 0 #000; }
.info-modal.wide .im-stats div { border-radius: 4px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rc) 60%, #000); }
.info-modal.wide .info-close { border-radius: 6px; background: #000; box-shadow: 0 0 0 2px var(--rc); }

/* v145: в бою сверху справа — «В болото» (привал, главное меню) и ⚙ (сразу настройки) */
.arena .home-btn { display: inline-flex; align-items: center; gap: 4px; width: auto !important; padding: 0 9px 0 6px; font-size: 16px; }
.arena .home-btn small { font-size: 11px; font-weight: 900; color: #e6f5df; white-space: nowrap; }
@media (max-height: 460px) { .arena .home-btn small { display: none; } }

/* v146: карта предмета — предмет крупно, чуть выходит за окно; фон — нейтральная тёмная подложка и сильное свечение-круг цвета редкости за предметом;
   чем выше редкость, тем больше переливов (вращающиеся лучи, второй слой, искры). Обычная — только мягкий ореол. */
@property --sh { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.cards #cards-list .card.tcg .card-art { overflow: visible; padding-bottom: 0; align-items: center; isolation: isolate; --glow: .55; --rays: 0; --spd: 14s;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--rc) calc(var(--glow) * 100%), #fff 0%) 0%, color-mix(in srgb, var(--rc) 35%, transparent) 26%, transparent 58%),
    radial-gradient(ellipse at 50% 45%, #2a2621 0%, #15120f 70%, #0b0907 100%) !important; }
.cards #cards-list .card.tcg .card-art::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 6px; pointer-events: none; opacity: var(--rays);
  background: conic-gradient(from var(--sh) at 50% 50%, transparent 0 8%, color-mix(in srgb, var(--rc) 70%, #fff) 12%, transparent 16% 33%, color-mix(in srgb, var(--rc) 60%, #fff) 37%, transparent 41% 58%,
    color-mix(in srgb, var(--rc) 70%, #fff) 62%, transparent 66% 83%, color-mix(in srgb, var(--rc) 60%, #fff) 87%, transparent 91%);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 0 18%, transparent 62%); mask: radial-gradient(circle at 50% 50%, #000 0 18%, transparent 62%);
  animation: art-rays var(--spd) linear infinite; }
@keyframes art-rays { to { --sh: 360deg; } }
.cards #cards-list .card.tcg .card-art img { position: relative; width: 112% !important; height: 112% !important; max-width: none; object-fit: contain;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--rc) 70%, transparent)) drop-shadow(0 5px 4px rgba(0, 0, 0, .75)); animation: art-pulse 3s ease-in-out infinite; }
@keyframes art-pulse { 50% { transform: translateY(-2%) scale(1.02); } }
.cards #cards-list .card.tcg.common .card-art { --glow: .38; }
.cards #cards-list .card.tcg.uncommon .card-art { --glow: .5; --rays: .22; --spd: 16s; }
.cards #cards-list .card.tcg.rare .card-art { --glow: .6; --rays: .38; --spd: 12s; }
.cards #cards-list .card.tcg.epic .card-art { --glow: .7; --rays: .55; --spd: 9s; }
.cards #cards-list .card.tcg.legendary .card-art { --glow: .8; --rays: .72; --spd: 7s; }
.cards #cards-list .card.tcg.lunar .card-art { --glow: .85; --rays: .8; --spd: 6s; }
/* эпик+ — второй слой переливов (против хода) поверх ореола, перламутр */
.cards #cards-list .card.tcg:is(.epic, .legendary, .lunar) .card-art { background:
    conic-gradient(from 0deg at 50% 50%, #ff7ad855, #7ad8ff55, #b6ff7a55, #ffe07a55, #ff7ad855) center / 100% 100% no-repeat,
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--rc) calc(var(--glow) * 100%), #fff 0%) 0%, color-mix(in srgb, var(--rc) 35%, transparent) 26%, transparent 58%),
    radial-gradient(ellipse at 50% 45%, #2a2621 0%, #15120f 70%, #0b0907 100%) !important;
  background-blend-mode: soft-light, normal, normal; }
.cards #cards-list .card.tcg:is(.legendary, .lunar) .card-art img { animation: art-pulse 2.4s ease-in-out infinite, art-shine 2.4s ease-in-out infinite; }
@keyframes art-shine { 50% { filter: drop-shadow(0 0 12px var(--rc)) drop-shadow(0 5px 4px rgba(0, 0, 0, .75)) brightness(1.08); } }
@media (prefers-reduced-motion: reduce) { .cards #cards-list .card.tcg .card-art::before, .cards #cards-list .card.tcg .card-art img { animation: none; } }

/* v146: «Ещё сундук?» — без рамок: большой светящийся сундук, лучи за ним, «стучится»; под ним цена; инструменты (переброс/исключить/автовыбор) и сумка скрыты */
.cards:has(.nc) #cards-tools, .cards:has(.nc) .bag-satchel { display: none !important; }
.cards:has(.nc) .cards-sub .nc-gold { color: #ffd25e; font-weight: 900; }
#cards-list .card.nc { all: unset; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; cursor: pointer;
  width: min(300px, 62vw); height: min(300px, 52vh); margin: 0 auto; -webkit-tap-highlight-color: transparent; }
#cards-list .card.nc .nc-glow { position: absolute; left: 50%; top: 44%; width: 120%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff3b0cc 0%, #ffcf4a88 18%, #ff9a3a33 40%, transparent 66%); animation: nc-breathe 2.4s ease-in-out infinite; }
#cards-list .card.nc .nc-glow::before { content: ''; position: absolute; inset: 0; border-radius: 50%; animation: art-rays 12s linear infinite;
  background: conic-gradient(from var(--sh), transparent 0 6%, #ffe58a99 9%, transparent 12% 22%, #ffe58a77 25%, transparent 28% 38%, #ffe58a99 41%, transparent 44% 54%,
    #ffe58a77 57%, transparent 60% 70%, #ffe58a99 73%, transparent 76% 86%, #ffe58a77 89%, transparent 92%);
  -webkit-mask: radial-gradient(circle, #000 0 20%, transparent 66%); mask: radial-gradient(circle, #000 0 20%, transparent 66%); }
@keyframes nc-breathe { 50% { transform: scale(1.08); opacity: .85; } }
#cards-list .card.nc .nc-img { position: relative; width: 78%; height: auto; max-height: 80%; object-fit: contain; image-rendering: pixelated; transform-origin: 50% 100%;
  filter: drop-shadow(0 0 14px #ffcf4a) drop-shadow(0 8px 6px rgba(0, 0, 0, .6)); animation: nc-bob 2.4s ease-in-out infinite; }
@keyframes nc-bob { 50% { transform: translateY(-4%); } }
#cards-list .card.nc:hover .nc-img { filter: drop-shadow(0 0 22px #ffe58a) drop-shadow(0 8px 6px rgba(0, 0, 0, .6)) brightness(1.08); }
#cards-list .card.nc:active .nc-img { transform: scale(.95); }
#cards-list .card.nc.nc-knock .nc-img { animation: nc-knock .5s ease-out; }
@keyframes nc-knock { 0% { transform: none; } 15% { transform: translateY(-9%) rotate(-5deg) scale(1.04, .97); } 30% { transform: translateY(0) scale(1.06, .93); }
  45% { transform: translateY(-6%) rotate(4deg) scale(1.03, .98); } 62% { transform: translateY(0) scale(1.04, .95); } 100% { transform: none; } }
#cards-list .card.nc .nc-price { position: relative; padding: 9px 22px; border-radius: 12px; font-size: clamp(14px, 2.4vw, 18px); font-weight: 900; color: #fff7dc;
  background: linear-gradient(180deg, #6a4a12, #3a2508); box-shadow: inset 0 0 0 2px #ffd25e, 0 0 14px #ffcf4a66, 0 4px 0 #1a1004; text-shadow: 0 1px 0 #000; white-space: nowrap; }
#cards-list .card.nc .nc-price b { color: #ffd25e; }
#cards-list .card.nc.poor .nc-glow { opacity: .25; animation: none; }
#cards-list .card.nc.poor .nc-img { filter: grayscale(.7) brightness(.7) drop-shadow(0 8px 6px rgba(0, 0, 0, .6)); animation: none; }
#cards-list .card.nc.poor .nc-price { background: #2a1d14; box-shadow: inset 0 0 0 2px #7a5a3a; color: #d8c8b0; }
#cards-list .card.nc.poor .nc-price b { color: #ff8a7a; }
#cards-list .card.nc.nc-no { animation: nc-no .35s; }
@keyframes nc-no { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (orientation: landscape) and (max-height: 460px) { #cards-list .card.nc { height: min(220px, 56vh); width: min(240px, 40vw); } }
#cards-list .card.nc { background: none !important; box-shadow: none !important; border: 0 !important; outline: 0 !important; overflow: visible !important; }
#cards-list .card.nc::after, #cards-list .card.nc::before { display: none !important; }
#cards-list .card.nc .nc-glow { width: 135%; background: radial-gradient(circle, #fff6c8 0%, #ffd25ecc 14%, #ffb04a77 32%, #ff9a3a2a 50%, transparent 68%); }
#cards-list .card.nc .nc-glow { width: 210%; top: 50%; }

/* v146: выбор умения — болотный фон вместо фиолетового; слева герой на кочке и его 3 ячейки; карты-капли слизи, цвет — тип умения */
.cards.passive-mode:has(.sk-card) { background: radial-gradient(ellipse at 50% 40%, rgba(28, 64, 34, .9), rgba(6, 16, 9, .96) 72%); }
.cards.passive-mode:has(.sk-card) .cards-title { color: #d8ffc4; text-shadow: 0 0 14px #5dff3a88, 2px 2px 0 #000; }
.cards.passive-mode:has(.sk-card) .cards-sub { color: #b9d8a8; }
.cards.passive-mode:has(.sk-card) .cards-close { background: rgba(14, 32, 18, .92); color: #d8ffc4; box-shadow: inset 0 0 0 2px #4f8a3a; }
/* v149: карты — горизонтальные строки одна под другой (как договор хранителя), до 560px; герой с ячейками — слева от списка */
.cards.passive-mode:has(.sk-card) .cards-box { max-width: min(780px, 100%); }
.cards.passive-mode:has(.sk-card) #cards-list { display: grid; grid-template-columns: auto minmax(0, 560px); justify-content: center; align-items: stretch;
  column-gap: clamp(12px, 2.4vw, 28px); row-gap: 10px; margin-top: 14px; }
.cards.passive-mode:has(.sk-card) #cards-list > .sk-hero { grid-column: 1; grid-row: 1 / span 3; align-self: center; }
.cards.passive-mode:has(.sk-card) #cards-list > .card { grid-column: 2; }
/* герой */
.sk-hero { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; flex: 0 0 auto; width: clamp(110px, 16vw, 170px); padding-bottom: 6px; }
.sk-hero-stage { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: end center; }
.sk-hero-stage::before { content: ''; position: absolute; left: 8%; right: 8%; bottom: 2%; height: 22%; border-radius: 50%;
  background: radial-gradient(ellipse, #3d7a2c 0%, #1f4318 60%, transparent 72%); }
.sk-hero-stage::after { content: ''; position: absolute; inset: 10% 0 0; border-radius: 50%; background: radial-gradient(circle, #8dff6a40, transparent 65%); z-index: 0; }
.sk-hero-img { position: relative; z-index: 1; width: 86%; height: 86%; object-fit: contain; object-position: 50% 100%; image-rendering: pixelated; margin-bottom: 8%;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .6)); animation: sk-hero-bob 1.8s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes sk-hero-bob { 50% { transform: scale(1.04, .96); } }
.sk-slots { display: flex; gap: 6px; }
.sk-slot { position: relative; width: clamp(28px, 4vw, 40px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #5f8a52; font-size: 16px;
  background: radial-gradient(circle at 35% 30%, #2a4a26, #0e1c0c); box-shadow: inset 0 0 0 2px #3c6a32; }
.sk-slot img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.sk-slot.on { box-shadow: 0 0 0 2px #9dff7a, 0 0 8px #9dff7a77; }
.sk-slot i { position: absolute; right: -6px; bottom: -4px; font-style: normal; font-size: 10px; color: #ffd25e; text-shadow: 1px 1px 0 #000; }
.sk-slot.next { color: #d8ffc4; box-shadow: inset 0 0 0 2px #9dff7a; animation: sk-next 1.2s ease-in-out infinite; }
@keyframes sk-next { 50% { box-shadow: inset 0 0 0 2px #d8ffc4, 0 0 12px #9dff7a; } }
/* карта-плашка: скруглённая строка, тип — цветом заливки и тонкого канта; иконка как есть, без колец и бликов */
.cards.passive-mode #cards-list .card.sk-card { --tc: #ff8a4a; position: relative; display: flex !important; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px;
  width: 100%; min-height: 0; margin: 0; padding: 10px 26px 10px 12px !important; text-align: left; overflow: visible; border: 0 !important; border-radius: 999px !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 32%, #10201a), color-mix(in srgb, var(--tc) 12%, #0d1912) 75%) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 50%, transparent), 0 3px 0 rgba(0, 0, 0, .3) !important;
  animation: none; transition: transform .15s, filter .15s; }
.cards.passive-mode #cards-list .card.sk-card:hover { transform: translateX(4px); filter: brightness(1.12); }
.cards.passive-mode #cards-list .card.sk-card::before { display: none !important; }
.cards.passive-mode #cards-list .card.sk-card.t-atk { --tc: #ff7a3a; }
.cards.passive-mode #cards-list .card.sk-card.t-summon { --tc: #7dff5a; }
.cards.passive-mode #cards-list .card.sk-card.t-buff { --tc: #ffd25e; }
.cards.passive-mode #cards-list .card.sk-card.t-def { --tc: #5ac8ff; }
.cards.passive-mode #cards-list .card.sk-card.t-pas { --tc: #c9d1d6; }
.cards.passive-mode #cards-list .card.sk-card.t-pas.uncommon { --tc: #7dff8a; } .cards.passive-mode #cards-list .card.sk-card.t-pas.rare { --tc: #4fa8ff; } .cards.passive-mode #cards-list .card.sk-card.t-pas.epic { --tc: #c07bff; }
.cards.passive-mode #cards-list .card.sk-card.t-up { --tc: #ffd25e; }
.cards.passive-mode #cards-list .card.sk-card .card-art { position: relative; width: 64px !important; height: 64px !important; flex: none; margin: 0 !important; border: 0 !important; border-radius: 50% !important;
  background: none !important; box-shadow: none !important; overflow: visible !important; }
.cards.passive-mode #cards-list .card.sk-card .card-art > img { width: 100% !important; height: 100% !important; border-radius: 50%; object-fit: cover; image-rendering: auto; }
.cards.passive-mode #cards-list .card.sk-card .card-art::after { display: none !important; }
.cards.passive-mode #cards-list .card.sk-card .sk-up-badge { right: -10%; bottom: -10%; width: 46%; }
.cards.passive-mode #cards-list .card.sk-card .card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: 1; min-width: 0; }
/* тег и название — в одну строку (переносятся, если не влезают), под ними описание целиком */
.cards.passive-mode #cards-list .card.sk-card .card-head { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 3px 8px; width: 100%; padding-right: 0 !important; text-align: left; }
.cards.passive-mode #cards-list .card.sk-card .card-name { font-size: 17px; font-weight: 900; text-transform: none; color: #f2ffe8; line-height: 1.15; text-shadow: 0 1px 0 #000; text-align: left; }
.cards.passive-mode #cards-list .card.sk-card .card-rarity, .cards.passive-mode #cards-list .card.sk-card .sk-up-tag { order: -1; margin: 0 !important; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: .5px;
  text-transform: uppercase; white-space: nowrap; color: #0d140b; background: var(--tc); box-shadow: none; }
.cards.passive-mode #cards-list .card.sk-card .sk-up-pips { margin-left: 0; }
.cards.passive-mode #cards-list .card.sk-card .card-desc { width: 100%; font-size: 14px; line-height: 1.3; color: #d9ecd0; text-align: left; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
/* полёт сферы в героя и «глоток» */
.sk-fly { position: fixed; z-index: 400; pointer-events: none; border-radius: 50%; box-shadow: 0 0 16px #9dff7a; }
.slime.sk-gulp { animation: sk-gulp .45s ease-out; }
@keyframes sk-gulp { 30% { transform: scale(1.18, .85); } 60% { transform: scale(.93, 1.08); } 100% { transform: none; } }
/* узкий экран (телефон вертикально): герой с ячейками — над списком, строки на всю ширину */
@media (max-width: 640px), (orientation: portrait) {
  .cards.passive-mode:has(.sk-card) #cards-list { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .cards.passive-mode:has(.sk-card) #cards-list > .sk-hero { grid-column: 1; grid-row: auto; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 12px; width: auto; padding: 0; margin-bottom: 2px; }
  .cards.passive-mode:has(.sk-card) #cards-list > .card { grid-column: 1; }
  .sk-hero-stage { width: 64px; }
  .cards.passive-mode #cards-list .card.sk-card { gap: 12px; padding: 10px 18px 10px 10px !important; border-radius: 40px !important; }
  .cards.passive-mode #cards-list .card.sk-card .card-art { width: 54px !important; height: 54px !important; }
  .cards.passive-mode #cards-list .card.sk-card .card-name { font-size: 16px; }
  .cards.passive-mode #cards-list .card.sk-card .card-desc { font-size: 13px; -webkit-line-clamp: 4; }
}
/* низкий горизонтальный экран (повёрнутый телефон): строки ниже, описание в 2 строки */
@media (orientation: landscape) and (max-height: 460px) {
  .sk-hero { width: 96px; gap: 4px; } .sk-slot { width: 24px; font-size: 12px; }
  .cards.passive-mode:has(.sk-card) #cards-list { row-gap: 5px; margin-top: 4px; margin-bottom: 0; }
  .cards.passive-mode:has(.sk-card) .cards-title small { font-size: 10px; }
  .cards.passive-mode:has(.sk-card) .cards-close { padding-top: 6px; padding-bottom: 6px; }
  .cards.passive-mode #cards-list .card.sk-card { gap: 10px; padding: 3px 20px 3px 8px !important; }
  .cards.passive-mode #cards-list .card.sk-card .card-art { width: 40px !important; height: 40px !important; }
  .cards.passive-mode #cards-list .card.sk-card .card-body { gap: 1px; }
  .cards.passive-mode #cards-list .card.sk-card .card-name { font-size: 14px; }
  .cards.passive-mode #cards-list .card.sk-card .card-rarity, .cards.passive-mode #cards-list .card.sk-card .sk-up-tag { font-size: 9px; padding: 1px 6px; }
  .cards.passive-mode #cards-list .card.sk-card .card-desc { font-size: 12px; line-height: 1.18; -webkit-line-clamp: 2; }
}

/* v146: тени только под ногами (эллипс), без теней по контуру; при прыжке тень меньше и бледнее, при приземлении — чётче */
.pet, .pet.grounded { filter: none; }
.pet-shadow { position: absolute; z-index: 8; height: 10px; margin-top: -5px; translate: -50% 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, .32) 45%, transparent 72%); transition: left .5s ease-in-out, top .5s ease-in-out, width .4s;
  animation: pet-shadow-bob 1.4s ease-in-out infinite; }
.pet-shadow[hidden] { display: none; }
@keyframes pet-shadow-bob { 50% { transform: scaleX(1.05); } }
.pet-shadow.flyer { opacity: .55; animation: pet-shadow-fly 2.4s ease-in-out infinite; }
@keyframes pet-shadow-fly { 50% { transform: scale(.8); opacity: .4; } }
.pet-shadow.up { animation: pet-shadow-up .35s ease-out; }
@keyframes pet-shadow-up { 40% { transform: scale(.62); opacity: .45; } 100% { transform: none; opacity: 1; } }
.arena.running .pet-shadow:not(.flyer) { animation: shadow-run .34s ease-in-out infinite; }
/* призванные (скелеты, страж): тень — фоном самой картинки, эллипс у ног */
.sk2-summon, .sk2-summon.ranger { filter: none; background: radial-gradient(ellipse 32% 7% at 50% 94%, rgba(0, 0, 0, .5), rgba(0, 0, 0, .25) 60%, transparent 100%) no-repeat; }
.sk2-summon.ranger { filter: drop-shadow(0 0 5px #7dff5a66); }
/* босс: тень эллипсом от .mon::after, без смещённой тени по контуру */
.mon.boss .art img { filter: none; }
/* v146: «i» на камне — тёмная с белым бликом: читается и на светлых (зелёный, жёлтый, серый) камнях */
.card.tcg .tcg-info { color: #14110c; text-shadow: 0 1px 0 rgba(255, 255, 255, .55); }
.card.tcg:is(.rare, .epic, .lunar) .tcg-info { color: #fff8e0; text-shadow: 0 1px 1px rgba(0, 0, 0, .8); }

/* v146: модалка предмета — простая карточка в одну колонку */
.info-modal:has(.im2) .info-card { width: min(340px, 92vw); max-height: 92vh; overflow-y: auto; padding: 18px 18px 16px; border-radius: 22px; text-align: center;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--rc, #9dff7a) 22%, transparent), transparent 55%), linear-gradient(180deg, #1c2a19, #0f170d);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rc, #9dff7a) 75%, #000), 0 10px 30px rgba(0, 0, 0, .6), 0 0 24px color-mix(in srgb, var(--rc, #9dff7a) 30%, transparent); }
.info-modal:has(.im2) .info-card::before, .info-modal:has(.im2) .info-card::after { display: none !important; }
.info-modal:has(.im2) .info-close { width: 30px; height: 30px; right: 10px; top: 10px; border-radius: 50%; font-size: 14px; background: rgba(0, 0, 0, .4); box-shadow: none; color: #d8e8d0; }
.info-modal:has(.im2.common) .info-card { --rc: #c9d1d6; } .info-modal:has(.im2.uncommon) .info-card { --rc: #7dff8a; } .info-modal:has(.im2.rare) .info-card { --rc: #4fa8ff; }
.info-modal:has(.im2.epic) .info-card { --rc: #c07bff; } .info-modal:has(.im2.legendary) .info-card { --rc: #ffcf4a; } .info-modal:has(.im2.lunar) .info-card { --rc: #ff4d5e; }
.im2 { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.im2-art { width: 132px; height: 132px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--rc) 55%, #fff 0%) 0%, color-mix(in srgb, var(--rc) 25%, transparent) 38%, transparent 68%); }
.im2-art img { width: 112px; height: 112px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--rc) 60%, transparent)); }
.im2 h3 { margin: 0; font-size: 22px; font-weight: 900; color: #f4ffe8; }
.im2-tags { display: flex; gap: 6px; justify-content: center; }
.im2-rar { padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; color: #10140e; background: var(--rc); }
.im2-have { padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #d8e8d0; background: rgba(255, 255, 255, .08); }
.im2-desc { margin: 4px 0 0; font-size: 16px; line-height: 1.35; font-weight: 700; color: #eef6e8; }
.im2-desc .num { color: #ffd25e; } .im2-desc .kw { color: #9dff7a; } .im2-desc .minus { color: #ff8a7a; }
.im2-next, .im2-cur { width: 100%; padding: 8px 10px; border-radius: 12px; font-size: 13px; font-weight: 800; color: #f4ecd0; background: rgba(255, 210, 94, .1); box-shadow: inset 0 0 0 1px rgba(255, 210, 94, .35); }
.im2-next b, .im2-cur { color: #ffd25e; }
.im2-cur { background: rgba(255, 210, 94, .18); }
.im2-extra { width: 100%; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 12px; text-align: left; }

.fx-puff { position: fixed; width: 18px; height: 10px; border-radius: 50%; pointer-events: none; z-index: 30; translate: -50% -50%;
  background: radial-gradient(ellipse, rgba(225, 215, 190, .55), rgba(225, 215, 190, 0) 70%); animation: fx-puff .45s ease-out forwards; }
@keyframes fx-puff { to { transform: translateX(-14px) scale(1.8, 1.4); opacity: 0; } }
.pet-shadow { z-index: 2; }

/* v147: плашка героя — три варианта ширины. Правило адаптива: ширина = clamp(минимум для телефона, доля ширины экрана, максимум для десктопа);
   на низком экране (телефон лёжа, высота ≤ 460) плашка всегда сжимается до компактной, лишнее (опыт числом) прячется первым */
/* A — минимальная: как была, но имя не режется до 96px — до ширины полосы, длинные имена с «…» */
body.plate-a .arena #portrait-form { max-width: 150px; }
body.plate-a .arena .hp-line { width: 150px; }
/* B — оптимальная: влезает самое длинное имя («Живая осадная машина»), на десктопе полоса чуть длиннее */
body.plate-b .arena #portrait-form { max-width: none; overflow: visible; white-space: nowrap; }
body.plate-b .arena .hero-card-text small#portrait-name { max-width: none; }
body.plate-b .arena .hp-line { width: clamp(156px, 17vw, 220px); }
/* C — широкая: имя + «ур. N» + опыт числом, длинная полоса здоровья; на телефоне — как B */
body.plate-c .arena #portrait-form { max-width: none; overflow: visible; white-space: nowrap; }
body.plate-c .arena .hero-card-text small#portrait-name { max-width: none; align-items: baseline; gap: 6px; }
body.plate-c .arena #portrait-level { display: inline; margin: 0; font-size: 11px; }
body.plate-c .arena #portrait-xp { display: inline; margin: 0; font-size: 10px; opacity: .85; }
body.plate-c .arena .hp-line { width: clamp(156px, 26vw, 330px); height: 20px; }
@media (max-height: 460px) {
  body.plate-b .arena .hp-line, body.plate-c .arena .hp-line { width: 156px; height: 18px; }
  body.plate-c .arena #portrait-xp { display: none; }
  body.plate-b .arena .hero-card-text small#portrait-name, body.plate-c .arena .hero-card-text small#portrait-name { font-size: 11.5px; }
}

/* v147: «Забрать» в окне «Ты получил» — большая золотая кнопка в стиле рамок карт: тёмный кант + костяная рамка, золотое тело,
   капли золотой слизи снизу, блик пробегает, кнопка дышит; по центру внизу, размер — от экрана (телефон/десктоп) */
#cards.gift-mode #cards-close:not(.hidden) { position: fixed !important; left: 50%; bottom: calc(14px + var(--sa-bottom)); translate: -50% 0; z-index: 6; margin: 0;
  display: grid; place-items: center; width: clamp(220px, 32vw, 380px); min-width: 0; height: clamp(50px, 11vh, 68px); padding: 0 24px; overflow: visible;
  border: 0; border-radius: 18px; cursor: pointer; isolation: isolate;
  font-family: 'Rubik Wet Paint', 'Nunito', system-ui, sans-serif !important; font-size: clamp(22px, 3.2vw, 32px); font-weight: 400; letter-spacing: 1px; line-height: 1;
  color: #3a1f04; text-shadow: 0 1px 0 #fff3b0, 0 -1px 0 rgba(120, 60, 0, .35);
  background: linear-gradient(180deg, #fff1a6 0%, #ffd34a 28%, #f2a91c 62%, #c9760c 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .55), inset 0 -5px 0 rgba(120, 60, 0, .45), inset 0 0 0 2px #2a1a08, inset 0 0 0 4px #d9dccf, inset 0 0 0 5px #4a4a40,
    0 0 0 2px #0e0b07, 0 6px 0 #6e3f06, 0 8px 14px rgba(0, 0, 0, .55), 0 0 28px #ffcf4a88;
  animation: take-breathe 1.6s ease-in-out infinite; }
@keyframes take-breathe { 50% { transform: scale(1.04); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .55), inset 0 -5px 0 rgba(120, 60, 0, .45), inset 0 0 0 2px #2a1a08, inset 0 0 0 4px #d9dccf, inset 0 0 0 5px #4a4a40,
    0 0 0 2px #0e0b07, 0 6px 0 #6e3f06, 0 8px 14px rgba(0, 0, 0, .55), 0 0 44px #ffd25ecc; } }
/* блик */
#cards.gift-mode #cards-close:not(.hidden)::before { content: ''; display: block !important; position: absolute; inset: 5px; z-index: -1; border-radius: 13px; pointer-events: none; opacity: 1;
  background: linear-gradient(105deg, transparent 0 38%, rgba(255, 255, 255, .7) 46%, transparent 54% 100%) -160% 0 / 250% 100% no-repeat; animation: take-shine 2.4s ease-in-out infinite; }
@keyframes take-shine { 0%, 40% { background-position: -160% 0; } 100% { background-position: 160% 0; } }
/* капли золотой слизи по низу */
#cards.gift-mode #cards-close:not(.hidden)::after { content: ''; display: block !important; position: absolute; left: 12%; right: 12%; bottom: -13px; height: 16px; pointer-events: none; z-index: -2; opacity: 1;
  background: radial-gradient(circle at 10% 0, #e09a16 0 6px, transparent 7px), radial-gradient(circle at 34% 0, #e09a16 0 9px, transparent 10px),
    radial-gradient(ellipse 5px 9px at 34% 8px, #e09a16 0 4px, transparent 5px), radial-gradient(circle at 63% 0, #e09a16 0 7px, transparent 8px),
    radial-gradient(circle at 88% 0, #e09a16 0 5px, transparent 6px), radial-gradient(ellipse 4px 8px at 88% 6px, #e09a16 0 3px, transparent 4px); }
#cards.gift-mode #cards-close:not(.hidden):hover { filter: brightness(1.08); }
#cards.gift-mode #cards-close:not(.hidden):active { animation: none; transform: translateY(4px) scale(.98); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(120, 60, 0, .45),
    inset 0 0 0 2px #2a1a08, inset 0 0 0 4px #d9dccf, inset 0 0 0 5px #4a4a40, 0 0 0 2px #0e0b07, 0 2px 0 #6e3f06, 0 0 24px #ffcf4a88; }
.cards.gift-mode #cards-list { padding-bottom: clamp(70px, 15vh, 96px); }
@media (max-height: 460px) { #cards.gift-mode #cards-close:not(.hidden) { height: 48px; width: clamp(200px, 30vw, 300px); bottom: calc(10px + var(--sa-bottom)); } }
#cards.gift-mode #cards-close:not(.hidden) { border-radius: 18px !important; }
#cards.gift-mode #cards-close:not(.hidden)::after { bottom: -16px; height: 20px; transform: scale(1.25); transform-origin: 50% 0; }


/* v148: «Новый облик» в стиле слизи: болотный фон с каплями сверху; панель-капля с зелёным кантом; новый облик — крупно на кочке,
   за ним вращаются лучи; старый — маленький и бледный; имя — Rubik Wet Paint; характеристики — слизистые плашки; кнопка — большая сочная зелёная */
.newlook { background: radial-gradient(ellipse at 50% 35%, rgba(46, 104, 40, .96), rgba(8, 20, 10, .98) 72%); }
.newlook::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 26px; pointer-events: none; opacity: .9;
  background: radial-gradient(circle at 6% 0, #5bd13a 0 12px, transparent 13px), radial-gradient(circle at 19% 0, #5bd13a 0 18px, transparent 19px),
    radial-gradient(circle at 33% 0, #5bd13a 0 9px, transparent 10px), radial-gradient(circle at 52% 0, #5bd13a 0 15px, transparent 16px),
    radial-gradient(circle at 68% 0, #5bd13a 0 11px, transparent 12px), radial-gradient(circle at 84% 0, #5bd13a 0 17px, transparent 18px), radial-gradient(circle at 96% 0, #5bd13a 0 10px, transparent 11px); }
.newlook-panel { position: relative; padding: 18px 20px 20px; border-radius: 30px 30px 22px 22px;
  background: radial-gradient(ellipse at 50% 0%, rgba(125, 255, 90, .18), transparent 55%), linear-gradient(180deg, #1d3a1c, #0e1d0e);
  box-shadow: inset 0 0 0 2px #7dff5a, inset 0 -12px 22px rgba(0, 0, 0, .35), 0 8px 0 rgba(0, 0, 0, .35), 0 0 30px rgba(125, 255, 90, .25); }
.newlook-panel::before { content: ''; position: absolute; left: 12%; right: 12%; top: -2px; height: 18px; pointer-events: none;
  background: radial-gradient(circle at 12% 0, #7dff5a 0 7px, transparent 8px), radial-gradient(circle at 40% 0, #7dff5a 0 10px, transparent 11px),
    radial-gradient(ellipse 5px 10px at 40% 9px, #7dff5a 0 4px, transparent 5px), radial-gradient(circle at 72% 0, #7dff5a 0 6px, transparent 7px), radial-gradient(circle at 92% 0, #7dff5a 0 8px, transparent 9px); }
.newlook-panel > small { color: #ffd25e; font-weight: 900; }
.newlook-panel h2 { color: #d8ffc4 !important; text-shadow: 0 0 16px #5dff3a99, 2px 2px 0 #000 !important; }
.newlook-row { gap: 14px; }
#newlook-old { width: 64px; height: 64px; opacity: .5; filter: grayscale(.6) brightness(.85); }
.newlook-arrow { font-size: 0; width: 34px; height: 22px; background: no-repeat center / contain
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='22' shape-rendering='crispEdges'%3E%3Cpath fill='%237dff5a' d='M0 8h20V2h4v2h2v2h2v2h2v2h2v2h-2v2h-2v2h-2v2h-2v2h-4v-6H0z'/%3E%3Cpath fill='%23d8ffc4' d='M2 10h18v2H2z'/%3E%3C/svg%3E");
  animation: nl-arrow 1s ease-in-out infinite; }
@keyframes nl-arrow { 50% { transform: translateX(4px); } }
.nl-stage { position: relative; display: grid; place-items: center; width: 170px; height: 150px; }
.nl-stage::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: 6px; height: 22%; border-radius: 50%; z-index: 0;
  background: radial-gradient(ellipse, #3f8a2c 0, #1f4a16 60%, transparent 72%); }
.nl-rays { position: absolute; left: 50%; top: 46%; width: 210px; height: 210px; translate: -50% -50%; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(216, 255, 196, .65) 0, rgba(125, 255, 90, .28) 30%, transparent 62%); }
.nl-rays::before { content: ''; position: absolute; inset: 0; border-radius: 50%; animation: art-rays 10s linear infinite;
  background: conic-gradient(from var(--sh), transparent 0 6%, #b6ff8a88 9%, transparent 12% 22%, #b6ff8a66 25%, transparent 28% 38%, #b6ff8a88 41%, transparent 44% 54%,
    #b6ff8a66 57%, transparent 60% 70%, #b6ff8a88 73%, transparent 76% 86%, #b6ff8a66 89%, transparent 92%);
  -webkit-mask: radial-gradient(circle, #000 0 18%, transparent 66%); mask: radial-gradient(circle, #000 0 18%, transparent 66%); }
.nl-stage #newlook-new { position: relative; z-index: 1; width: 140px; height: 140px; object-fit: contain; object-position: 50% 100%; margin-bottom: 4px;
  filter: drop-shadow(0 0 10px #9dff7a) drop-shadow(0 4px 3px rgba(0, 0, 0, .5)); animation: nl-hero-in .6s cubic-bezier(.3, 1.6, .5, 1) both, nl-hero-bob 1.8s ease-in-out .6s infinite; transform-origin: 50% 100%; }
@keyframes nl-hero-in { from { transform: scale(.3) translateY(20px); opacity: 0; } }
@keyframes nl-hero-bob { 50% { transform: scale(1.05, .95); } }
#newlook-name { font-family: 'Rubik Wet Paint', 'Nunito', sans-serif !important; font-weight: 400; font-size: 24px; letter-spacing: .5px; color: #f2ffe8; text-shadow: 0 0 10px #5dff3a77, 2px 2px 0 #000; }
.newlook-grow { padding: 4px 12px; border-radius: 999px; background: rgba(255, 210, 94, .12); box-shadow: inset 0 0 0 1px rgba(255, 210, 94, .45); }
.newlook .nl-stat { border-radius: 999px; padding: 6px 14px; background: linear-gradient(180deg, rgba(60, 110, 50, .55), rgba(20, 44, 18, .7)); box-shadow: inset 0 0 0 1.5px rgba(125, 255, 90, .45); }
.newlook .nl-stat em { color: #9dff7a; font-weight: 900; }
.newlook .nl-skill { border-radius: 16px; padding: 8px 12px; background: linear-gradient(180deg, rgba(255, 210, 94, .16), rgba(255, 210, 94, .06)); box-shadow: inset 0 0 0 1.5px rgba(255, 210, 94, .55); }
.newlook #newlook-ok { position: relative; height: 54px; border: 0; border-radius: 18px !important; font-family: 'Rubik Wet Paint', 'Nunito', sans-serif !important; font-size: 24px; font-weight: 400;
  letter-spacing: 1px; color: #0d2a08; text-shadow: 0 1px 0 #e8ffd8; background: linear-gradient(180deg, #d8ffb0 0%, #8dff5a 30%, #4fc432 70%, #2f8f1e 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .5), inset 0 -5px 0 rgba(10, 60, 0, .4), inset 0 0 0 2px #0e2a08, 0 0 0 2px #071205, 0 6px 0 #1d5a12, 0 0 22px #7dff5a77;
  animation: take-breathe-g 1.6s ease-in-out infinite; overflow: visible; }
.newlook #newlook-ok::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: -14px; height: 16px; pointer-events: none;
  background: radial-gradient(circle at 12% 0, #3fae28 0 6px, transparent 7px), radial-gradient(circle at 40% 0, #3fae28 0 9px, transparent 10px), radial-gradient(ellipse 5px 9px at 40% 8px, #3fae28 0 4px, transparent 5px),
    radial-gradient(circle at 70% 0, #3fae28 0 6px, transparent 7px), radial-gradient(circle at 90% 0, #3fae28 0 5px, transparent 6px); }
@keyframes take-breathe-g { 50% { transform: scale(1.03); } }
.newlook #newlook-ok:active { transform: translateY(3px) scale(.98); animation: none; }
@media (orientation: landscape) and (max-height: 560px) {
  .newlook-panel { padding: 14px 18px 18px; }
  .nl-stage { width: 140px; height: 118px; } .nl-rays { width: 170px; height: 170px; } .nl-stage #newlook-new { width: 112px; height: 112px; }
  #newlook-old { width: 48px; height: 48px; }
  #newlook-name { font-size: 20px; }
  .newlook #newlook-ok { height: 46px; font-size: 21px; }
}

/* v148: смерть босса — фон трясётся и вспыхивает, лапы падают; потом темнеет; награда — на тёмном фоне поверженного босса */
.boss-backdrop.dying { animation: boss-die-shake .12s linear infinite, boss-die-flash .26s steps(1) infinite; }
@keyframes boss-die-shake { 25% { transform: translate(3px, -2px); } 50% { transform: translate(-3px, 2px); } 75% { transform: translate(2px, 3px); } }
@keyframes boss-die-flash { 50% { filter: brightness(1.8) saturate(1.4) sepia(.3); } }
.boss-backdrop.dead { animation: none; filter: brightness(.32) saturate(.5); transition: filter .8s ease-out; }
.boss-limb.dying { transition: translate .9s cubic-bezier(.5, 0, .9, .4), opacity .9s, rotate .9s; translate: 0 70% !important; rotate: 8deg; opacity: 0; animation: none !important; }
.boss-limb.right.dying { rotate: -8deg; }
#cards.boss-reward { background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .78)), #000 var(--boss-tall) center bottom / cover no-repeat; }
@media (orientation: landscape) { #cards.boss-reward { background-image: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .78)), var(--boss-wide); } }
#cards.boss-reward .cards-title { color: #ffd25e; text-shadow: 0 0 16px #ff9a3a99, 2px 2px 0 #000; }

/* v149: настройки — две вкладки: «Игра» и «Тест-лаборатория» (админ-переключатели механик карточками с иконками и кнопками-плашками) */
.set-panel { width: min(720px, 100%); }
.set-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.set-tabs { display: flex; gap: 6px; padding: 4px; border-radius: 14px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(214, 196, 140, .25); }
.set-tab { padding: 7px 14px; border: 0; border-radius: 10px; background: none; color: #cdbf98; font: inherit; font-size: 13px; font-weight: 900; cursor: pointer; }
.set-tab.on { background: linear-gradient(180deg, #ffe48a, #e0a82a); color: #2a1a04; box-shadow: 0 2px 0 #7a5410; }
.set-page[hidden] { display: none; }
#menu-settings-screen .settings-row { gap: 12px; justify-content: flex-start; }
#menu-settings-screen .settings-row > span { flex: 1; }
#menu-settings-screen .settings-row > button { margin-left: auto; }
.set-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-style: normal; font-size: 18px;
  background: radial-gradient(circle at 35% 30%, #3e3626, #1a160e); box-shadow: inset 0 0 0 1px rgba(214, 196, 140, .35); }
.set-stats { border-bottom: 0 !important; }
.lab-note { margin: 8px 0 12px; font-size: 12px; color: #cdbf98; }
.lab-note b { color: #ffd25e; }
.lab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 12px; }
.lab-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 10px; row-gap: 3px; align-items: center; padding: 12px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(48, 42, 30, .92), rgba(22, 19, 13, .95)); box-shadow: inset 0 0 0 1px rgba(214, 196, 140, .35), 0 3px 8px rgba(0, 0, 0, .4); }
.lab-card.wide { grid-column: 1 / -1; }
.lab-card > .set-ic { grid-row: 1 / 3; }
.lab-card > b { font-size: 14px; color: #ffe9b0; }
.lab-card > small { grid-column: 2; font-size: 11px; line-height: 1.3; color: #b8ab88; }
.lab-card > .mech-select { display: none; }
.lab-card > .mech-seg, .lab-card > .lab-dev { grid-column: 1 / -1; margin-top: 8px; }
.mech-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg-btn { flex: 1 1 auto; padding: 7px 10px; border: 0; border-radius: 10px; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; color: #d8ccaa;
  background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(214, 196, 140, .3); }
.seg-btn:hover { color: #fff; }
.seg-btn.on { color: #102008; background: linear-gradient(180deg, #b6ff8a, #4fc432); box-shadow: inset 0 -2px 0 rgba(0, 60, 0, .35), 0 0 10px #7dff5a55; }
.lab-dev { justify-self: start; min-width: 90px; }
@media (max-height: 460px) { .set-ic { width: 28px; height: 28px; font-size: 15px; } .lab-card { padding: 9px; } .lab-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
#menu-settings-screen .settings-row > span { text-align: left; color: #e6dcc0; font-weight: 800; }
#menu-settings-screen .settings-row .settings-note { text-align: left; font-weight: 600; }
#menu-settings-screen [data-skills-setting][hidden] { display: none; }
#menu-settings-screen .settings-level { flex-wrap: wrap; }
#menu-settings-screen .settings-level > span { min-width: 0; flex-basis: 170px; }
#menu-settings-screen .settings-level > .mech-select { flex: 0 0 auto; min-height: 44px; margin-left: auto; cursor: pointer; }
#menu-settings-screen .settings-level > .mech-select:focus-visible { outline: 3px solid #ffd25e; outline-offset: 3px; }
#menu-settings-screen .settings-level .level-current { opacity: 1; color: #c9ff7a; }
@media (max-width: 460px) {
  #menu-settings-screen .settings-level > .mech-select { flex-basis: 100%; }
}
.lab-card { text-align: left; } .lab-card > b, .lab-card > small { text-align: left; }

/* v150: щит босса — отдельная полоска с 🛡 под полосой здоровья (раньше синий кусок за ХП выглядел как отнятое здоровье);
   в бою с боссом предметы героя ниже полосы с отступом, чтобы значки-счётчики не налезали на число здоровья */
.boss-shield { display: flex; align-items: center; gap: 5px; width: 78%; margin: 4px auto 0; }
.boss-shield[hidden] { display: none; }
.boss-shield b { font-size: 13px; line-height: 1; filter: drop-shadow(0 0 4px #7fd8ff); }
.boss-shield span { position: relative; flex: 1; height: 8px; border-radius: 5px; background: #0b1a2a; box-shadow: 0 0 0 1.5px #000, 0 0 0 3px #3a7ab8; overflow: hidden; }
.boss-shield span i { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: 5px; transition: width .15s;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .28) 0 4px, transparent 4px 8px), linear-gradient(180deg, #d4f0ff, #5aa0ff 60%, #2a5aa8); }
.boss-shield em { min-width: 28px; font-style: normal; font-size: 11px; font-weight: 900; color: #cfeeff; text-shadow: 1px 1px 0 #000, 0 0 6px #5aa0ff; text-align: left; }
.arena.boss-fight .scene-top .boss-bar { margin-bottom: 12px; }

/* v151: дерево — ветки уходят вниз от развилки: без повтора «Живой капли» и «Слизня с костью», вертикальная линия к первой форме ветки */
#evotree-body { position: relative; }
.et-link { position: absolute; z-index: 1; width: 3px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(180deg, #ffd25e, color-mix(in srgb, var(--bc, #9dff7a) 85%, #fff)); box-shadow: 0 0 6px color-mix(in srgb, var(--bc, #9dff7a) 60%, transparent); }
.et-node.fork::before { display: none; }

/* v151: UI-кит A «Токсичное болото» (assets/ui/swamp, нарезка — docs/slice_ui_kit.py): мшистый камень, кислотная слизь, грибы.
   9-slice через border-image. Включён классом ui-swamp на <html> (убрать класс — вернётся прежний вид).
   Главная кнопка — зелёная слизь; обычная — камень; кнопка-иконка — квадратный камень; окно — каменная рамка;
   плашка ресурса — каменная таблетка; вкладки — каменный жёлоб, активная — слизь */
.ui-swamp { --sw-ink: #0f3306; --sw-text: #e9f6d6; }
.ui-swamp :is(.menu-btn.primary, .town-leave, .meta-buy, .et-choose) {
  background: none !important; box-shadow: none !important; border-radius: 0 !important; border-style: solid !important; border-color: transparent !important;
  border-width: 16px 34px 18px !important; padding: 2px 6px !important; min-height: 0;
  border-image: url(assets/ui/swamp/btn-primary.png) 38 95 44 fill / 16px 34px 18px / 0 6px 4px stretch !important;
  color: var(--sw-ink) !important; font-weight: 900; text-shadow: 0 1px 0 #d8ff9e; filter: drop-shadow(0 0 6px #7dff3a55); }
.ui-swamp :is(.menu-btn:not(.primary), .style-toggle, .seg-btn, .et-anim, .tool-btn, .sound-toggle:not(.gear-btn)) {
  background: none !important; box-shadow: none !important; border-radius: 0 !important; border-style: solid !important; border-color: transparent !important;
  border-width: 12px 26px 14px !important; padding: 1px 4px !important;
  border-image: url(assets/ui/swamp/btn-secondary.png) 40 100 44 fill / 12px 26px 14px / 0 4px 3px stretch !important;
  color: var(--sw-text) !important; text-shadow: 0 1px 0 #000; }
.ui-swamp :is(.seg-btn.on, .style-toggle.on) { border-image-source: url(assets/ui/swamp/btn-primary.png) !important; border-image-slice: 38 95 44 fill !important; color: var(--sw-ink) !important; text-shadow: 0 1px 0 #d8ff9e; }
.ui-swamp :is(.gear-btn, .camp-gear) {
  background: none !important; box-shadow: none !important; border-radius: 0 !important; border-style: solid !important; border-color: transparent !important;
  border-width: 12px !important; padding: 0 !important;
  border-image: url(assets/ui/swamp/icon-btn.png) 40 40 44 fill / 12px / 3px stretch !important; color: #d8ff9e !important; text-shadow: 0 0 6px #7dff3a99, 0 1px 0 #000; }
.ui-swamp :is(.res-chip, #gold-box, .lunar-btn, .meta-res) {
  background: none !important; box-shadow: none !important; border-radius: 0 !important; border-style: solid !important; border-color: transparent !important;
  border-width: 10px 20px 12px !important; padding: 0 2px !important;
  border-image: url(assets/ui/swamp/plate.png) 26 50 30 fill / 10px 20px 12px / 2px 4px stretch !important;
  color: #e8ffb8 !important; text-shadow: 0 1px 0 #000; }
.ui-swamp :is(.menu-panel, .results-panel, .merchant-panel, .evolution-panel, .town-panel) {
  background: none !important; box-shadow: none !important; border-radius: 0 !important; border-style: solid !important; border-color: transparent !important;
  border-width: 26px !important; padding: 4px 6px !important;
  border-image: url(assets/ui/swamp/panel.png) 72 72 76 fill / 26px / 8px stretch !important; }
.ui-swamp :is(.menu-panel, .results-panel, .merchant-panel, .evolution-panel, .town-panel)::before,
.ui-swamp :is(.menu-panel, .results-panel, .merchant-panel, .evolution-panel, .town-panel)::after { display: none !important; }
.ui-swamp :is(.set-tabs) {
  background: none !important; box-shadow: none !important; border-radius: 0 !important; border: solid transparent; border-width: 10px 20px 12px; padding: 0 !important;
  border-image: url(assets/ui/swamp/tabs-track.png) 26 50 30 fill / 10px 20px 12px / 2px 4px stretch !important; }
.ui-swamp :is(.set-tab, .et-tab) {
  background: none !important; box-shadow: none !important; border-radius: 0 !important; border: solid transparent !important; border-width: 8px 14px 10px !important; padding: 0 2px !important;
  border-image: url(assets/ui/swamp/tab-off.png) 26 40 30 fill / 8px 14px 10px stretch !important; color: var(--sw-text) !important; text-shadow: 0 1px 0 #000; }
.ui-swamp :is(.set-tab.on, .et-tab.on) { border-image-source: url(assets/ui/swamp/tab-on.png) !important; color: var(--sw-ink) !important; text-shadow: 0 1px 0 #d8ff9e; }
/* v151: привал в стиле кита — подпись портала — кнопка-слизь, заголовок мира — каменный баннер, подписи кнопок привала — каменные плашки */
.ui-swamp .camp-portal .cp-label { background: none !important; box-shadow: none !important; border-radius: 0 !important; border: solid transparent; border-width: 13px 28px 15px; padding: 0 4px;
  border-image: url(assets/ui/swamp/btn-primary.png) 38 95 44 fill / 13px 28px 15px / 0 4px 3px stretch !important; color: var(--sw-ink) !important; text-shadow: 0 1px 0 #d8ff9e; filter: drop-shadow(0 0 8px #7dff3a88); }
.ui-swamp .camp-title { background: none !important; box-shadow: none !important; border-radius: 0 !important; border: solid transparent; border-width: 12px 26px 14px;
  border-image: url(assets/ui/swamp/banner.png) 30 64 34 fill / 12px 26px 14px / 2px 6px stretch !important; }
.ui-swamp .camp-title::before, .ui-swamp .camp-title::after { display: none !important; }
.ui-swamp .camp-btn b { background: none !important; box-shadow: none !important; border-radius: 0 !important; border: solid transparent; border-width: 7px 14px 8px; padding: 0 2px;
  border-image: url(assets/ui/swamp/plate.png) 26 50 30 fill / 7px 14px 8px stretch !important; color: var(--sw-text) !important; text-shadow: 0 1px 0 #000; }
.ui-swamp .camp-title b { background: none !important; box-shadow: none !important; padding: 0 4px; color: #e8ffb8; text-shadow: 0 2px 0 #000, 0 0 10px #7dff3a66; }
/* v152: кит A на нижней панели и карточке героя: кнопки панели — квадратный мшистый камень, открытая вкладка — слизь;
   карточка героя — каменная рамка окна */
.ui-swamp .tabbar .tab, .ui-swamp .tabbar > button, .ui-swamp .dock button {
  background: none !important; box-shadow: none !important; border-radius: 0 !important; border-style: solid !important; border-color: transparent !important;
  border-width: 12px !important; padding: 0 2px !important;
  border-image: url(assets/ui/swamp/icon-btn.png) 40 40 44 fill / 12px / 2px stretch !important; color: var(--sw-text) !important; text-shadow: 0 1px 0 #000; }
.ui-swamp .tabbar .tab::before, .ui-swamp .tabbar .tab::after, .ui-swamp .dock button::before, .ui-swamp .dock button::after { display: none !important; }
.ui-swamp .tabbar .tab.on, .ui-swamp .tabbar .tab.active { border-image: url(assets/ui/swamp/tab-on.png) 26 40 30 fill / 12px 16px / 2px stretch !important; color: var(--sw-ink) !important; text-shadow: 0 1px 0 #d8ff9e; }
.ui-swamp .tabbar { background: none !important; box-shadow: none !important; }
.ui-swamp .hero-card {
  background: none !important; box-shadow: none !important; border-radius: 0 !important; border-style: solid !important; border-color: transparent !important;
  border-width: 14px 16px !important; padding: 0 4px 0 0 !important;
  border-image: url(assets/ui/swamp/panel.png) 72 72 76 fill / 14px 16px / 3px stretch !important; }
.ui-swamp .hero-card::before, .ui-swamp .hero-card::after { display: none !important; }
.ui-swamp .dock { background: none !important; box-shadow: none !important; }
.ui-swamp .dock button:active { transform: translateY(2px); filter: brightness(1.15); }
/* сундук — главная кнопка панели: зелёная слизь */
.ui-swamp .dock #dock-chest { border-width: 12px 18px 14px !important; border-image: url(assets/ui/swamp/btn-primary.png) 38 95 44 fill / 12px 18px 14px / 0 3px 3px stretch !important;
  color: var(--sw-ink) !important; text-shadow: 0 1px 0 #d8ff9e; filter: drop-shadow(0 0 6px #7dff3a66); }
.ui-swamp .dock #dock-chest small { color: #1d4a0c; }
.ui-swamp .dock #dock-chest b { color: var(--sw-ink) !important; text-shadow: 0 1px 0 #d8ff9e !important; }
/* v152: экран карточек — действия в одной колонке. В альбомной ориентации колонка справа от карт:
   переброс, исключить, автовыбор, пропустить — одной ширины, в стиле кита A (камень, активное — слизь) */
.cards-rail { display: contents; }
@media (orientation: landscape) and (min-width: 700px) {
  #cards:is(.play-mode, .passive-mode):not(.pact-mode):not(.gift-mode) .cards-box:has(.cards-rail > :is(.cards-tools:not([hidden]), .cards-close:not(.hidden))) {
    display: grid; grid-template-columns: minmax(0, 1fr) 200px; column-gap: 18px; align-items: center; }
  #cards:is(.play-mode, .passive-mode):not(.pact-mode):not(.gift-mode) .cards-box:has(.cards-rail > :is(.cards-tools:not([hidden]), .cards-close:not(.hidden))) > :not(.cards-rail) { grid-column: 1; }
  #cards:is(.play-mode, .passive-mode):not(.pact-mode):not(.gift-mode) .cards-box:has(.cards-rail > :is(.cards-tools:not([hidden]), .cards-close:not(.hidden))) > .cards-rail {
    grid-column: 2; grid-row: 1 / span 6; align-self: center; display: flex; flex-direction: column; gap: 12px; }
  #cards .cards-rail .cards-tools { display: flex !important; flex-direction: column; gap: 12px; width: 100%; margin: 0; }
  #cards .cards-rail .cards-tools[hidden] { display: none !important; }
  #cards .cards-rail :is(.tool-btn, .autopick-switch, #cards-close) { width: 100% !important; min-width: 0 !important; margin: 0 !important; }
}
/* кит A: инструменты карточек и «Пропустить» — камень; автовыбор включён — слизь */
.ui-swamp #cards :is(.tool-btn, .autopick-switch, .cards-close:not(.hidden)) {
  background: none !important; box-shadow: none !important; border-radius: 0 !important; border-style: solid !important; border-color: transparent !important;
  border-width: 12px 20px 14px !important; padding: 0 2px !important; min-height: 0 !important;
  border-image: url(assets/ui/swamp/btn-secondary.png) 40 100 44 fill / 12px 20px 14px / 0 3px 3px stretch !important; }
.ui-swamp #cards :is(.tool-btn, .autopick-switch)::after { display: none !important; }
.ui-swamp #cards .autopick-switch[aria-checked="true"] { border-image-source: url(assets/ui/swamp/btn-primary.png) !important; border-image-slice: 38 95 44 fill !important; }
.ui-swamp #cards .autopick-switch[aria-checked="true"] :is(b, small) { color: var(--sw-ink) !important; text-shadow: 0 1px 0 #d8ff9e !important; }
.ui-swamp #cards .cards-close:not(.hidden) { color: #ffe48a !important; font-weight: 900; text-shadow: 0 1px 0 #000; }
.ui-swamp #cards.banish-mode #cards-banish { filter: drop-shadow(0 0 8px #ff5a5a); }
/* тост — каменный баннер кита */
.ui-swamp .toast { background: none !important; box-shadow: none !important; border-radius: 0 !important; border-style: solid !important; border-color: transparent !important;
  border-width: 12px 24px 14px !important; padding: 0 4px !important; color: #e8ffb8; font-weight: 800; text-shadow: 0 1px 0 #000;
  border-image: url(assets/ui/swamp/banner.png) 30 64 34 fill / 12px 24px 14px / 2px 4px stretch !important; filter: drop-shadow(0 0 8px #7dff3a44); }
@media (orientation: landscape) and (min-width: 700px) {
  #cards .cards-rail :is(.tool-btn, .autopick-switch, #cards-close) { flex: none !important; height: auto !important; }
  #cards .cards-rail .autopick-switch { gap: 6px !important; }
  #cards .cards-rail .autopick-switch small { white-space: normal; font-size: 9px; }
  #cards .cards-rail .autopick-switch .sw { transform: scale(.8); margin-right: -4px; }
}
/* кит A: имя босса над полосой — каменный баннер; рамка полосы здоровья — тёмный камень с зелёной кромкой */
.ui-swamp .boss-bar .boss-head { background: none !important; box-shadow: none !important; border-radius: 0 !important; border-style: solid !important; border-color: transparent !important;
  border-width: 9px 22px 11px !important; padding: 0 4px !important; display: inline-flex !important;
  border-image: url(assets/ui/swamp/banner.png) 30 64 34 fill / 9px 22px 11px / 1px 4px stretch !important; }
.ui-swamp .boss-bar .boss-head b { color: #e8ffb8 !important; text-shadow: 0 1px 0 #000, 0 0 8px #7dff3a66 !important; }
.ui-swamp .boss-bar-track { box-shadow: inset 0 0 0 2px #0b0e09, 0 0 0 2px #3a4a2c, 0 0 0 3px #000, 0 0 10px #7dff3a33 !important; }

/* модульные враги (assets/enemies/): холст в разрешении арта, CSS увеличивает его в целое число раз — пиксели квадратные.
   Размер и точка у ног задаются из JS (--kw ширина, --kh от верха полоски здоровья до ног). Тень, шаг, «боль» и удар
   рисует сам холст, поэтому CSS-покачивание, тряска, укус, белый фильтр и тень ::after у них выключены. */
.mon.kit { width: var(--kw); margin: calc(-1 * var(--kh)) 0 0 calc(-.5 * var(--kw)); }
.mon.kit .art { width: auto; height: auto; line-height: 0; animation: none !important; scale: none !important; }
.mon.kit .art.hitflash { filter: none !important; }
.mon.kit .kit-canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.mon.kit .mon-hp { width: var(--hpw, 40px); margin-bottom: 0; translate: 0 var(--hp-drop, 0px); }   /* --hp-drop: game.js kitHpDrop — 8 px над головой */
.mon.kit::after { display: none; }
.mon.kit.kit-M::before { content: '★'; position: absolute; left: 50%; top: -12px; transform: translateX(-50%); color: #ffd25e; font-size: 12px; text-shadow: 1px 1px 0 #000; }
.mon.kit.kit-dying { opacity: 1; filter: none; pointer-events: none; }
.mon.kit.kit-dying .mon-hp, .mon.kit.kit-dying .st, .mon.kit.kit-dying::before { display: none; }
.mon.kit.kit-gone { transition: opacity .16s linear; opacity: 0; }

/* v153: бой с боссом — тапами: баннер «Тапай!» на входе, слабая точка (тап ×3), рука «Тапай! Босс звереет», итог тапов */
.boss-tap-intro { position: absolute; left: 50%; top: 42%; z-index: 40; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; pointer-events: none;
  animation: bt-intro 2.2s ease-out forwards; }
.boss-tap-intro small { font-size: 14px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #ffd7d7; text-shadow: 0 2px 0 #000, 0 0 10px #ff2a2a; }
.boss-tap-intro b { font-size: 56px; font-weight: 900; line-height: 1; color: #b6ff6a; text-shadow: 0 3px 0 #1d4a0c, 0 0 18px #7dff3a, 0 0 40px #7dff3a88; }
.boss-tap-intro i { font-style: normal; font-size: 40px; animation: bt-tap .5s ease-in-out infinite; }
@keyframes bt-intro { 0% { opacity: 0; scale: 2.2; } 12% { opacity: 1; scale: 1; } 80% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: .9; } }
@keyframes bt-tap { 50% { translate: 0 10px; scale: .85; } }
.weak-spot { position: absolute; z-index: 35; width: 64px; height: 64px; translate: -50% -50%; pointer-events: none; display: grid; place-items: center; animation: ws-in .25s ease-out; }
.weak-spot i { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, #fff6b0 0 12%, #ffcf2e 13% 22%, transparent 23% 36%, #ff4d3a 37% 44%, transparent 45%);
  box-shadow: 0 0 18px #ffcf2e, 0 0 36px #ff4d3a88; animation: ws-pulse .6s ease-in-out infinite; }
.weak-spot b { position: relative; margin-top: 54px; font-size: 13px; font-weight: 900; color: #ffe14a; text-shadow: 0 1px 0 #000, 0 0 6px #ff4d3a; }
.weak-spot.pop { animation: ws-pop .3s ease-out forwards; }
/* Автобой: слабая точка — окно по времени. Кольцо сжимается (--life), в последние --close секунд горит: тапни где угодно — ×3 */
.weak-spot.weak-time { width: 120px; height: 120px; }
.weak-spot.weak-time i { border: 4px solid #ffe14a; background: none; box-shadow: 0 0 14px #ffb23a, inset 0 0 10px #ffb23a; animation: wt-shrink var(--life, 1.4s) linear forwards; }
.weak-spot.weak-time b { margin-top: 0; font-size: 18px; animation: wt-ready var(--life, 1.4s) steps(1, end) forwards; }
@keyframes wt-shrink { from { transform: scale(1.6); opacity: .55; } 71% { transform: scale(.75); opacity: .9; border-color: #ffe14a; } 72%, to { transform: scale(.7); opacity: 1; border-color: #fff; box-shadow: 0 0 22px #fff, 0 0 30px #ffb23a; } }
@keyframes wt-ready { from { opacity: .35; } 72%, to { opacity: 1; } }
/* подложки-кулаки в нижних углах на время боя с боссом: подсказка «тапай большими пальцами»; сквозь них тап проходит */
.boss-pads { position: absolute; inset: 0; z-index: 34; pointer-events: none; }
.boss-pads[hidden] { display: none; }
.boss-pads .pad { position: absolute; bottom: 86px; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; font-size: 34px;
  background: radial-gradient(circle, rgba(0, 0, 0, .45), rgba(0, 0, 0, .25) 70%); border: 3px solid rgba(255, 255, 255, .7); box-shadow: 0 0 10px rgba(0, 0, 0, .5); opacity: .85; animation: bp-pulse 1.2s ease-in-out infinite; }
.boss-pads .pad.left { left: 18px; }
.boss-pads .pad.right { right: 18px; animation-delay: .6s; }
.boss-pads.urge .pad { opacity: 1; border-color: #ffe14a; animation-duration: .5s; }
@keyframes bp-pulse { 50% { transform: scale(1.08); } }
@keyframes ws-in { from { scale: 0; opacity: 0; } }
@keyframes ws-pulse { 50% { scale: 1.15; } }
@keyframes ws-pop { to { scale: 1.8; opacity: 0; } }
.boss-tap-hint { position: absolute; left: 50%; bottom: 96px; z-index: 36; translate: -50% 0; display: flex; align-items: center; gap: 8px; pointer-events: none;
  padding: 0 4px; border: solid transparent; border-width: 10px 22px 12px; border-image: url(assets/ui/swamp/banner.png) 30 64 34 fill / 10px 22px 12px stretch;
  animation: bt-hint 1s ease-in-out infinite; }
.boss-tap-hint i { font-style: normal; font-size: 24px; animation: bt-tap .5s ease-in-out infinite; }
.boss-tap-hint b { font-size: 14px; font-weight: 900; color: #ffd7d7; text-shadow: 0 1px 0 #000, 0 0 8px #ff2a2a; white-space: nowrap; }
@keyframes bt-hint { 50% { filter: drop-shadow(0 0 10px #ff3b3b); } }
.boss-backdrop:has(~ .boss-tap-hint), .arena:has(.boss-tap-hint) .boss-backdrop { filter: saturate(1.3) hue-rotate(-10deg) brightness(1.05); }
.fx-bossdown small { display: block; margin-top: 4px; font-size: 13px; font-weight: 800; color: #e8ffb8; text-shadow: 0 1px 0 #000; }

/* v154: нижняя панель — нарисованные иконки без рамок (кит A): подпись мелко с обводкой; наведение — подпрыгивает и светится,
   тап — желейно сплющивается (+ звук «шлёп»). Сундук: когда можно взять — растёт, светится, крышка приоткрывается (3 кадра), капает слизь */
.ui-swamp .dock button, .ui-swamp .dock #dock-chest { background: none !important; box-shadow: none !important; border: 0 !important; border-image: none !important;
  padding: 0 0 2px !important; min-height: 0 !important; gap: 0 !important; filter: none !important; animation: none; overflow: visible; }
.ui-swamp .dock .dock-ic { position: relative; display: grid; place-items: center; width: 64px; height: 50px; font-size: 30px; line-height: 1;
  transition: translate .18s cubic-bezier(.3, 1.6, .5, 1), filter .18s; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .6)); }
.ui-swamp .dock .dock-ic img { max-width: 100%; max-height: 100%; object-fit: contain; image-rendering: auto; }
.ui-swamp .dock button b { font-size: 12px; font-weight: 900; color: #f2ffe0 !important; letter-spacing: .2px;
  text-shadow: -1px -1px 0 #0b1a07, 1px -1px 0 #0b1a07, -1px 1px 0 #0b1a07, 1px 1px 0 #0b1a07, 0 2px 0 #0b1a07, 0 0 6px #000 !important; }
.ui-swamp .dock #dock-chest small { margin-top: 1px; padding: 0 2px; border: solid transparent; border-width: 5px 10px 6px;
  border-image: url(assets/ui/swamp/plate.png) 26 50 30 fill / 5px 10px 6px stretch; font-size: 10px; font-weight: 900; color: #ffe48a !important; text-shadow: 0 1px 0 #000; }
.ui-swamp .dock .dot { top: 0; right: 10px; }
@media (hover: hover) {
  .ui-swamp .dock button:hover .dock-ic { translate: 0 -5px; filter: drop-shadow(0 0 8px #7dff3a) drop-shadow(0 4px 2px rgba(0, 0, 0, .6)); }
}
.ui-swamp .dock button:active { transform: none !important; }
.ui-swamp .dock button:active .dock-ic { animation: dock-squish .28s ease-out; }
@keyframes dock-squish { 0% { scale: 1; } 35% { scale: 1.18 .78; } 70% { scale: .92 1.1; } 100% { scale: 1; } }
/* сундук: три кадра друг на друге; без золота — закрыт и чуть тусклее */
.ui-swamp .dock-chest-ic img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ui-swamp .dock-chest-ic .f1, .ui-swamp .dock-chest-ic .f2 { opacity: 0; }
.ui-swamp .dock #dock-chest:not(.ready):not(.big) .dock-chest-ic { filter: grayscale(.35) brightness(.8) drop-shadow(0 3px 2px rgba(0, 0, 0, .6)); }
/* «возьми меня»: крупнее, приподнят, пульс свечения, дрожь, крышка: закрыт → щель → лучи → щель */
.ui-swamp .dock #dock-chest.ready .dock-chest-ic, .ui-swamp .dock #dock-chest.big .dock-chest-ic, .ui-swamp .dock #dock-chest.nag .dock-chest-ic {
  width: 84px; height: 72px; margin-top: -26px; animation: chest-take 1.2s ease-in-out infinite; }
.ui-swamp .dock #dock-chest.ready .f0, .ui-swamp .dock #dock-chest.big .f0, .ui-swamp .dock #dock-chest.nag .f0 { animation: chest-f0 1.2s steps(1) infinite; }
.ui-swamp .dock #dock-chest.ready .f1, .ui-swamp .dock #dock-chest.big .f1, .ui-swamp .dock #dock-chest.nag .f1 { animation: chest-f1 1.2s steps(1) infinite; }
.ui-swamp .dock #dock-chest.ready .f2, .ui-swamp .dock #dock-chest.big .f2, .ui-swamp .dock #dock-chest.nag .f2 { animation: chest-f2 1.2s steps(1) infinite; }
@keyframes chest-f0 { 0%, 100% { opacity: 1; } 30% { opacity: 0; } }
@keyframes chest-f1 { 0% { opacity: 0; } 30% { opacity: 1; } 50% { opacity: 0; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes chest-f2 { 0% { opacity: 0; } 50% { opacity: 1; } 80% { opacity: 0; } }
@keyframes chest-take {
  0%, 100% { scale: 1; rotate: 0deg; filter: drop-shadow(0 0 6px #ffd25e88) drop-shadow(0 4px 2px rgba(0, 0, 0, .6)); }
  35% { scale: 1.08; rotate: -3deg; }
  45% { rotate: 3deg; }
  55% { scale: 1.14; rotate: -2deg; filter: drop-shadow(0 0 18px #ffe14a) drop-shadow(0 0 30px #7dff3a99) drop-shadow(0 4px 2px rgba(0, 0, 0, .6)); }
  65% { rotate: 1deg; }
  80% { scale: 1.06; rotate: 0deg; } }
.ui-swamp .dock #dock-chest.ready::before, .ui-swamp .dock #dock-chest.nag::before { content: ''; display: block !important; position: absolute; left: 50%; top: -6px; z-index: -1;
  width: 120px; height: 90px; translate: -50% -40%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 225, 74, .55), rgba(125, 255, 58, .25) 55%, transparent); animation: chest-halo 1.2s ease-in-out infinite; }
@keyframes chest-halo { 50% { scale: 1.25; opacity: .7; } }
.ui-swamp .dock #dock-chest.big .dock-chest-ic { filter: hue-rotate(60deg) drop-shadow(0 0 14px #c49bff); }
@media (prefers-reduced-motion: reduce) { .ui-swamp .dock #dock-chest .dock-chest-ic, .ui-swamp .dock #dock-chest img { animation: none !important; } }
.ui-swamp .dock .dock-ic img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; }
.ui-swamp .dock .dock-ic img { position: absolute !important; inset: 0 !important; object-fit: contain !important; }
.ui-swamp .dock .dot { top: 12px !important; right: calc(50% - 36px) !important; }

/* v160: босс-голова (Кристальный мандрил): лежит у правого края на полу, огромная; 5 поз друг на друге, видна одна.
   Покой — дышит; замах — поза приёма; хватка — луч из глаз к герою; удар по ней — гримаса злости */
.mon.boss.boss-face { z-index: 30 !important; }
.mon.boss.boss-face::after { width: 70%; height: 26px; bottom: -10px; }
.mon.boss.boss-face .hd { position: relative; display: block; width: 100%; height: 100%; transform-origin: 50% 100%; animation: hd-breathe 3.2s ease-in-out infinite; }
.mon.boss.boss-face .hd img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; image-rendering: auto; opacity: 0; }
.mon.boss.boss-face.pose-idle .p-idle, .mon.boss.boss-face.pose-roar .p-roar, .mon.boss.boss-face.pose-eyes .p-eyes,
.mon.boss.boss-face.pose-spit .p-spit, .mon.boss.boss-face.pose-hurt .p-hurt { opacity: 1; }
@keyframes hd-breathe { 50% { transform: scale(1.015, .985) translateY(1%); } }
.mon.boss.boss-face.pose-roar .hd { animation: hd-roar .5s ease-in-out infinite; }
@keyframes hd-roar { 25% { transform: translateX(-1.5%) rotate(-1deg) scale(1.03); } 75% { transform: translateX(1%) rotate(.8deg) scale(1.02); } }
.mon.boss.boss-face.pose-hurt .hd { animation: hd-hurt .28s ease-out; filter: brightness(1.25) saturate(1.2); }
@keyframes hd-hurt { 30% { transform: translateX(2%) rotate(1.5deg); } }
.mon.boss.boss-face.pose-eyes .hd { filter: drop-shadow(0 0 18px #e040ff); }
.mon.boss.boss-face .hd-beam { position: absolute; right: calc((1 - var(--ex)) * 100%); top: calc(var(--ey) * 100% - 9px); width: 120vw; height: 18px; border-radius: 9px; pointer-events: none;
  background: linear-gradient(270deg, #fff 0%, #ff8cff 8%, #c040ff 40%, rgba(192, 64, 255, .2)); box-shadow: 0 0 22px #e040ff, 0 0 44px #c040ff;
  transform-origin: 100% 50%; transform: scaleX(0); opacity: 0; }
.mon.boss.boss-face.beam .hd-beam { animation: hd-beam .9s ease-out; }
@keyframes hd-beam { 0% { transform: rotate(-9deg) scaleX(0); opacity: 1; } 25% { transform: rotate(-9deg) scaleX(1); opacity: 1; } 70% { opacity: 1; } 100% { transform: rotate(-9deg) scaleX(1); opacity: 0; } }
.mon.boss.boss-face.spawn .art { animation: hd-enter 1.2s cubic-bezier(.2, .9, .3, 1.1); }
@keyframes hd-enter { from { transform: translateY(40%); opacity: 0; } 60% { opacity: 1; } }

/* v-mobile: боевые эффекты не должны рисоваться поверх панелей (шторка 20, карты 30, меню 45+).
   Арена изолирована (isolation), значит 19 всё ещё выше HUD и дока, но ниже любой открытой панели.
   Кат-сцены босса (letterbox/intro/flash/down/banner) остаются выше — они специально перекрывают всё. */
#pixel-vfx-layer { z-index: 19 !important; }
.fx.fx-shot, .fx-puff, .fx-warn, .fx-float-pet { z-index: 19; }
/* v-mobile: выбор ветки/класса эволюции на низком горизонтальном экране (телефон) — варианты в ряд, без прокрутки */
@media (orientation: landscape) and (max-height: 520px) {
  #evolution { padding: max(6px, var(--sa-top)) max(10px, var(--sa-right)) max(6px, var(--sa-bottom)) max(10px, var(--sa-left)); }
  .ui-swamp #evolution .evolution-panel { border-width: 18px !important; border-image-width: 18px !important; }
  #evolution .evolution-kicker { margin: 0; }
  #evolution .evolution-panel:has(#evolution-options .evolution-option:nth-child(2)) { max-width: min(900px, 96vw); padding: 0 8px; }
  #evolution #evolution-options:has(.evolution-option:nth-child(2)) { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: 8px; }
  #evolution #evolution-options:has(.evolution-option:nth-child(2)) .evolution-option:not(.dev) { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 6px; margin: 0; }
  #evolution #evolution-options:has(.evolution-option:nth-child(2)) .evolution-option:not(.dev) img { width: 50px; height: 50px; }
  #evolution #evolution-options:has(.evolution-option:nth-child(2)) .evolution-option span { gap: 2px; align-items: center; }
  #evolution #evolution-options:has(.evolution-option:nth-child(2)) .evolution-option.dev { flex-direction: row; gap: 8px; padding: 6px 10px; margin: 0; }
  #evolution .evolution-panel:has(#evolution-options .evolution-option:nth-child(2)) h2 { font-size: 20px; margin: 0; }
  #evolution .evolution-panel:has(#evolution-options .evolution-option:nth-child(2)) #evolution-description { font-size: 11px; line-height: 1.3; margin: 2px 0 6px; }
}

/* v-mobile: телефон горизонтально — нижняя панель кучнее, иконки крупнее и прижаты к низу; цена сундука — табличкой на иконке */
@media (orientation: landscape) and (max-height: 520px) {
  .ui-swamp .dock { width: auto; grid-template-columns: repeat(5, 78px); justify-content: center; gap: 0; align-items: end; bottom: var(--sa-bottom); }
  .ui-swamp .dock .dock-ic { width: 72px; height: 58px; }
  .ui-swamp .dock button b { margin-top: -6px; font-size: 11.5px; }
  .ui-swamp .dock #dock-chest small { position: absolute; top: 2px; right: -4px; margin: 0; font-size: 10px; }
  .ui-swamp .dock #dock-chest.ready .dock-chest-ic, .ui-swamp .dock #dock-chest.big .dock-chest-ic, .ui-swamp .dock #dock-chest.nag .dock-chest-ic { width: 84px; height: 70px; margin-top: -14px; }
  /* сундук-сумка: видна верхняя половина — карты летят в неё, но не закрывают низ карт */
  .cards.bag-mode:not(.pact-mode):not(.passive-mode):not(.gift-mode) .bag-satchel { width: 104px; height: 104px; bottom: calc(-50px + var(--sa-bottom)); }
  .cards.bag-mode:not(.pact-mode):not(.passive-mode) .cards-box { padding-bottom: 36px; }
}
@media (orientation: landscape) and (min-width: 700px) and (max-height: 520px) {
  /* колонка кнопок справа (200px + 18px) — сумку центруем под картами, а не под всем экраном */
  .cards.bag-mode.play-mode:not(.pact-mode):not(.passive-mode):not(.gift-mode):has(.cards-rail > :is(.cards-tools:not([hidden]), .cards-close:not(.hidden))) .bag-satchel { left: calc(50% - 109px); }
}

/* v-mobile: число здоровья босса — блоком по центру полосы (строчный span уезжал вниз и обрезался) */
.boss-bar-track span { display: block; text-align: center; white-space: nowrap; }
/* v-mobile: телефон горизонтально — бой с боссом плотнее: табличка и полоса ниже ростом, предметы мельче,
   подсказка «Тапай» слева от героя (не на нём), кружки умений и плашка умения — не над героем и не на доке */
@media (orientation: landscape) and (max-height: 520px) {
  .ui-swamp .arena.boss-fight .boss-bar .boss-head { border-width: 6px 18px 8px !important; border-image-width: 6px 18px 8px !important; margin-bottom: 2px; }
  .arena.boss-fight .boss-bar .boss-head b { font-size: 13px; }
  .arena.boss-fight .scene-top .boss-bar { width: min(46vw, 440px); margin: 0 auto 4px; }
  .arena.boss-fight .boss-bar-track { height: 15px; padding: 2px; }
  .arena.boss-fight .boss-bar-track i { inset: 2px auto 2px 2px; max-width: calc(100% - 4px); }
  .arena.boss-fight .boss-bar-track span { line-height: 11px; font-size: 10px; }
  .arena.boss-fight .scene-top .loot-strip { gap: 3px; }
  .arena.boss-fight .loot-strip.bag .stack { width: 30px; height: 33px; }
  .arena.boss-fight .scene-top .loot-strip .loot { width: 30px; height: 30px; }
  .arena.boss-fight .boss-tap-hint { left: auto; right: calc(50% + 70px); translate: 0 0; bottom: 104px; }
  .arena .skill3, .skill3 { left: auto; right: calc(10px + var(--sa-right)); translate: none; bottom: calc(12px + var(--sa-bottom)); gap: 8px; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 760px) {
  .sk3 { width: 42px; height: 42px; } .sk3 img { width: 34px; height: 34px; }
  .arena .skill3, .skill3 { gap: 6px; right: calc(6px + var(--sa-right)); }
}
@media (orientation: landscape) and (min-width: 700px) and (max-height: 520px) {
  /* плашка умения (классический режим) — над колонками дока со 2-й по 5-ю: сундук слева растёт вверх и её не задевает */
  .arena .skillbar { width: 312px; left: calc(50% + 39px); bottom: calc(72px + var(--sa-bottom)); }
}

/* v-mobile: мелкая подпись на включённом «Автовыборе» — без светлой тени (на зелёной слизи она размывала 9px текст) */
.ui-swamp #cards .autopick-switch[aria-checked="true"] small { text-shadow: none !important; font-weight: 800; color: #10300a !important; }
/* v-mobile: ссылка «Завершить забег» — палец попадает (было 23px в высоту) */
#menu-abandon { min-height: 32px; padding-top: 6px; padding-bottom: 6px; }

/* v-mobile: плашка умения над колонками дока 2–5 и на узких телефонах (<700px), а не во всю ширину поверх «+» и пассивок */
@media (orientation: landscape) and (max-height: 520px) {
  .arena .skillbar { width: 312px; left: calc(50% + 39px); right: auto; translate: -50% 0; bottom: calc(72px + var(--sa-bottom)); }
}
/* v-mobile: узкий телефон горизонтально (≈ iPhone 8 / iPhone X с вырезом) — между карточкой героя и золотом места нет:
   предметы — строкой под карточкой героя, мир/волна — справа под золотом, полоса босса — ниже шапки */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 720px) {
  .arena:not(.boss-fight) .scene-top .loot-strip { position: absolute; left: 0; top: 96px; justify-content: flex-start; max-width: 46vw; }
  .arena:not(.boss-fight) .scene-top .world { align-self: flex-end; }
  .arena.boss-fight .scene-top .boss-bar { margin-top: 84px; width: min(56vw, 340px); }
}

/* v-mobile: бой с боссом на телефоне — герой по центру, помощники слева от него: подсказка «Тапай» левее помощников
   (и не уходит под вырез), плашка умения — справа, левее колонки пассивок, чтобы не закрывать «+» найма */
@media (orientation: landscape) and (max-height: 520px) {
  .arena.boss-fight .boss-tap-hint { left: auto; right: calc(50% + 110px); translate: 0 0; bottom: 104px; max-width: calc(50% - 118px - var(--sa-left)); }
  .arena.boss-fight .boss-tap-hint b { white-space: normal; line-height: 1.15; }
  .arena.boss-fight .skillbar { left: auto; right: calc(58px + var(--sa-right)); translate: none; width: max(232px, min(312px, calc(50% - 90px))); }
}

/* v162: окно «Экран для проверки» — игра в рамке нужного размера, вписанной в монитор */
#screen-preview { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 16px 16px; background: #060a06; }
#screen-preview .sp-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; color: #e9f6d6; }
#screen-preview .sp-bar b { font-size: 15px; } #screen-preview .sp-bar small { font-size: 12px; color: #a9bf9c; margin-right: 8px; }
#screen-preview .sp-bar button { padding: 6px 12px; border: 0; border-radius: 10px; background: #26331f; color: #e9f6d6; font: inherit; font-weight: 800; cursor: pointer; }
#screen-preview .sp-bar button.on { background: #7dff3a; color: #0f3306; }
#screen-preview .sp-close { margin-left: 8px; background: #5a1f1f !important; }
#screen-preview .sp-wrap { position: relative; box-shadow: 0 0 0 3px #3a4a2c, 0 12px 40px #000; border-radius: 6px; overflow: hidden; background: #000; }
#screen-preview .sp-screen { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; }
#screen-preview iframe { position: absolute; left: 0; top: 0; border: 0; display: block; }

/* v-ui: чистый экран боя (по референсу Stickman-рогалика): слева сверху — портрет, здоровье и опыт без подложки, золото строкой;
   справа сверху — только скорость и шестерёнка (пауза). Нижней панели нет: сундук появляется по центру внизу, только когда хватает золота.
   Пассивки, предметы, пэт — в окне паузы; прокачка открывается сама после роста уровня */
@media all {   /* v-ui: и в горизонтали, и в вертикали */
  .ui-swamp .arena .hero-card { border-image: none !important; border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; gap: 6px !important;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .7)); }
  .ui-swamp .arena .hero-card::before, .ui-swamp .arena .hero-card::after { display: none !important; }
  .arena #portrait-name { display: none !important; }
  .arena .hero-card-text { width: 168px; gap: 4px; }
  .arena .hero-card-text .hp-line { width: 100% !important; }
  .arena .hero-card-text .lvl-box { width: 100% !important; min-width: 0 !important; display: block !important; position: static; margin: 0; padding: 0; background: none; box-shadow: none; border: 0; }
  .arena .hero-card-text .lvl-box .level { display: none !important; }
  .arena .hero-card-text .lvl-box .bar.xp { width: 100% !important; max-width: none !important; height: 12px !important; margin: 0 !important; }
  .arena .hero-card-text .lvl-box #xp-text { font-size: 9px; }
  .ui-swamp .arena #home-btn, .arena #lunar-btn, .arena #rewards-btn, .arena #passive-bar, .arena .scene-top .loot-strip, .arena .bag-sum,
  .arena #edge-left, .arena #edge-right-btn { display: none !important; }
  .ui-swamp .arena .hud-right #gold-box { position: absolute; left: calc(max(6px, var(--sa-left)) + 74px); top: 62px; height: auto !important; min-height: 0 !important; padding: 0 !important;
    border-image: none !important; border: 0 !important; background: none !important; box-shadow: none !important; font-size: 12px; text-shadow: 0 1px 0 #000, 0 0 4px #000; }
  .ui-swamp .arena .dock { grid-template-columns: auto; width: auto; left: 50%; right: auto; translate: -50% 0; }
  .ui-swamp .arena .dock > button:not(#dock-chest), .ui-swamp .arena .dock #dock-chest:not(.ready):not(.big) { display: none !important; }
}
/* v-ui: окно паузы */
.pause { position: fixed; inset: 0; z-index: 44; display: flex; align-items: center; justify-content: center;
  padding: max(10px, var(--sa-top)) max(12px, var(--sa-right)) max(10px, var(--sa-bottom)) max(12px, var(--sa-left)); background: rgba(4, 8, 5, .8); animation: passive-in .2s ease-out; }
.pause[hidden] { display: none; }
.pause-box { position: relative; width: min(820px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.pause-title { margin: 0; text-align: center; font-family: 'Rubik Wet Paint', Nunito, sans-serif; font-size: 26px; font-weight: 400; color: #e8ffb8; text-shadow: 0 2px 0 #000, 0 0 12px #7dff3a66; }
.pause-gear { position: absolute; right: 0; top: -2px; width: 40px; height: 40px; border: 0; border-radius: 10px; font-size: 20px; color: #e8ffb8; background: rgba(18, 28, 20, .9);
  box-shadow: inset 0 0 0 2px #4f8a3a; cursor: pointer; }
.pause-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; min-height: 0; flex: 1 1 auto; }
.pause-panel { min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 10px 14px; border-radius: 12px; background: rgba(18, 28, 20, .9); box-shadow: inset 0 0 0 1px rgba(160, 220, 140, .3); }
.pause-panel h3 { margin: 0 0 8px; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #cfe8b8; text-align: center; }
.pause-skills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pz-tile { position: relative; display: flex; flex-direction: column; align-items: center; width: 62px; gap: 3px; }
.pz-tile img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: #1d2a19; box-shadow: inset 0 0 0 2px #4f8a3a; }
.pz-tile.skill img { border-radius: 50%; box-shadow: 0 0 0 2px #ffd25e; }
.pz-tile small { font-size: 9px; line-height: 1.1; text-align: center; color: #d9ecd0; }
.pz-lvl { position: absolute; right: 2px; top: -4px; min-width: 18px; padding: 0 4px; border-radius: 9px; font-style: normal; font-size: 10px; font-weight: 900; line-height: 16px; text-align: center; color: #10300a; background: #9dff7a; }
.pz-pips { position: absolute; left: 50%; top: 40px; translate: -50% 0; display: flex; gap: 2px; font-style: normal; }
.pz-pips b { width: 6px; height: 6px; rotate: 45deg; background: #2a2418; box-shadow: inset 0 0 0 1px #8a7a50; }
.pz-pips b.on { background: #ffd25e; }
.pause-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
.pz-item { --rc: #9aa59a; position: relative; aspect-ratio: 1; padding: 3px; border: 0; border-radius: 8px; background: #1a2418; box-shadow: inset 0 0 0 2px var(--rc); cursor: pointer; }
.pz-item.uncommon { --rc: #7ddc6a; } .pz-item.rare { --rc: #4fa8ff; } .pz-item.epic { --rc: #c77dff; } .pz-item.legendary { --rc: #ffb347; } .pz-item.lunar { --rc: #8ff0e0; }
.pz-item img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.pz-item i { position: absolute; right: 3px; bottom: 1px; font-style: normal; font-size: 10px; font-weight: 900; color: #fff; text-shadow: 0 1px 0 #000, 0 0 3px #000; }
.pz-empty { display: block; margin-bottom: 10px; color: #9fb5a7; font-size: 12px; text-align: center; }
.pz-stat { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 10px; margin-bottom: 5px; border-radius: 8px; background: rgba(255, 255, 255, .06); font-size: 13px; }
.pz-stat span { color: #ffd25e; font-weight: 800; white-space: nowrap; }
.pz-stat b { color: #fff; text-align: right; }
.pause-actions { display: flex; justify-content: center; gap: 16px; flex: none; }
.pause-btn { min-width: 180px; min-height: 46px; padding: 0 18px; border: 0; border-radius: 12px; font: inherit; font-size: 17px; font-weight: 900; cursor: pointer; }
.pause-btn.to-town { color: #ffe48a; background: linear-gradient(180deg, #4a5a3c, #263020); box-shadow: inset 0 0 0 2px #7a8a5c, 0 4px 0 #11160d; text-shadow: 0 1px 0 #000; }
.pause-btn.go { color: #10300a; background: linear-gradient(180deg, #b6ff6a, #4fbf2a); box-shadow: inset 0 0 0 2px #d8ff9e, 0 4px 0 #1f5a10; }
.pause-btn:active { transform: translateY(2px); }
@media (max-height: 420px) {
  .pause-title { font-size: 20px; } .pause-box { gap: 8px; } .pause-btn { min-height: 40px; font-size: 15px; } .pz-stat { padding: 4px 8px; margin-bottom: 4px; font-size: 12px; }
}

/* v163: на арене босс-голова видна (у других боссов спрайт скрыт — они сами фон); лежит на полу — мягкая тень под ней */
.arena.arena-boss .mon.boss.boss-face { opacity: 1; }
.mon.boss.boss-face::after { width: 78% !important; height: 9% !important; bottom: -2% !important; left: 50% !important; transform: translateX(-50%) !important; border-radius: 50%;   /* v165: тень по центру под ногами (у общей тени сдвиг на полширины влево) */
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, .25) 60%, transparent) !important; }

/* v-ui: «Ты получил» (мешок хлама и другие подарки) — «Забрать» сразу под картами, а не прибита к низу экрана во всю ширину */
#cards.gift-mode #cards-close:not(.hidden) { position: relative !important; left: auto; bottom: auto; translate: none; display: block;
  width: clamp(200px, 30vw, 300px) !important; min-width: 0 !important; margin: 16px auto 0 !important; }
.cards.gift-mode #cards-list { padding-bottom: 0; }

/* v-ui: низкий экран (телефон горизонтально) — карты подарка ниже ростом, чтобы «Забрать» помещалась под ними без прокрутки */
@media (orientation: landscape) and (max-height: 520px) {
  .cards.gift-mode.play-mode #cards-list .card.tcg, .cards.gift-mode #cards-list .card.tcg { max-width: min(184px, calc((100dvh - 172px) / 1.5)); }
  #cards.gift-mode #cards-close:not(.hidden) { margin-top: 10px !important; }
}

/* v164: логово одной сценой (Кристальный мандрил): сцена вместо фона и дороги мира; позы — слои лица той же геометрии (cover, по низу) */
.arena.arena-boss.arena-scene .bg .layer { opacity: 0; }
.boss-backdrop.scene { background-position: center bottom; }
.boss-backdrop.scene .arena-face { position: absolute; inset: 0; background: var(--fi) center bottom / cover no-repeat; opacity: 0; pointer-events: none; }
.boss-backdrop.scene.pose-roar .p-roar, .boss-backdrop.scene.pose-eyes .p-eyes, .boss-backdrop.scene.pose-spit .p-spit, .boss-backdrop.scene.pose-hurt .p-hurt { opacity: 1; }
.boss-backdrop.scene.pose-hurt .p-hurt { filter: brightness(1.15); }
.fx-scenebeam { height: 14px; margin-top: -7px; transform-origin: 0 50%; transform: rotate(var(--ang)) scaleX(0); border-radius: 7px; pointer-events: none;
  background: linear-gradient(90deg, #fff, #ff8cff 10%, #c040ff 55%, rgba(192, 64, 255, .15)); box-shadow: 0 0 20px #e040ff, 0 0 40px #c040ff; animation: scene-beam .9s ease-out forwards; }
@keyframes scene-beam { 0% { transform: rotate(var(--ang)) scaleX(0); opacity: 1; } 25% { transform: rotate(var(--ang)) scaleX(1); } 70% { opacity: 1; } 100% { transform: rotate(var(--ang)) scaleX(1); opacity: 0; } }

/* v-ui: выбор умения (Умения 3×3) по референсу Stickman-рогалика: заголовок сверху, три широкие карты по центру
   (иконка, имя золотом, тип справа, описание), слева герой с ячейками навыков и «Переброс», справа «Автовыбор», «Исключить», «Пропустить» */
@media (orientation: landscape) {
  #cards.passive-mode:has(.sk-card) .cards-box { display: grid !important; width: min(1060px, 100%) !important; max-width: none !important; margin: auto !important;
    grid-template-columns: min(190px, 22vw) minmax(0, 620px) min(200px, 23vw) !important; grid-template-rows: auto auto repeat(3, auto) !important;
    column-gap: 16px !important; row-gap: 8px !important; align-items: center !important; justify-content: center !important; }
  #cards.passive-mode:has(.sk-card) .cards-box > .cards-title { grid-column: 1 / -1 !important; grid-row: 1 !important; }
  #cards.passive-mode:has(.sk-card) .cards-box > .cards-sub { grid-column: 1 / -1 !important; grid-row: 2 !important; margin: 0 !important; }
  #cards.passive-mode:has(.sk-card) #cards-list, #cards.passive-mode:has(.sk-card) .cards-rail, #cards.passive-mode:has(.sk-card) #cards-tools, #cards.passive-mode:has(.sk-card) .tool-row { display: contents !important; }
  #cards.passive-mode:has(.sk-card) #cards-list > .card:nth-child(2) { grid-column: 2 !important; grid-row: 3 !important; }
  #cards.passive-mode:has(.sk-card) #cards-list > .card:nth-child(3) { grid-column: 2 !important; grid-row: 4 !important; }
  #cards.passive-mode:has(.sk-card) #cards-list > .card:nth-child(4) { grid-column: 2 !important; grid-row: 5 !important; }
  #cards.passive-mode:has(.sk-card) #cards-list > .sk-hero { grid-column: 1 !important; grid-row: 3 / span 2 !important; align-self: end !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
  #cards.passive-mode:has(.sk-card) .sk-hero-stage { width: min(120px, 100%); margin: 0 auto; }
  #cards.passive-mode:has(.sk-card) #cards-reroll { grid-column: 1 !important; grid-row: 5 !important; }
  #cards.passive-mode:has(.sk-card) #autopick-toggle { grid-column: 3 !important; grid-row: 3 !important; }
  #cards.passive-mode:has(.sk-card) #cards-banish { grid-column: 3 !important; grid-row: 4 !important; }
  #cards.passive-mode:has(.sk-card) #cards-close { grid-column: 3 !important; grid-row: 5 !important; }
  #cards.passive-mode:has(.sk-card) :is(#cards-reroll, #cards-banish, #autopick-toggle, #cards-close) { width: 100% !important; margin: 0 !important; align-self: center; }
  #cards.passive-mode #cards-list .card.sk-card { border-radius: 12px !important; padding: 8px 16px 8px 8px !important; gap: 14px !important; min-height: 0 !important; margin: 0 !important;
    background: linear-gradient(90deg, rgba(22, 36, 26, .97), rgba(12, 22, 16, .95)) !important;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tc) 60%, #1d2a1d), inset 5px 0 0 0 var(--tc), 0 4px 10px rgba(0, 0, 0, .5) !important; }
  #cards.passive-mode #cards-list .card.sk-card .card-art { width: 58px !important; height: 58px !important; border-radius: 12px !important;
    background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--tc) 45%, transparent), rgba(0, 0, 0, .6) 75%) !important; box-shadow: inset 0 0 0 2px var(--tc) !important; }
  #cards.passive-mode #cards-list .card.sk-card .card-art > img { border-radius: 10px !important; }
  #cards.passive-mode #cards-list .card.sk-card .card-head { justify-content: space-between !important; flex-wrap: nowrap !important; }
  #cards.passive-mode #cards-list .card.sk-card .card-name { font-size: 15px !important; text-transform: uppercase !important; letter-spacing: .03em; color: #ffd25e !important; }
  #cards.passive-mode #cards-list .card.sk-card :is(.card-rarity, .sk-up-tag) { order: 1 !important; margin-left: auto !important; flex: none; }
  #cards.passive-mode #cards-list .card.sk-card .card-desc { font-size: 13.5px !important; line-height: 1.25 !important; -webkit-line-clamp: 2 !important; }
}

/* v-ui: «Дальше!» в «Новом облике» — в болотном ките кнопка рисуется картинкой с толстой рамкой, внутренняя область ~12px,
   и капли слизи (::after, задуманные под кнопкой) ложились на текст и съедали букву. У картинки кита свои капли — эти убираем */
.ui-swamp .newlook #newlook-ok::after { display: none !important; }

/* v-ui: вертикальный экран (как в Cat-рогаликах): поле боя квадратом сверху, под ним панель — сундук, пауза, город,
   статы, навыки и предметы. Позиции героя и врагов считаются от размеров арены, поэтому бой просто живёт в верхнем квадрате */
.pp { display: none; }
@media (orientation: portrait) {
  #app { --pp-top: min(122vw, 62vh); }   /* критик, раздел 1: арена выше, таблица статов ушла в паузу */
  #pp .pp-body > h3:first-child, #pp-stats { display: none !important; }
  #app > .arena { inset: 0 0 auto 0 !important; height: var(--pp-top) !important; }
  .ui-swamp .arena .dock, .arena #dock { display: none !important; }
  .rotate-hint { display: none !important; }
  .pp { display: flex; flex-direction: column; gap: 8px; position: absolute; left: 0; right: 0; top: var(--pp-top); bottom: 0; z-index: 27; overflow: hidden;
    padding: 8px max(10px, var(--sa-right)) max(10px, var(--sa-bottom)) max(10px, var(--sa-left));
    background: linear-gradient(180deg, #1c2716, #0c130a); box-shadow: 0 -3px 0 #3a4a2c, 0 -8px 18px rgba(0, 0, 0, .6); }
  .pp-actions { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 8px; flex: none; }
  .pp-btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 54px; padding: 4px 8px; border: 0; border-radius: 12px; font: inherit; color: #e8ffb8;
    background: rgba(40, 56, 32, .96); box-shadow: inset 0 0 0 2px #4f8a3a, 0 3px 0 #0a1008; cursor: pointer; }
  .pp-btn:active { transform: translateY(2px); }
  .pp-btn b { font-size: 14px; font-weight: 900; }
  .pp-ic { font-size: 20px; line-height: 1; }
  .pp-chest img { width: 42px; height: 42px; object-fit: contain; }
  .pp-chest span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
  .pp-chest small { font-size: 12px; font-weight: 800; color: #ffe48a; }
  .pp-chest:not(.ready) { filter: grayscale(.7) brightness(.75); }
  .pp-chest.ready { color: #10300a; background: linear-gradient(180deg, #b6ff6a, #4fbf2a); box-shadow: inset 0 0 0 2px #d8ff9e, 0 3px 0 #1f5a10, 0 0 14px #7dff3a88; animation: pp-pulse 1.2s ease-in-out infinite; }
  .pp-chest.ready small { color: #1d4a0c; }
  .pp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 10px 10px; border-radius: 12px; background: rgba(18, 28, 20, .92); box-shadow: inset 0 0 0 1px rgba(160, 220, 140, .3); }
  .pp-body h3 { margin: 8px 0 6px; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #cfe8b8; }
  .pp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; }
  .pp-stats .pz-stat { margin: 0; padding: 5px 8px; font-size: 12px; }
  .pp .pause-skills { margin-bottom: 4px; }
  /* пауза на узком экране — колонки друг под другом */
  .pause-cols { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .pause-btn { min-width: 0; flex: 1; }
}
@keyframes pp-pulse { 50% { transform: scale(1.03); } }

/* v-ui: вертикаль — мир и волна справа под кнопками (не поверх полоски опыта), кружки умений в правом нижнем углу поля */
@media (orientation: portrait) {
  .arena:not(.boss-fight) .scene-top .world { align-self: flex-end; margin-top: 34px; }
  .arena .skill3, .skill3 { left: auto; right: calc(10px + var(--sa-right)); translate: none; bottom: 12px; gap: 8px; }
}

@media (orientation: portrait) {
  .pause-title { font-size: 20px; padding: 0 46px; line-height: 1.15; }
  /* лагерь: переключатель «Разраб» не налезает на карточку профиля */
  .camp-menu .dev-toggle { top: auto; bottom: calc(110px + var(--sa-bottom)); }
}

/* v165: позы босса-фигуры (Кирпичный голем): удар — выпад влево, вращение — тряска, заряд — дрожь и вспышка, развал — куча кирпичей тает */
.mon.boss.boss-face.pose-punch .p-punch, .mon.boss.boss-face.pose-throw .p-throw, .mon.boss.boss-face.pose-spin .p-spin,
.mon.boss.boss-face.pose-charge .p-charge, .mon.boss.boss-face.pose-dead .p-dead { opacity: 1; }
.mon.boss.boss-face.pose-punch .hd { animation: hd-punch .45s ease-out; }
@keyframes hd-punch { 35% { transform: translateX(-9%) scale(1.03); } 100% { transform: none; } }
.mon.boss.boss-face.pose-spin .hd { animation: hd-roar .3s linear infinite; }
.mon.boss.boss-face.pose-charge .hd { animation: hd-charge .12s steps(2) infinite; filter: drop-shadow(0 0 14px #ffe14a); }
@keyframes hd-charge { 50% { transform: translate(1%, -.5%); } }
.mon.boss.boss-face.pose-throw .hd { animation: hd-punch .4s ease-out; }
.mon.boss.boss-face.face-dead .hd { animation: hd-dead 2.6s ease-in forwards; }
@keyframes hd-dead { 0%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(4%); } }
.mon.boss.boss-face.face-dead::after { opacity: .5; }

/* v166: позы Всевидящего ужаса: хлёст — выпад влево, сфера — вспышка, луч — свечение (сам луч — .hd-beam из пасти) */
.mon.boss.boss-face.pose-lash .p-lash, .mon.boss.boss-face.pose-sphere .p-sphere, .mon.boss.boss-face.pose-beam .p-beam { opacity: 1; }
.mon.boss.boss-face.pose-lash .hd { animation: hd-punch .45s ease-out; }
.mon.boss.boss-face.pose-sphere .hd { filter: drop-shadow(0 0 16px #ff3b6b); }
.mon.boss.boss-face.pose-beam .hd { filter: drop-shadow(0 0 14px #ff5ab0); }

/* v168: покадровый босс (Кристальный голем): широкий кадр, ноги — в точке позиции, центр фигуры — по --cx; кадры — шаги по ленте */
.mon.boss.boss-anim { width: var(--bw); margin: calc(-1 * var(--bh) * var(--feet)) 0 0 calc(-1 * var(--bw) * var(--cx)); }
.mon.boss.boss-anim .art { width: var(--bw); height: var(--bh); }
.mon.boss.boss-anim:not(.face-dead) .hd { animation: none !important; filter: none; }
.mon.boss.boss-anim.pose-hurt .hd { filter: brightness(1.25) saturate(1.2); }
.mon.boss.boss-anim .hd-anim { position: absolute; inset: 0; background: no-repeat 0 0 / calc(var(--n, 1) * 100%) 100%; pointer-events: none;
  animation: hd-frames var(--dur, 1s) steps(var(--n, 1), jump-none) var(--iter, infinite) forwards; }
@keyframes hd-frames { from { background-position-x: 0%; } to { background-position-x: 100%; } }
.mon.boss.boss-anim::after { width: calc(var(--bw) * .3) !important; height: calc(var(--bh) * .07) !important; left: calc(var(--cx) * 100%) !important;
  bottom: calc((1 - var(--feet)) * var(--bh) - var(--bh) * .035) !important; }
.mon.boss.boss-anim.spawn .art { animation: none; }
.mon.boss.boss-anim.face-dead::after { opacity: .7; }

/* v-ui: вертикаль — убираем дубли и лишнее только в этой раскладке (в горизонтали всё как было):
   кружки умений на поле (они есть в панели «Навыки»), места помощников «+» на поле, имя хранителя под договором */
@media (orientation: portrait) {
  .arena .skill3, .skill3 { display: none !important; }
  .cards.pact-mode .pact-keeper { display: none !important; }
}
/* v-ui: золото под полосками героя с учётом выреза/кнопок Telegram сверху (раньше уходило под «Закрыть») */
.ui-swamp .arena .hud-right #gold-box { top: calc(max(6px, var(--sa-top)) + 56px); }

/* v-ui: подпись «пока пусто» в сетке предметов — на всю ширину, а не в клетке иконки */
.pause-items .pz-empty { grid-column: 1 / -1; }

/* v-ui: «Пэт и отряд» → «Выключено»: мест у героя нет совсем; с пэтом пустые «+» тоже не нужны (в режиме «Отряд» они видны) */
.arena.crew-off .helper-slot, .arena.pet-mode .helper-slot.empty { display: none !important; }
/* v-ui: сундук на поле — цена табличкой под подписью, без красной точки (он и так виден только когда его можно купить) */
.ui-swamp .arena .dock #dock-chest small { position: static !important; margin: 1px 0 0 !important; }
.ui-swamp .arena .dock #dock-chest .dot { display: none !important; }
.ui-swamp .arena .dock #dock-chest b { color: #f2ffe0 !important; text-shadow: -1px -1px 0 #0b1a07, 1px -1px 0 #0b1a07, -1px 1px 0 #0b1a07, 1px 1px 0 #0b1a07, 0 0 6px #000 !important; }
/* v-ui: «Забрать» — длинная зелёная кнопка без потёков, как «Продолжить» */
.ui-swamp #cards.gift-mode #cards-close:not(.hidden) {
  border: 0 !important; border-image: none !important; border-radius: 14px !important; padding: 0 28px !important;
  width: clamp(260px, 42vw, 440px) !important; height: 52px !important; min-height: 0 !important;
  font-family: 'Nunito', system-ui, sans-serif !important; font-size: 20px !important; font-weight: 900 !important; letter-spacing: .06em; text-transform: uppercase;
  color: #10300a !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .45) !important;
  background: linear-gradient(180deg, #c8ff7e 0%, #8dff5a 35%, #4fc432 75%, #33961f 100%) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -4px 0 rgba(10, 60, 0, .35), inset 0 0 0 2px #d8ff9e, 0 4px 0 #1f5a10, 0 0 18px #7dff3a66 !important;
  animation: none !important; filter: none !important; }
.ui-swamp #cards.gift-mode #cards-close:not(.hidden)::before, .ui-swamp #cards.gift-mode #cards-close:not(.hidden)::after { display: none !important; }
.ui-swamp #cards.gift-mode #cards-close:not(.hidden):active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(10, 60, 0, .35), inset 0 0 0 2px #d8ff9e, 0 1px 0 #1f5a10 !important; }
@media (max-height: 460px) { .ui-swamp #cards.gift-mode #cards-close:not(.hidden) { height: 46px !important; font-size: 18px !important; } }

/* v-ui: лагерь вертикально — без каши: сверху ресурсы и шестерёнка, под ними мир; в центре один слайм над порталом;
   снизу четыре кнопки в ряд. Карточка профиля, «Разраб» (есть в Тест-лаборатории) и коды сессий здесь не показываем; фон приглушён */
@media (orientation: portrait) {
  .camp-menu .camp-img { filter: saturate(.85) brightness(.72); }
  .camp-menu .camp-profile, .camp-menu .dev-toggle, .camp-menu .menu-codes { display: none !important; }
  .camp-menu .camp-top { display: flex !important; flex-direction: column; align-items: stretch; gap: 10px;
    padding: max(12px, var(--sa-top)) max(12px, var(--sa-right)) 0 max(12px, var(--sa-left)) !important; }
  .camp-menu .camp-top .menu-res { order: 1; justify-content: flex-end; flex-wrap: nowrap; }
  .camp-menu .camp-top .camp-title { order: 2; grid-column: auto !important; grid-row: auto !important; padding: 0; }
  .camp-menu .camp-title b { font-size: 22px; }
  .camp-menu #menu-hero { display: block !important; position: absolute; left: 50%; top: 60%; z-index: 2; width: min(34vw, 150px); height: auto; translate: -50% -100%;
    image-rendering: pixelated; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .55)); pointer-events: none; animation: sk-hero-bob 1.8s ease-in-out infinite; transform-origin: 50% 100%; }
  .camp-menu .camp-left, .camp-menu .camp-bottom { top: auto !important; translate: none !important; bottom: calc(max(10px, var(--sa-bottom)) + 26px) !important;
    flex-direction: row !important; gap: 0 !important; width: calc(50% - max(12px, var(--sa-left))); justify-content: space-around; }
  .camp-menu .camp-left { left: max(12px, var(--sa-left)) !important; right: auto; }
  .camp-menu .camp-bottom { left: auto !important; right: max(12px, var(--sa-right)); }
  .camp-menu .camp-btn { width: 84px !important; }
  .camp-menu .camp-btn img { width: 58px !important; height: 58px !important; }
  .camp-menu .camp-btn small { display: none !important; }
  .camp-menu .camp-btn b { font-size: 12px !important; white-space: nowrap; }
  .camp-menu .camp-center { bottom: auto; top: 0; width: 0; }
  .camp-menu .camp-start { left: 50%; right: auto !important; translate: -50% 0; bottom: max(6px, var(--sa-bottom)) !important; align-items: center; }
}

@media (orientation: portrait) {
  .camp-menu .camp-btn b { white-space: normal !important; max-width: 84px; line-height: 1.1; text-align: center; font-size: 11.5px !important; }
  .camp-menu .camp-left, .camp-menu .camp-bottom { align-items: flex-end; bottom: calc(max(10px, var(--sa-bottom)) + 34px) !important; }
}

/* v169: края кадра покадрового босса растворяются (хлыст, осколки) — без резкой обрезки; луч из глаз — поверх кадров */
.mon.boss.boss-anim .hd-anim { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%); mask-image: linear-gradient(90deg, transparent, #000 14%); }
.mon.boss.boss-anim .hd-beam { z-index: 2; }

/* v-ui: лагерь вертикально — название мира простым текстом без рамки, слева в одной строке с ресурсами и шестерёнкой */
@media (orientation: portrait) {
  .camp-menu .camp-top { flex-direction: row !important; align-items: center !important; }
  .camp-menu .camp-top .camp-title { order: 1 !important; flex: 1 1 auto; min-width: 0; text-align: left;
    border: 0 !important; border-image: none !important; background: none !important; padding: 0 !important; }
  .camp-menu .camp-title b { padding: 0 !important; font-size: 17px !important; line-height: 1.15; text-align: left; }
  .camp-menu .camp-title b::before, .camp-menu .camp-title b::after { display: none !important; content: none !important; }
  .camp-menu .camp-title .menu-best { display: none !important; }
  .camp-menu .camp-top .menu-res { order: 2 !important; flex: none; }
}

/* v-ui: кружки умений (Умения 3×3) на поле не показываем ни в одной версии: умения бьют сами, а список с улучшениями — в паузе
   (и в вертикальной панели «Навыки»); на десктопе они стояли под сундуком */
.arena .skill3, .skill3 { display: none !important; }

/* v-ui: задний план приглушён (меньше пестроты, герой и враги читаются лучше); дорога и передний план — как были.
   Крутить — переменной --far-filter */
:root { --far-filter: saturate(.78) brightness(.84) contrast(.94); }
#bg .layer.far { filter: var(--far-filter); }

/* v-ui: инструменты карт — компактные иконки вместо широких плашек: 🎲 переброс (счётчик), 🚫 исключить (замок до первой победы),
   🤖 автовыбор (метка PRO — задел под платную функцию; включённый — подсвечен). «Пропустить» на выборе умения/пассивки/сундука убрано */
#cards #cards-tools:not([hidden]) { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center; align-items: center; gap: 12px !important; width: auto !important; margin: 8px auto 0 !important; grid-template-columns: none !important; }
#cards #cards-tools .tool-row { display: contents !important; }
#cards #cards-tools :is(.tool-btn, .autopick-switch) { position: relative; flex: none !important; width: 58px !important; min-width: 0 !important; height: 58px !important; min-height: 0 !important;
  padding: 0 !important; justify-content: center !important; gap: 0 !important; margin: 0 !important; }
#cards #cards-tools :is(.tool-btn, .autopick-switch) > span, #cards #cards-tools .autopick-switch .sw { display: none !important; }
#cards #cards-tools :is(.tool-btn, .autopick-switch) > i:first-child { font-size: 24px; font-style: normal; line-height: 1; margin: 0 !important; }
#cards #cards-tools .tool-btn em { position: absolute !important; top: -10px; right: -12px; }
#cards #cards-tools .tool-btn.banish.locked { filter: grayscale(.9) brightness(.75); }
#cards #cards-tools .tool-btn.banish.locked em { display: none !important; }
#cards #cards-tools .tool-btn.banish.locked::after { content: '🔒'; display: block !important; position: absolute; right: -10px; top: -12px; font-size: 16px; filter: none; }
.pro-tag { display: none; }
#cards #cards-tools .autopick-switch .pro-tag { display: block; position: absolute; top: -11px; right: -14px; padding: 1px 5px; border-radius: 6px; font-style: normal; font-size: 9px; font-weight: 900;
  letter-spacing: .05em; color: #3a2400; background: linear-gradient(180deg, #ffe48a, #f2a91c); box-shadow: 0 0 0 1.5px #3a2400, 0 0 8px #ffcf4a99; }
#cards:not(.pact-mode):not(.gift-mode):has(#cards-tools:not([hidden]):not(.only-auto)) #cards-close { display: none !important; }
/* правая колонка (горизонталь): иконки рядком по центру колонки */
@media (orientation: landscape) and (min-width: 700px) {
  #cards .cards-rail .cards-tools { flex-direction: row !important; }
}
/* выбор умения (сетка героя и карт): иконки — в правой колонке, по центру карт */
@media (orientation: landscape) {
  #cards.passive-mode:has(.sk-card) #cards-tools:not([hidden]) { display: flex !important; grid-column: 3 !important; grid-row: 3 / span 3 !important; flex-direction: column !important; gap: 18px !important; margin: 0 auto !important; }
  #cards.passive-mode:has(.sk-card) #cards-list > .sk-hero { grid-row: 3 / span 3 !important; align-self: center !important; }
}

/* v-ui: вертикальная панель — сундук сочной иконкой без рамки (цена плашкой, готов — растёт и светится, крышка приоткрывается);
   «Пауза» и «В город» убраны: шестерёнка сверху и так открывает паузу, а «В город» — в ней */
@media (orientation: portrait) {
  .pp-actions { display: flex !important; justify-content: center; gap: 0 !important; }
  #pp-pause, #pp-town { display: none !important; }
  .pp-btn.pp-chest { position: relative; flex-direction: column; gap: 0; min-height: 0; padding: 0 12px; background: none !important; box-shadow: none !important; animation: none; }
  .pp-btn.pp-chest img { width: 84px; height: 70px; object-fit: contain; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .6)); transition: scale .2s; }
  .pp-btn.pp-chest span { position: relative; margin-top: -10px; flex-direction: row; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px;
    background: rgba(12, 18, 10, .92); box-shadow: inset 0 0 0 1.5px #6b8a4a; }
  .pp-btn.pp-chest b { font-size: 12px; color: #e8ffb8; }
  .pp-btn.pp-chest small { font-size: 12px; }
  .pp-btn.pp-chest:not(.ready) { filter: grayscale(.6) brightness(.8); }
  .pp-btn.pp-chest.ready img { animation: chest-take 1.2s ease-in-out infinite; }
  .pp-btn.pp-chest.ready span { background: linear-gradient(180deg, #b6ff6a, #4fbf2a); box-shadow: inset 0 0 0 1.5px #d8ff9e, 0 0 12px #7dff3a88; }
  .pp-btn.pp-chest.ready b, .pp-btn.pp-chest.ready small { color: #10300a; }
  .pp-btn.pp-chest.ready::before { content: ''; position: absolute; left: 50%; top: 30px; z-index: -1; width: 130px; height: 90px; translate: -50% -50%; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(255, 225, 74, .5), rgba(125, 255, 58, .2) 55%, transparent); animation: chest-halo 1.2s ease-in-out infinite; }
  .pp-btn.pp-chest:active img { scale: .92; }
}

/* v-ui: выбор пути эволюции — меньше текста, сочнее карточки: без длинного пояснения, облик крупно на светящемся подиуме,
   девиз — цветной плашкой, умение золотом, описание не длиннее 3 строк; у каждого пути свой цвет рамки */
#evolution #evolution-description { display: none !important; }
#evolution .evolution-option:not(.dev) { --bc: #8fdc6a; border: 0 !important; border-radius: 14px !important;
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--bc) 22%, transparent), transparent 60%), linear-gradient(180deg, #1c2a1e, #111a13) !important;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bc) 65%, #1d2a1d), 0 6px 14px rgba(0, 0, 0, .5) !important; transition: transform .15s, box-shadow .15s; }
#evolution .evolution-option:not(.dev):nth-child(2) { --bc: #6ec8ff; }
#evolution .evolution-option:not(.dev):nth-child(3) { --bc: #ff5d7a; }
#evolution .evolution-option:not(.dev):nth-child(4) { --bc: #e8d6b0; }
#evolution .evolution-option:not(.dev):hover, #evolution .evolution-option:not(.dev):focus-visible { transform: translateY(-3px);
  box-shadow: inset 0 0 0 2px var(--bc), 0 0 18px color-mix(in srgb, var(--bc) 55%, transparent), 0 8px 16px rgba(0, 0, 0, .55) !important; }
#evolution .evolution-option:not(.dev) img { image-rendering: pixelated; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--bc) 60%, transparent)) drop-shadow(0 4px 2px rgba(0, 0, 0, .6)); }
#evolution .evolution-option .evo-motto { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 10px !important; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
  color: #0e160d !important; background: var(--bc, #8fdc6a); }
#evolution .evolution-option strong { color: #ffd25e !important; font-size: 13px !important; }
#evolution .evolution-option small { font-size: 11.5px !important; line-height: 1.3 !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
#evolution .evolution-option b { font-size: 16px; }
/* горизонталь (варианты в ряд): облик крупнее, на подиуме */
@media (orientation: landscape) {
  #evolution #evolution-options:has(.evolution-option:nth-child(2)) .evolution-option:not(.dev) { padding: 10px 8px !important; gap: 4px !important; }
  #evolution #evolution-options:has(.evolution-option:nth-child(2)) .evolution-option:not(.dev) img { width: 72px !important; height: 72px !important;
    padding: 4px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--bc) 35%, transparent), transparent 75%); }
}
@media (orientation: landscape) and (max-height: 420px) {
  #evolution #evolution-options:has(.evolution-option:nth-child(2)) .evolution-option:not(.dev) img { width: 60px !important; height: 60px !important; }
}

/* v-ui: выбор умения — заголовок короче и крупнее, уровень плашкой; без строки-подсказки (прогресс — ячейки умений у героя) */
#cards.passive-mode:has(.sk-card) .cards-sub { display: none !important; }
#cards.passive-mode:has(.sk-card) .cards-title { font-size: 30px; line-height: 1.05; }
#cards.passive-mode:has(.sk-card) .cards-title small { display: table !important; margin: 0 auto 6px; padding: 2px 12px; border-radius: 999px; font-size: 12px !important; letter-spacing: .12em;
  color: #10300a !important; text-shadow: none !important; background: linear-gradient(180deg, #ffe48a, #f2c14c); box-shadow: 0 0 0 1.5px #3a2400, 0 0 10px #ffcf4a66; }
/* карточки легче: плашка типа меньше, описание в 2 строки */
#cards.passive-mode #cards-list .card.sk-card :is(.card-rarity, .sk-up-tag) { font-size: 9px !important; padding: 1px 6px !important; }
#cards.passive-mode #cards-list .card.sk-card .card-desc { font-size: 13px !important; line-height: 1.28 !important; -webkit-line-clamp: 2 !important; opacity: .92; }
/* подписи под иконками инструментов: сразу понятно, что это и что тапать */
#cards #cards-tools :is(.tool-btn, .autopick-switch) { flex-direction: column !important; height: 66px !important; width: 72px !important; }
#cards #cards-tools :is(.tool-btn, .autopick-switch) > span:not(.sw) { display: block !important; }
#cards #cards-tools :is(.tool-btn, .autopick-switch) > span:not(.sw) small { display: none !important; }
#cards #cards-tools :is(.tool-btn, .autopick-switch) > span:not(.sw) b { display: block; font-size: 10px !important; line-height: 1.1; margin-top: 2px; white-space: nowrap; }

/* v-ui: выбор умения в горизонтали — три карточки в ряд: крупная круглая иконка сверху, под ней тип, имя и описание.
   Слева герой с ячейками навыков, справа иконки инструментов */
@media (orientation: landscape) {
  #cards.passive-mode:has(.sk-card) .cards-box { grid-template-columns: min(170px, 19vw) repeat(3, minmax(0, 210px)) min(110px, 14vw) !important;
    grid-template-rows: auto auto auto !important; column-gap: 14px !important; }
  #cards.passive-mode:has(.sk-card) #cards-list > .card:nth-child(2) { grid-column: 2 !important; grid-row: 3 !important; }
  #cards.passive-mode:has(.sk-card) #cards-list > .card:nth-child(3) { grid-column: 3 !important; grid-row: 3 !important; }
  #cards.passive-mode:has(.sk-card) #cards-list > .card:nth-child(4) { grid-column: 4 !important; grid-row: 3 !important; }
  #cards.passive-mode:has(.sk-card) #cards-list > .sk-hero { grid-row: 3 !important; }
  #cards.passive-mode:has(.sk-card) #cards-tools:not([hidden]) { grid-column: 5 !important; grid-row: 3 !important; gap: 14px !important; }
  #cards.passive-mode #cards-list .card.sk-card { flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; text-align: center !important;
    gap: 6px !important; height: 100%; padding: 14px 12px 12px !important; border-radius: 16px !important;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tc) 60%, #1d2a1d), inset 0 5px 0 0 var(--tc), 0 6px 14px rgba(0, 0, 0, .5) !important; }
  #cards.passive-mode #cards-list .card.sk-card:hover { transform: translateY(-4px) !important; }
  #cards.passive-mode #cards-list .card.sk-card .card-art { width: clamp(84px, 24vh, 132px) !important; height: clamp(84px, 24vh, 132px) !important; border-radius: 50% !important;
    box-shadow: inset 0 0 0 3px var(--tc), 0 0 18px color-mix(in srgb, var(--tc) 45%, transparent) !important; }
  #cards.passive-mode #cards-list .card.sk-card .card-art > img { border-radius: 50% !important; }
  #cards.passive-mode #cards-list .card.sk-card .card-body { align-items: center !important; gap: 4px !important; }
  #cards.passive-mode #cards-list .card.sk-card .card-head { flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; }
  #cards.passive-mode #cards-list .card.sk-card :is(.card-rarity, .sk-up-tag) { order: -1 !important; margin: 0 !important; }
  #cards.passive-mode #cards-list .card.sk-card .card-name { text-align: center !important; font-size: 15px !important; }
  #cards.passive-mode #cards-list .card.sk-card .card-desc { text-align: center !important; font-size: 12.5px !important; -webkit-line-clamp: 4 !important; }
}
@media (orientation: landscape) and (max-height: 420px) {
  #cards.passive-mode #cards-list .card.sk-card { padding: 10px 8px 8px !important; gap: 4px !important; }
  #cards.passive-mode #cards-list .card.sk-card .card-desc { font-size: 11.5px !important; -webkit-line-clamp: 3 !important; }
  #cards.passive-mode:has(.sk-card) .sk-hero-stage { width: min(96px, 100%); }
}

/* v-ui: пиксельные фоны лагеря (CONFIG.campBgs) — без сглаживания; слайм стоит над лужей-порталом; фонари и грибы старой картинки скрыты;
   лёгкие эффекты: медленный проход света по сцене и мягкое мерцание лужи */
.camp-menu.camp-px .camp-img { image-rendering: pixelated; }
.camp-menu.camp-px .camp-lamps, .camp-menu.camp-px .camp-shrooms { display: none !important; }
.camp-menu.camp-px #menu-hero { display: block !important; position: absolute; left: 50%; top: var(--hero-y, 72%); z-index: 2; width: clamp(64px, 9%, 150px); height: auto;
  translate: -50% -100%; image-rendering: pixelated; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .55)); pointer-events: none;
  animation: sk-hero-bob 1.8s ease-in-out infinite; transform-origin: 50% 100%; }
.camp-menu.camp-px .camp-stage::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 248, 210, .05) 46%, rgba(255, 248, 210, .09) 50%, rgba(255, 248, 210, .05) 54%, transparent 62%) 0 0 / 300% 100% no-repeat;
  animation: camp-sweep 12s ease-in-out infinite; }
@keyframes camp-sweep { 0% { background-position: 140% 0; } 100% { background-position: -40% 0; } }
.camp-menu.camp-px .camp-portal::after { content: ''; position: absolute; inset: 8% 4%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(170, 255, 120, .35), rgba(120, 255, 90, .12) 60%, transparent);
  animation: camp-pool 3.2s ease-in-out infinite; }
@keyframes camp-pool { 50% { opacity: .45; transform: scale(1.06, 1.12); } }
@media (orientation: portrait) {
  .camp-menu.camp-px .camp-img { filter: saturate(.95) brightness(.88); }
  .camp-menu.camp-px #menu-hero { width: min(34vw, 150px); }
}
@media (prefers-reduced-motion: reduce) { .camp-menu.camp-px .camp-stage::after, .camp-menu.camp-px .camp-portal::after, .camp-menu.camp-px #menu-hero { animation: none !important; } }
/* пауза — на фоне текущей картинки лагеря под затемнением */
.pause { background: linear-gradient(180deg, rgba(4, 8, 5, .72), rgba(4, 8, 5, .86)), var(--pause-bg, none) center / cover no-repeat, #050805; image-rendering: pixelated; }

/* v-ui: чипы-выжимка на карточке умения (⚔ ×3 · ◎ по области · ⏱ 4 с) — решение с одного взгляда; описание короче */
.sk-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 1px; }
.sk-chips i { padding: 2px 7px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 900; line-height: 1.3; white-space: nowrap;
  color: #f2ffe8; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc, #8fdc6a) 55%, transparent); }
@media (orientation: portrait) {
  #cards.passive-mode #cards-list .card.sk-card { padding: 10px 14px 10px 10px !important; gap: 12px !important; border-radius: 18px !important; }
  #cards.passive-mode #cards-list .card.sk-card .card-art { width: 74px !important; height: 74px !important;
    box-shadow: inset 0 0 0 3px var(--tc), 0 0 14px color-mix(in srgb, var(--tc) 40%, transparent) !important; }
  #cards.passive-mode #cards-list .card.sk-card .card-name { font-size: 18px !important; }
  #cards.passive-mode #cards-list .card.sk-card .card-desc { -webkit-line-clamp: 1 !important; font-size: 12.5px !important; opacity: .8; }
}
@media (orientation: landscape) {
  #cards.passive-mode #cards-list .card.sk-card .sk-chips { justify-content: center; }
  #cards.passive-mode #cards-list .card.sk-card .card-desc { -webkit-line-clamp: 2 !important; }
}
@media (orientation: landscape) and (max-height: 420px) { .sk-chips i { font-size: 10px; padding: 1px 6px; } }

/* v-ui: дальний план боя — одноцветный холодный тон мира (CONFIG.worldTints) и лёгкая дымка сверху; дорога — чуть теплее и контрастнее.
   Герой, враги и капли остаются самыми яркими пятнами */
:root { --far-filter: saturate(.85) brightness(.8) contrast(.86); }
#bg .layer.far { isolation: isolate; }
#bg .layer.far::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--far-tint, transparent); mix-blend-mode: color; opacity: var(--far-tint-a, 0); }
#bg .layer.far::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: calc(var(--far-tint-a, 0) * .6);
  background: linear-gradient(180deg, color-mix(in srgb, var(--far-tint, transparent) 55%, #fff 10%) 0%, transparent 65%); mix-blend-mode: screen; }
#bg .layer.road { filter: saturate(1.08) contrast(1.06) sepia(.06); }

/* v-ui: без светящихся ореолов-обводок у героя, врагов, призванных, пэта и NPC — только оттенок состояния и обычная тень */
#slime.frenzy #evolved-art, #slime.frenzy .slime-body { filter: saturate(1.4) !important; }
#slime.grabbed #evolved-art, #slime.grabbed .slime-body { filter: saturate(.7) !important; }
#slime.poisoned #evolved-art, #slime.poisoned .slime-body { filter: hue-rotate(40deg) !important; }
.arena.time-stop .slime-body, .arena.time-stop #evolved-art { filter: saturate(1.4) !important; }
#slime.sk2-ghost #evolved-art, #slime.sk2-ghost .slime-body { filter: brightness(1.15) saturate(.7) !important; }
#slime.sk2-ice #evolved-art, #slime.sk2-ice .slime-body { filter: brightness(1.08) saturate(.85) !important; }
#slime.sk2-holy #evolved-art, #slime.sk2-holy .slime-body { filter: brightness(1.12) !important; }
.mon.boss .art img, .monster.boss .art { filter: drop-shadow(0 6px 4px #0008) !important; }
.mon.boss.tell .art { filter: brightness(1.15) !important; }
.mon.boss.tell-grab .art { filter: brightness(1.1) !important; }
.mon.slowed .art img, .monster.slowed .art { filter: saturate(.4) brightness(1.15) !important; }
.mon.poisoned .art, .mon.poisoned .art img { filter: sepia(.4) hue-rotate(60deg) saturate(1.6) !important; }
.mon.burning .art, .mon.burning .art img { filter: sepia(.5) saturate(2) hue-rotate(-20deg) !important; }
.mon.elite .art { filter: none !important; }
.mon.cursed .art { filter: saturate(.8) !important; }
.mon.bleed .art { filter: saturate(1.15) !important; }
.mon.boss.boss-face.pose-eyes .hd { filter: none !important; }
.sk2-summon.ranger, .sk2-summon.guardian { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)) !important; }
.pet.flyer { filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .5)) !important; }
.helper-slot.filled img.spirit, .helper-slot.flesh img { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)) !important; }

/* v-ui: плашка вида — справа от названия (в вертикали и узких карточках-строках); у пассивки цвет плашки = цвет редкости рамки */
@media (orientation: portrait) {
  #cards.passive-mode #cards-list .card.sk-card .card-head { flex-wrap: nowrap !important; width: 100%; }
  #cards.passive-mode #cards-list .card.sk-card :is(.card-rarity, .sk-up-tag) { order: 2 !important; margin-left: auto !important; flex: none; }
}
#cards.passive-mode #cards-list .card.sk-card.t-pas .card-rarity { background: var(--tc) !important; color: #0d140b !important; }

/* v-ui: карточки умений в духе Clash of Clans (макеты Higgsfield): вплотную, без скруглений; каменная рамка с мхом и потёками,
   яркая цветная панель с каменной фактурой (цвет = тип / редкость), цифры на тёмных мазках кистью.
   Вертикаль — плашки во всю ширину; горизонталь — три высокие карты с лучами за иконкой и лентой имени */
#cards.passive-mode:has(.sk-card) #cards-list { gap: 0 !important; row-gap: 0 !important; }
#cards.passive-mode #cards-list .card.sk-card {
  --panel: color-mix(in srgb, var(--tc) 72%, #120c06);
  position: relative; overflow: visible !important; border-radius: 0 !important; margin: 0 !important;
  background: url(assets/ui/cards/stone-tex.png) center / 260px, radial-gradient(130% 100% at 25% 15%, color-mix(in srgb, var(--tc) 88%, #fff 10%), var(--panel) 72%) !important;
  background-blend-mode: multiply, normal !important;
  box-shadow: inset 0 0 0 3px #1a120c, inset 0 0 0 7px #5f5242, inset 0 0 0 9px #2a2118, inset 0 -14px 22px rgba(0, 0, 0, .35) !important; }
#cards.passive-mode #cards-list .card.sk-card::before { content: '' !important; display: block !important; position: absolute; left: 0; right: 0; top: -14px; height: 40px; z-index: 2; pointer-events: none;
  background: url(assets/ui/cards/moss-edge.png) repeat-x 0 0 / auto 92px; }
#cards.passive-mode #cards-list .card.sk-card:hover, #cards.passive-mode #cards-list .card.sk-card.holding { filter: brightness(1.1); transform: none !important; z-index: 3; }
#cards.passive-mode #cards-list .card.sk-card .card-art { box-shadow: inset 0 0 0 4px #1a120c, 0 0 0 4px color-mix(in srgb, var(--tc) 55%, #fff), 0 6px 10px rgba(0, 0, 0, .45) !important;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--tc) 50%, #fff 10%), #140d07 75%) !important; }
#cards.passive-mode #cards-list .card.sk-card .card-name { font-family: 'Rubik', 'Nunito', sans-serif !important; font-weight: 900 !important; color: #fff !important; letter-spacing: .01em;
  -webkit-text-stroke: 1.2px #2a1608; paint-order: stroke fill; text-shadow: 0 3px 0 #2a1608 !important; }
#cards.passive-mode #cards-list .card.sk-card :is(.card-rarity, .sk-up-tag) { background: rgba(20, 12, 6, .78) !important; color: #fff !important; text-shadow: none !important;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tc) 70%, #fff) !important; border-radius: 8px !important; font-size: 10px !important; padding: 3px 9px !important; }
#cards.passive-mode #cards-list .card.sk-card .sk-chips i { background: url(assets/ui/cards/brush.png) center / 100% 100% no-repeat !important; box-shadow: none !important; border-radius: 0 !important;
  padding: 7px 16px !important; font-size: 14px !important; color: #fff !important; text-shadow: 0 1px 0 #000; }
#cards.passive-mode #cards-list .card.sk-card .card-desc { color: #fff !important; opacity: 1 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
#cards.passive-mode #cards-list .card.sk-card .card-desc :is(.num, b) { color: #fff6a8 !important; }
/* вертикаль: плашки во всю ширину экрана, иконка крупно слева, плашка вида — в правом верхнем углу */
@media (orientation: portrait) {
  #cards.passive-mode:has(.sk-card) { padding-left: 0 !important; padding-right: 0 !important; }
  #cards.passive-mode:has(.sk-card) .cards-box { max-width: none !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
  #cards.passive-mode:has(.sk-card) #cards-list { grid-template-columns: minmax(0, 1fr) !important; width: 100%; margin-top: 10px; }
  #cards.passive-mode #cards-list .card.sk-card { width: 100% !important; min-height: 128px; padding: 18px 16px 14px 14px !important; gap: 14px !important; }
  #cards.passive-mode #cards-list .card.sk-card .card-art { width: 96px !important; height: 96px !important; }
  #cards.passive-mode #cards-list .card.sk-card .card-name { font-size: 22px !important; line-height: 1.05; }
  #cards.passive-mode #cards-list .card.sk-card :is(.card-rarity, .sk-up-tag) { position: absolute; top: 14px; right: 14px; margin: 0 !important; }
  #cards.passive-mode #cards-list .card.sk-card .card-head { padding-right: 96px !important; }
  #cards.passive-mode #cards-list .card.sk-card .card-desc { -webkit-line-clamp: 2 !important; font-size: 13px !important; }
}
/* горизонталь: три высокие карты вплотную; лучи за иконкой, имя на ленте */
@media (orientation: landscape) {
  #cards.passive-mode:has(.sk-card) .cards-box { column-gap: 0 !important; }
  #cards.passive-mode:has(.sk-card) #cards-list > .sk-hero { margin-right: 14px !important; }
  #cards.passive-mode:has(.sk-card) #cards-tools:not([hidden]) { margin-left: 14px !important; }
  #cards.passive-mode #cards-list .card.sk-card { padding-top: 22px !important;
    background: url(assets/ui/cards/stone-tex.png) center / 260px, repeating-conic-gradient(from 0deg at 50% 26%, rgba(255, 255, 255, .13) 0 7deg, transparent 7deg 20deg),
      radial-gradient(120% 80% at 50% 25%, color-mix(in srgb, var(--tc) 90%, #fff 12%), var(--panel) 75%) !important;
    background-blend-mode: multiply, normal, normal !important; }
  #cards.passive-mode #cards-list .card.sk-card .card-name { display: block; width: calc(100% + 16px); margin: 0 -8px; padding: 5px 10px 6px; font-size: 15px !important;
    background: color-mix(in srgb, var(--tc) 55%, #2a0c06); clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%); }
}

/* v-ui: насыщенные цвета панелей карточек (как в макете): атака — оранжевый, усиление — золото, защита — синий, призыв — зелёный;
   пассивки — по редкости (серый / зелёный / синий / фиолетовый); улучшение — золото */
#cards.passive-mode #cards-list .card.sk-card { --panel: #2f6a3a; }
#cards.passive-mode #cards-list .card.sk-card.t-atk { --panel: #d8641c; }
#cards.passive-mode #cards-list .card.sk-card.t-buff { --panel: #c9801a; }
#cards.passive-mode #cards-list .card.sk-card.t-def { --panel: #2a72c8; }
#cards.passive-mode #cards-list .card.sk-card.t-summon { --panel: #3a9230; }
#cards.passive-mode #cards-list .card.sk-card.t-pas { --panel: #6b7078; }
#cards.passive-mode #cards-list .card.sk-card.t-pas.uncommon { --panel: #3a9230; }
#cards.passive-mode #cards-list .card.sk-card.t-pas.rare { --panel: #2a68c8; }
#cards.passive-mode #cards-list .card.sk-card.t-pas.epic { --panel: #7638c0; }
#cards.passive-mode #cards-list .card.sk-card.t-up { --panel: #c08a14; }
#cards.passive-mode #cards-list .card.sk-card {
  background: url(assets/ui/cards/stone-tex.png) center / 260px, radial-gradient(130% 100% at 25% 15%, color-mix(in srgb, var(--panel) 80%, #fff 20%), var(--panel) 55%, color-mix(in srgb, var(--panel) 70%, #000) 100%) !important;
  background-blend-mode: multiply, normal !important; }
#cards.passive-mode #cards-list .card.sk-card .card-desc { text-shadow: 0 1px 0 rgba(0, 0, 0, .7), 0 0 6px rgba(0, 0, 0, .5) !important; }
@media (orientation: landscape) {
  #cards.passive-mode #cards-list .card.sk-card {
    background: url(assets/ui/cards/stone-tex.png) center / 260px, repeating-conic-gradient(from 0deg at 50% 26%, rgba(255, 255, 255, .14) 0 7deg, transparent 7deg 20deg),
      radial-gradient(120% 80% at 50% 25%, color-mix(in srgb, var(--panel) 75%, #fff 25%), var(--panel) 55%, color-mix(in srgb, var(--panel) 70%, #000) 100%) !important;
    background-blend-mode: multiply, normal, normal !important; }
  #cards.passive-mode #cards-list .card.sk-card .card-name { background: color-mix(in srgb, var(--panel) 60%, #2a0c06) !important; }
}

/* ===== v-chest: окно сундука и награды босса (макеты 1 — альбомная, 3 — книжная, 6 — пьедесталы после босса) =====
   пиксельные детали — assets/ui/chest/*.png: рамка frame2 (9-slice), камни редкости gem-*, табличка, вывеска, каменные кнопки, рюкзак, пьедестал.
   карты строит chestCardEl() в game.js; глобально стоит body * { font-family: Nunito !important }, поэтому шрифты здесь тоже с !important */
#cards:has(.ch-card) { --px: 2px; background-color: rgba(8, 14, 8, .38) !important; }
#cards:has(.ch-card)::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 42%, rgba(8, 16, 12, .2), rgba(3, 7, 5, .82) 80%), linear-gradient(transparent 62%, rgba(46, 78, 34, .35)); }
#cards:has(.ch-card) .cards-box { position: relative; z-index: 1; }
/* пока открыт сундук, подписи боя за окном не мешают (мир/волна, поглощение, статусы над слизнем) */
body:has(#cards:not(.hidden) .ch-card) :is(#world-name, #world-progress, #evo-status, .hero-status) { visibility: hidden !important; }

/* вывеска «Сундук» */
#cards:has(.ch-card) #cards-title { --th: clamp(54px, 12vh, 92px); display: grid; place-items: center; box-sizing: border-box; height: var(--th); aspect-ratio: 200 / 88; width: auto; margin: 0 auto;
  padding: calc(var(--th) * .2) 0 0; background: url('assets/ui/chest/sign.png') center / 100% 100% no-repeat; image-rendering: pixelated; border: 0; box-shadow: none;
  font-family: 'Rubik', 'Nunito', sans-serif !important; font-weight: 900; font-size: clamp(17px, 3.6vh, 28px); letter-spacing: 1.5px; text-transform: uppercase;
  color: #eadfc4; text-shadow: 0 3px 0 #1b120a; -webkit-text-stroke: 1px #1b120a; paint-order: stroke fill; }
#cards:has(.ch-card) #cards-title::before, #cards:has(.ch-card) #cards-title::after { display: none; }
#cards:has(.ch-card) #cards-sub { font-family: 'Nunito', sans-serif !important; font-weight: 800; font-size: 13px; color: #b9c6ae; text-shadow: 0 2px 0 #000; }

/* ряд карт с зазорами */
#cards:has(.ch-card) #cards-list { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: stretch !important;
  gap: clamp(16px, 3vw, 40px) !important; padding: 26px 6px 22px !important; max-width: none !important; }

/* ---------- карта: сланцевая рамка с бронзовым кантом (9-slice), внутри — плита цвета редкости ---------- */
.ch-card { --rc: #c4ccd2; }
.ch-card.uncommon { --rc: #5fd04e; } .ch-card.rare { --rc: #3f86f0; } .ch-card.epic { --rc: #a45cf0; }
.ch-card.legendary { --rc: #f4b632; } .ch-card.lunar { --rc: #ff4256; }
#cards #cards-list .ch-card { all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; align-items: center; cursor: pointer;
  flex: 0 1 216px; min-width: 0; padding: 8px 8px 10px; -webkit-tap-highlight-color: transparent; user-select: none;
  border-style: solid; border-color: transparent;
  border-width: calc(var(--px) * 11) calc(var(--px) * 11) calc(var(--px) * 6) calc(var(--px) * 11);
  border-image: url('assets/ui/chest/frame2.png') 20 / calc(var(--px) * 20) / 0 0 calc(var(--px) * 8) 0 round;
  image-rendering: pixelated; background-clip: padding-box;
  background-image: radial-gradient(ellipse 80% 42% at 50% 26%, color-mix(in srgb, var(--rc) 50%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--rc) 30%, #101412), color-mix(in srgb, var(--rc) 11%, #0d110f) 55%, #0a0d0b);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rc) 50%, transparent), inset 0 0 22px color-mix(in srgb, var(--rc) 26%, transparent);
  transition: transform .15s, filter .15s; }
#cards #cards-list .ch-card:hover:not(.holding) { transform: translateY(-3px); filter: brightness(1.06); }
#cards #cards-list .ch-card.holding { transform: translateY(-6px) scale(1.03); filter: drop-shadow(0 0 10px var(--rc)) brightness(1.1); }
/* полоса удержания под картой */
#cards #cards-list .ch-card::after { content: ''; position: absolute; z-index: 4; left: 4px; right: 4px; bottom: calc(var(--px) * -6 - 12px); height: 5px; background: var(--rc);
  box-shadow: 0 0 0 2px #000; transform-origin: left; scale: 0 1; opacity: 0; }
#cards #cards-list .ch-card.holding::after { opacity: 1; animation: ch-hold var(--hold, 350ms) linear forwards; }
#cards.banish-mode #cards-list .ch-card::after { background: #ff5a5a; }
@keyframes ch-hold { to { scale: 1 1; } }

/* камень в оправе на верхней кромке — грейд предмета */
#cards #cards-list .ch-card .ch-gem { position: absolute; z-index: 4; left: 50%; top: calc(var(--px) * -16.5); translate: -50% 0; width: calc(var(--px) * 21); height: calc(var(--px) * 21.75);
  background: url('assets/ui/chest/gem-common.png') center / 100% 100% no-repeat; image-rendering: pixelated;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .7)) drop-shadow(0 0 6px color-mix(in srgb, var(--rc) 70%, transparent)); }
#cards #cards-list .ch-card.uncommon .ch-gem { background-image: url('assets/ui/chest/gem-uncommon.png'); }
#cards #cards-list .ch-card.rare .ch-gem { background-image: url('assets/ui/chest/gem-rare.png'); }
#cards #cards-list .ch-card.epic .ch-gem { background-image: url('assets/ui/chest/gem-epic.png'); }
#cards #cards-list .ch-card.legendary .ch-gem { background-image: url('assets/ui/chest/gem-legendary.png'); }
#cards #cards-list .ch-card.lunar .ch-gem { background-image: url('assets/ui/chest/gem-lunar.png'); }

/* предмет: мягкое пульсирующее свечение, поднимающиеся искры; у редких и выше — медленные лучи */
#cards #cards-list .ch-card .ch-art { position: relative; isolation: isolate; display: grid; place-items: center; width: 100%; aspect-ratio: 1.2; flex: none; pointer-events: none; }
#cards #cards-list .ch-card .ch-art::before { content: ''; position: absolute; z-index: -1; inset: 4% 14%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--rc) 60%, transparent) 0, color-mix(in srgb, var(--rc) 18%, transparent) 45%, transparent 70%);
  animation: ch-pulse 2.6s ease-in-out infinite; }
#cards #cards-list .ch-card:is(.rare, .epic, .legendary, .lunar) .ch-art::before { inset: -6% 4%;
  background: radial-gradient(circle, color-mix(in srgb, var(--rc) 62%, transparent) 0, transparent 46%),
    repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 30%, transparent) 0 9deg, transparent 9deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 68%); mask: radial-gradient(circle, #000 30%, transparent 68%);
  animation: ch-spin 18s linear infinite, ch-pulse 2.6s ease-in-out infinite; }
#cards #cards-list .ch-card .ch-art::after { content: ''; position: absolute; z-index: 1; inset: 0 8%; pointer-events: none;
  background: radial-gradient(circle, var(--rc) 0 1.6px, transparent 2.2px) 0 0 / 34px 46px, radial-gradient(circle, #fff 0 1px, transparent 1.6px) 15px 21px / 27px 58px,
    radial-gradient(circle, color-mix(in srgb, var(--rc) 70%, #fff) 0 1.2px, transparent 1.8px) 7px 34px / 41px 39px;
  -webkit-mask: linear-gradient(transparent, #000 30%, #000 60%, transparent); mask: linear-gradient(transparent, #000 30%, #000 60%, transparent);
  opacity: .75; animation: ch-rise 4.5s linear infinite; }
#cards #cards-list .ch-card .ch-art img { position: relative; z-index: 2; width: 72%; height: 88%; object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 8px color-mix(in srgb, var(--rc) 65%, transparent)); animation: ch-bob 3s ease-in-out infinite; }
#cards #cards-list .ch-card:nth-child(2) .ch-art img, #cards #cards-list .ch-card:nth-child(2) .ch-art::before { animation-delay: -1s; }
#cards #cards-list .ch-card:nth-child(3) .ch-art img, #cards #cards-list .ch-card:nth-child(3) .ch-art::before { animation-delay: -2s; }
#cards #cards-list .ch-card .ch-art .emoji { position: relative; z-index: 2; font-size: 54px; }
@keyframes ch-pulse { 50% { opacity: .55; scale: .94; } }
@keyframes ch-spin { to { rotate: 1turn; } }
@keyframes ch-rise { from { background-position: 0 0, 15px 21px, 7px 34px; } to { background-position: 0 -92px, 15px -95px, 7px -44px; } }
@keyframes ch-bob { 50% { translate: 0 -4px; } }
@media (prefers-reduced-motion: reduce) { #cards #cards-list .ch-card :is(.ch-art, .ch-art img)::before, #cards #cards-list .ch-card .ch-art::after, #cards #cards-list .ch-card .ch-art img { animation: none !important; } }

#cards #cards-list .ch-card .ch-badge { position: absolute; z-index: 3; top: 6px; left: 6px; padding: 1px 6px; font: 900 12px/1.2 'Nunito', sans-serif; font-family: 'Nunito', sans-serif !important;
  color: #ffd25e; background: rgba(0, 0, 0, .7); box-shadow: 0 0 0 2px #ffd25e, 0 0 0 4px #000; }
#cards #cards-list .ch-card .ch-badge.new { color: #9cff7a; box-shadow: 0 0 0 2px #5fd04e, 0 0 0 4px #000; }
#cards #cards-list .ch-card .ch-body { display: flex; flex-direction: column; align-items: center; width: 100%; flex: 1 1 auto; min-height: 0; }
#cards #cards-list .ch-card i.ch-info { position: absolute; z-index: 3; top: 6px; right: 6px; display: grid; place-items: center; width: 20px; height: 20px;
  font: 900 13px/1 'Nunito', sans-serif; font-family: 'Nunito', sans-serif !important; font-style: normal; color: #e2e8dc; background: rgba(0, 0, 0, .6);
  box-shadow: 0 0 0 2px #59614f, 0 0 0 4px #000; cursor: help; }
/* ржавая табличка с названием */
#cards #cards-list .ch-card .ch-name { box-sizing: border-box; display: grid; place-items: center; width: calc(100% + 18px); margin: 0 -9px; min-height: 46px; padding: 9px 16px 8px;
  background: url('assets/ui/chest/plaque.png') center / 100% 100% no-repeat; image-rendering: pixelated;
  font: 900 15px/1.05 'Nunito', sans-serif; font-family: 'Nunito', sans-serif !important; color: #f2e7cd; text-align: center; text-shadow: 0 2px 0 #1a0f08; text-wrap: balance; }
#cards #cards-list .ch-card .ch-rar { margin-top: 8px; padding: 2px 12px 1px; font: 800 11px/1.2 'Nunito', sans-serif; font-family: 'Nunito', sans-serif !important; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--rc); background: rgba(0, 0, 0, .55); box-shadow: 0 0 0 2px color-mix(in srgb, var(--rc) 70%, #000), 0 0 0 4px #000; }
/* числа на неряшливых мазках цвета редкости */
#cards #cards-list .ch-card .ch-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; width: 100%; margin-top: 10px; }
#cards #cards-list .ch-card .ch-stat { position: relative; isolation: isolate; display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 13px 5px; white-space: nowrap; }
#cards #cards-list .ch-card .ch-stat::before { content: ''; position: absolute; inset: -1px -2px; z-index: -1; background: color-mix(in srgb, var(--rc) 28%, #2b2a22);
  -webkit-mask: url('assets/ui/cards/brush.png') center / 100% 100% no-repeat; mask: url('assets/ui/cards/brush.png') center / 100% 100% no-repeat; }
#cards #cards-list .ch-card .ch-stat b { font: 700 17px/1 'Pixelify Sans', sans-serif; font-family: 'Pixelify Sans', 'Nunito', sans-serif !important; color: #fff; text-shadow: 0 2px 0 #000; }
#cards #cards-list .ch-card .ch-stat small { font: 700 10.5px/1 'Nunito', sans-serif; color: #c9d3be; }
#cards #cards-list .ch-card .ch-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; margin-top: 8px; padding: 0 2px;
  font: 600 11.5px/1.28 'Nunito', sans-serif; color: #cbd4c3; text-align: center; }
#cards #cards-list .ch-card .ch-line b { color: #fff; }
#cards #cards-list .ch-card .ch-sym { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 6px; font: 900 10.5px/1 'Nunito', sans-serif; font-family: 'Nunito', sans-serif !important; color: var(--sc); }
#cards #cards-list .ch-card .ch-sym img { width: 14px; height: 14px; image-rendering: pixelated; }

/* ---------- кнопки переброса/исключения/автовыбора — каменные плиты ---------- */
#cards:has(.ch-card) #cards-tools :is(.tool-btn, .autopick-switch) { background: url('assets/ui/chest/btn.png') center / 100% 100% no-repeat !important; image-rendering: pixelated;
  border: 0 !important; border-image: none !important; border-radius: 0 !important; box-shadow: none !important; width: 72px !important; height: 80px !important;
  padding: 10px 4px 14px !important; justify-content: center !important; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .5)); }
#cards:has(.ch-card) #cards-tools :is(.tool-btn, .autopick-switch)::before { display: none !important; }
#cards:has(.ch-card) #cards-tools :is(.tool-btn, .autopick-switch) > span:not(.sw) b { font-family: 'Nunito', sans-serif !important; font-weight: 900; font-size: 10.5px !important;
  color: #f1e9d2 !important; text-shadow: 0 1px 0 #000, 0 0 3px #000; }
#cards:has(.ch-card) #cards-tools :is(.tool-btn, .autopick-switch):not(:disabled):hover { filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .5)) brightness(1.15); }

/* ---------- рюкзак: всегда внизу, выбранная карта улетает в него ---------- */
#cards:has(.ch-card):not(.pact-mode):not(.passive-mode):not(.gift-mode) .bag-satchel { display: block !important; position: absolute !important; z-index: 2 !important; pointer-events: none;
  left: 50% !important; right: auto !important; translate: -50% 0 !important; bottom: calc(-40px + var(--sa-bottom, 0px)) !important; width: 128px !important; height: 135px !important; }
#cards:has(.ch-card) .bag-satchel img { content: url('assets/ui/chest/bag.png'); filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .8)); }

/* ---------- телефон в альбомной: низкий экран ---------- */
@media (orientation: landscape) and (max-height: 520px) {
  #cards:has(.ch-card) { --px: 1.5px; }
  #cards:has(.ch-card) #cards-title { --th: 42px; font-size: 15px; }
  #cards:has(.ch-card) #cards-sub { display: none; }
  #cards:has(.ch-card) #cards-list { padding: 20px 4px 16px !important; gap: clamp(12px, 2.6vw, 28px) !important; }
  #cards #cards-list .ch-card { flex-basis: 196px; padding: 4px 6px 6px; }
  #cards #cards-list .ch-card .ch-art { aspect-ratio: 2.3; }
  #cards #cards-list .ch-card .ch-name { min-height: 34px; font-size: 13px; padding: 7px 14px 6px; }
  #cards #cards-list .ch-card .ch-rar { margin-top: 5px; font-size: 9.5px; padding: 1px 10px 0; }
  #cards #cards-list .ch-card .ch-stats { margin-top: 6px; gap: 2px 4px; }
  #cards #cards-list .ch-card .ch-stat { padding: 3px 10px 4px; }
  #cards #cards-list .ch-card .ch-stat b { font-size: 14px; }
  #cards #cards-list .ch-card .ch-line { -webkit-line-clamp: 6; margin-top: 5px; font-size: 10.5px; line-height: 1.22; }
  #cards #cards-list .ch-card .ch-sym { display: none; }
  #cards #cards-list .ch-card .ch-badge { font-size: 10.5px; }
}

/* ---------- альбомная (любой размер): карты слева, инструменты узкой колонкой справа, рюкзак под ними в углу ----------
   (ряд из трёх кнопок не влезал в колонку на 1024px, а на 667px rail был display:contents и уезжал под карты) */
@media (orientation: landscape) {
  /* две колонки: карты слева, инструменты узкой колонкой справа (на 667px rail был display:contents и уезжал под карты) */
  #cards:has(.ch-card):not(.passive-mode):not(.gift-mode):not(.pact-mode) .cards-box { display: grid !important; grid-template-columns: minmax(0, 1fr) var(--rail, 88px) !important;
    grid-template-rows: auto minmax(0, 1fr) !important; column-gap: 8px !important; align-items: start !important; }
  #cards:has(.ch-card) .cards-box > #cards-title { grid-column: 1 !important; grid-row: 1 !important; }
  #cards:has(.ch-card) .cards-box > #cards-list { grid-column: 1 !important; grid-row: 2 !important; }
  #cards:has(.ch-card) .cards-box > .cards-rail { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: center !important; gap: 6px !important;
    grid-column: 2 !important; grid-row: 1 / -1 !important; align-self: stretch !important; position: static !important; padding-top: 10px; }
  #cards:has(.ch-card) #cards-tools, #cards:has(.ch-card) #cards-tools .tool-row { flex-direction: column !important; align-items: center !important; gap: 4px !important; }
  #cards:has(.ch-card) #cards-tools :is(.tool-btn, .autopick-switch) { width: var(--tb-w, 72px) !important; height: var(--tb-h, 80px) !important; }
  #cards:not(.boss-ped):has(.ch-card) .cards-box > .cards-rail:not(:has(#cards-tools:not([hidden]))) { display: none !important; }
  /* рюкзак — в правом нижнем углу под колонкой кнопок */
  #cards:has(.ch-card):not(.pact-mode):not(.passive-mode):not(.gift-mode) .bag-satchel { left: auto !important; right: max(6px, var(--sa-right, 0px)) !important; translate: none !important;
    bottom: var(--sat-b, -30px) !important; width: var(--sat-w, 104px) !important; height: calc(var(--sat-w, 104px) * 1.055) !important; }
}
@media (orientation: landscape) and (max-height: 520px) {
  #cards:has(.ch-card) { --rail: 76px; --tb-w: 64px; --tb-h: 70px; --sat-w: 78px; --sat-b: -26px; }
  #cards:has(.ch-card) #cards-tools :is(.tool-btn, .autopick-switch) { padding: 8px 3px 12px !important; }
}

/* ---------- книжная (макет 3): широкие плиты одна под другой, предмет в круглом медальоне слева ---------- */
@media (orientation: portrait) {
  #cards:has(.ch-card) { background-color: rgba(6, 10, 7, .62) !important; }
  #cards:not(.boss-ped):has(.ch-card) { --px: 1.5px; }
  #cards:not(.boss-ped):has(.ch-card) #cards-list { flex-direction: column !important; align-items: stretch !important; gap: 24px !important; padding: 14px 2px 14px !important;
    width: min(560px, 100%); margin: 0 auto; }
  #cards:not(.boss-ped) #cards-list .ch-card { --med: clamp(76px, 22vw, 104px); flex: none; display: grid; grid-template-columns: var(--med) minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 8px 10px 8px 8px; }
  #cards:not(.boss-ped) #cards-list .ch-card .ch-gem { left: calc(8px + var(--med) / 2); }
  #cards:not(.boss-ped) #cards-list .ch-card .ch-art { width: 100%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--rc) 40%, #0b0e0d) 0, #0b0e0d 68%);
    box-shadow: inset 0 0 0 3px #000, 0 0 0 3px #3b413c, 0 0 0 5px color-mix(in srgb, var(--rc) 75%, #000), 0 0 0 7px #000; }
  #cards:not(.boss-ped) #cards-list .ch-card .ch-art::before { inset: 0; }
  #cards:not(.boss-ped) #cards-list .ch-card .ch-art::after { inset: 4px; border-radius: 50%; }
  #cards:not(.boss-ped) #cards-list .ch-card .ch-art img { width: 74%; height: 74%; }
  #cards:not(.boss-ped) #cards-list .ch-card .ch-badge { top: auto; bottom: 6px; left: 8px; font-size: 11px; }
  #cards:not(.boss-ped) #cards-list .ch-card i.ch-info { top: auto; bottom: 6px; right: 6px; }
  #cards:not(.boss-ped) #cards-list .ch-card .ch-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; text-align: left; padding-right: 4px; }
  #cards:not(.boss-ped) #cards-list .ch-card .ch-name { width: auto; margin: 0; min-height: 0; padding: 0; background: none; place-items: center start; text-align: left; font-size: 17px; color: #efe6cf; }
  #cards:not(.boss-ped) #cards-list .ch-card .ch-rar { margin: 0; font-size: 9.5px; padding: 2px 8px 1px; }
  #cards:not(.boss-ped) #cards-list .ch-card .ch-stats { grid-column: 1 / -1; flex-direction: column; align-items: flex-start; gap: 3px; margin-top: 7px; }
  #cards:not(.boss-ped) #cards-list .ch-card .ch-stat { padding: 3px 18px 4px 10px; }
  #cards:not(.boss-ped) #cards-list .ch-card .ch-stat b { font-size: 15px; }
  #cards:not(.boss-ped) #cards-list .ch-card .ch-stat small { font-size: 11.5px; }
  #cards:not(.boss-ped) #cards-list .ch-card .ch-line { grid-column: 1 / -1; -webkit-line-clamp: 4; margin-top: 6px; padding: 0 22px 0 0; text-align: left; font-size: 11.5px; }
  #cards:not(.boss-ped) #cards-list .ch-card .ch-sym { grid-column: 1 / -1; margin-top: 4px; padding-top: 0; }
  #cards:has(.ch-card):not(.pact-mode):not(.passive-mode):not(.gift-mode) .bag-satchel { width: 104px !important; height: 110px !important; bottom: calc(-44px + var(--sa-bottom, 0px)) !important; }
}

/* ---------- награда босса (макет 6): предметы парят над мшистыми пьедесталами, под ними — каменные таблички ---------- */
#cards.boss-ped:has(.ch-card)::before { background: radial-gradient(ellipse 80% 55% at 50% 38%, rgba(20, 34, 30, .25), rgba(3, 7, 6, .88) 80%),
  linear-gradient(rgba(40, 30, 50, .25), transparent 40%, rgba(60, 90, 70, .28) 75%, rgba(8, 14, 10, .7)); }
#cards.boss-ped:has(.ch-card) #cards-list { align-items: stretch !important; padding-top: 10px !important; }
#cards.boss-ped #cards-list .ch-card { border: 0; border-image: none; background: none; box-shadow: none; padding: 0; justify-content: flex-start; flex-basis: 220px; }
#cards.boss-ped #cards-list .ch-card .ch-gem { display: none; }
#cards.boss-ped #cards-list .ch-card::before { content: ''; position: relative; order: 1; display: block; z-index: 1;
  width: 92%; aspect-ratio: 144 / 137; margin-top: -10%; background: url('assets/ui/chest/pedestal.png') center / 100% 100% no-repeat; image-rendering: pixelated;
  filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .7)); }
#cards.boss-ped #cards-list .ch-card::after { bottom: -10px; }
#cards.boss-ped #cards-list .ch-card .ch-art { order: 0; z-index: 2; width: 62%; aspect-ratio: 1; }
#cards.boss-ped #cards-list .ch-card .ch-art::before { inset: -10%; }
#cards.boss-ped #cards-list .ch-card .ch-art img { width: 86%; height: 86%; filter: drop-shadow(0 0 6px var(--rc)) drop-shadow(0 0 16px color-mix(in srgb, var(--rc) 60%, transparent));
  animation: ch-float 2.8s ease-in-out infinite; }
@keyframes ch-float { 50% { translate: 0 -8px; } }
#cards.boss-ped #cards-list .ch-card .ch-body { order: 2; position: relative; z-index: 2; box-sizing: border-box; width: 100%; margin-top: -34%; padding: 9px 26px 10px;
  background: url('assets/ui/cards/stone-tex.png') center / 180px, linear-gradient(#3a3f38, #262a25); background-blend-mode: multiply;
  box-shadow: inset 0 0 0 2px #59614f, inset 0 0 0 4px #1f231e, 0 0 0 3px #0c0e0c, 0 6px 0 rgba(0, 0, 0, .6), inset 0 3px 0 4px color-mix(in srgb, var(--rc) 35%, transparent); }
#cards.boss-ped #cards-list .ch-card i.ch-info { top: 7px; right: 7px; }
#cards.boss-ped #cards-list .ch-card .ch-name { width: 100%; margin: 0; min-height: 0; padding: 0; background: none; font-size: 14px; text-transform: uppercase; letter-spacing: .5px; color: #eae4d2; }
#cards.boss-ped #cards-list .ch-card .ch-rar { margin-top: 3px; padding: 0; background: none; box-shadow: none; font-size: 12px; text-transform: none; letter-spacing: .5px; }
#cards.boss-ped #cards-list .ch-card .ch-stats { margin-top: 6px; }
#cards.boss-ped #cards-list .ch-card .ch-line { -webkit-line-clamp: 4; }
#cards.boss-ped #cards-list .ch-card .ch-badge { top: 0; left: 4px; }
/* светлячки */
#cards.boss-ped:has(.ch-card)::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .8;
  background: radial-gradient(2px 2px at 12% 70%, #e8ff8a, transparent), radial-gradient(2px 2px at 24% 40%, #e8ff8a, transparent), radial-gradient(2px 2px at 80% 62%, #e8ff8a, transparent),
    radial-gradient(2px 2px at 90% 30%, #e8ff8a, transparent), radial-gradient(2px 2px at 64% 82%, #e8ff8a, transparent), radial-gradient(2px 2px at 40% 88%, #e8ff8a, transparent);
  animation: ch-flies 4s ease-in-out infinite alternate; }
@keyframes ch-flies { from { opacity: .3; transform: translateY(4px); } to { opacity: .9; transform: translateY(-6px); } }
/* рюкзак на пьедесталах — в правом нижнем углу */
#cards.boss-ped:has(.ch-card) .bag-satchel { left: auto !important; right: 3% !important; translate: none !important; bottom: 3% !important; }
@media (orientation: landscape) and (max-height: 520px) {
  #cards.boss-ped #cards-list .ch-card { flex-basis: 190px; }
  #cards.boss-ped #cards-list .ch-card .ch-art { width: 48%; }
  #cards.boss-ped #cards-list .ch-card::before { width: 70%; }
  #cards.boss-ped #cards-list .ch-card .ch-body { margin-top: -26%; padding: 6px 24px 7px; }
  #cards.boss-ped #cards-list .ch-card .ch-line { -webkit-line-clamp: 3; }
  #cards.boss-ped:has(.ch-card) .bag-satchel { right: 6px !important; bottom: -16px !important; }
}
@media (orientation: portrait) {
  #cards.boss-ped:has(.ch-card) #cards-list { gap: 8px !important; padding: 6px 0 12px !important; }
  #cards.boss-ped #cards-list .ch-card { flex: 1 1 0; }
  #cards.boss-ped #cards-list .ch-card .ch-body { padding: 8px 6px 9px; }
  #cards.boss-ped #cards-list .ch-card i.ch-info { top: auto; bottom: -26px; right: 50%; translate: 50% 0; }
  #cards.boss-ped #cards-list .ch-card .ch-name { font-size: 12px; }
  #cards.boss-ped #cards-list .ch-card .ch-rar { font-size: 10.5px; }
  #cards.boss-ped #cards-list .ch-card .ch-stat { padding: 3px 8px 4px; }
  #cards.boss-ped #cards-list .ch-card .ch-stat b { font-size: 13px; }
  #cards.boss-ped #cards-list .ch-card .ch-stat small { display: none; }
  #cards.boss-ped #cards-list .ch-card .ch-line { display: none; }
  #cards.boss-ped:has(.ch-card) .bag-satchel { left: 50% !important; right: auto !important; translate: -50% 0 !important; bottom: calc(-44px + var(--sa-bottom, 0px)) !important; }
}

/* v-chest: очень низкие экраны (≤400px): карты компактнее; табличка редкости скрыта — грейд и так виден по камню на рамке */
@media (orientation: landscape) and (max-height: 400px) {
  #cards:has(.ch-card) #cards-title { --th: 36px; font-size: 13px; }
  #cards:has(.ch-card) #cards-list { padding-top: 18px !important; padding-bottom: 14px !important; }
  #cards:not(.boss-ped) #cards-list .ch-card .ch-rar { display: none; }
  #cards #cards-list .ch-card .ch-art { aspect-ratio: 2.8; }
  #cards.boss-ped #cards-list .ch-card .ch-art { width: 40%; aspect-ratio: 1; }
  #cards.boss-ped #cards-list .ch-card::before { width: 58%; }
  #cards.boss-ped #cards-list .ch-card .ch-body { margin-top: -20%; }
}
@media (orientation: landscape) and (max-height: 520px) { #cards.boss-ped #cards-list .ch-card .ch-line { -webkit-line-clamp: 8; } }
/* v-chest, книжная: кнопки инструментов стоят рядом внизу по центру — рюкзак уходит в правый нижний угол (на награде босса кнопок нет, там он по центру) */
@media (orientation: portrait) {
  #cards:not(.boss-ped):has(#cards-tools:not([hidden])):has(.ch-card) .bag-satchel { left: auto !important; right: max(2px, var(--sa-right, 0px)) !important; translate: none !important;
    width: 66px !important; height: 70px !important; bottom: calc(-18px + var(--sa-bottom, 0px)) !important; }
}

/* v-chest: если справа нет ни одной кнопки (награда босса), колонка инструментов не занимает место — карты шире */
@media (orientation: landscape) {
  #cards:has(.ch-card):not(.passive-mode):not(.gift-mode):not(.pact-mode) .cards-box:not(:has(#cards-tools:not([hidden]))):not(:has(#cards-close:not(.hidden))) { grid-template-columns: minmax(0, 1fr) !important; }
  #cards:has(.ch-card) .cards-box:not(:has(#cards-tools:not([hidden]))):not(:has(#cards-close:not(.hidden))) > .cards-rail { display: none !important; }
}

/* v-chest: награда босса на телефоне в альбомной — правый нижний угол свободен под рюкзак */
@media (orientation: landscape) and (max-height: 520px) {
  #cards.boss-ped #cards-list .ch-card { flex-basis: 160px; }
  #cards.boss-ped:has(.ch-card):not(.pact-mode):not(.passive-mode):not(.gift-mode) .bag-satchel { width: 60px !important; height: 63px !important; right: 3px !important; bottom: -14px !important; }
}

/* v-chest, экраны ≤400px: числа без подписей в одну строку, описание короче (полный текст — по «i») */
@media (orientation: landscape) and (max-height: 400px) {
  #cards #cards-list .ch-card .ch-stats { flex-wrap: nowrap; }
  #cards #cards-list .ch-card .ch-stat { padding: 3px 8px 4px; }
  #cards #cards-list .ch-card .ch-stat small { display: none; }
  #cards #cards-list .ch-card .ch-line { -webkit-line-clamp: 5; }
  #cards.boss-ped #cards-list .ch-card .ch-line { -webkit-line-clamp: 6; }
}

/* v179: иконка эффекта на плашке с числом (яд, лечение, крит…) */
.fx-ic { display: inline-grid; place-items: center; width: 15px; height: 15px; align-self: center; color: var(--ic); filter: drop-shadow(0 1px 0 #000); font-style: normal; }
.fx-ic svg { width: 100%; height: 100%; }
#cards #cards-list .ch-card .ch-stat .fx-ic { width: 16px; height: 16px; margin-right: 1px; }
/* v179: «Комбо» в окне предмета — строка «пассивка + предмет → эволюция» с подписями и понятная фраза */
.combo-full { margin-top: 8px; padding: 10px 10px 9px; border-radius: 12px; background: rgba(138, 92, 255, .16); box-shadow: inset 0 0 0 1px rgba(180, 140, 255, .35); text-align: center; }
.combo-full.ready { background: rgba(255, 210, 94, .16); box-shadow: inset 0 0 0 2px #ffd25e, 0 0 12px #ffd25e55; }
.combo-full.done { opacity: .6; }
.combo-full .cf-h { font-size: 11px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: #cdb6ff; margin-bottom: 6px; }
.combo-full .cf-row { display: flex; align-items: flex-start; justify-content: center; gap: 6px; }
.combo-full .cf-row > b { align-self: center; margin-top: -14px; font-size: 18px; color: #e2d4ff; }
.combo-full .cf-slot { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 64px; }
.combo-full .cf-slot img, .combo-full .cf-slot i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); object-fit: contain; padding: 4px; box-sizing: border-box; image-rendering: pixelated; opacity: .55; font-style: normal; font-size: 20px; color: #e2d4ff; }
.combo-full .cf-slot.on img, .combo-full .cf-slot.evo i { opacity: 1; box-shadow: inset 0 0 0 1px #b48cff, 0 0 8px #8a5cff66; }
.combo-full .cf-slot.evo i { background: radial-gradient(circle, #6a3dd8, #241245); }
.combo-full .cf-slot small { font-size: 10.5px; line-height: 1.15; color: #d8cdf2; font-weight: 700; }
.combo-full .cf-text { margin: 8px 0 3px; font-size: 12.5px; line-height: 1.35; color: #f1ecdf; }
.combo-full .cf-text b { color: #d9c6ff; }
.combo-full .cf-eff { margin: 0; font-size: 11.5px; line-height: 1.3; color: #b9b1cf; }
.combo-full .cf-ready { margin: 5px 0 0; font-size: 12px; font-weight: 800; color: #ffe08a; }
/* v179: цифры на плашках карты — Nunito: в пиксельном шрифте «2» с тенью читалась как «8» (240% → «840%») */
#cards #cards-list .ch-card .ch-stat b { font-family: 'Nunito', sans-serif !important; font-weight: 900; }

/* v-chest: вывеска тянется под длину названия («Награда босса», «Крупный сундук» переносились на 2 строки и сползали на потёки):
   концы доски с цепями — 9-slice, растягивается только середина */
#cards:has(.ch-card) #cards-title { aspect-ratio: auto; width: max-content; min-width: calc(var(--th) * 200 / 88); max-width: 96%; white-space: nowrap;
  padding: calc(var(--th) * .2) calc(var(--th) * .62) 0; background: none;
  border-style: solid; border-color: transparent; border-width: 0;
  border-image: url('assets/ui/chest/sign.png') 0 52 fill / 0 calc(var(--th) * 52 / 88) stretch; }

@media (orientation: portrait) {
  #cards:has(.ch-card) #cards-title { font-size: min(26px, 6vw); padding-left: calc(var(--th) * .5); padding-right: calc(var(--th) * .5); }
}

/* ===== v-path: экран «Выбери путь» (макеты: подача из 1 — вывеска и плашки имён, настроение и полоски статов из 3, пиксель-арт из 2) =====
   портреты assets/evolution/path-*.png, статы и цвета — CONFIG.pathCards; карточки строит pathCard() в game.js.
   альбомная — 4 карточки во всю высоту вплотную; книжная — сетка 2×2; вывеска сверху поверх карточек */
#evolution.path-pick { padding: 0 !important; overflow: hidden !important; background: #050806 !important; }
#evolution.path-pick .evolution-panel { position: relative; box-sizing: border-box; max-width: none !important; width: 100%; height: 100%; margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-image: none !important; background: none !important; box-shadow: none !important; }
#evolution.path-pick :is(#evolution-description, #evolution-tree, #evolution-respec, #evolution-close) { display: none !important; }
/* вывеска «Выбери путь» — та же доска с цепями, что в сундуке (9-slice тянется под текст) */
#evolution.path-pick #evolution-title { --th: clamp(46px, 11vh, 84px); position: absolute; z-index: 3; top: max(2px, var(--sa-top, 0px)); left: 50%; translate: -50% 0; margin: 0;
  box-sizing: border-box; display: grid; place-items: center; height: var(--th); width: max-content; max-width: 96%; padding: calc(var(--th) * .2) calc(var(--th) * .62) 0;
  border: 0 solid transparent; border-image: url('assets/ui/chest/sign.png') 0 52 fill / 0 calc(var(--th) * 52 / 88) stretch; image-rendering: pixelated; background: none !important;
  font-family: 'Rubik', 'Nunito', sans-serif !important; font-weight: 900 !important; font-size: calc(var(--th) * .32) !important; line-height: 1 !important; letter-spacing: 1.5px;
  text-transform: uppercase; white-space: nowrap; color: #ffd965 !important; -webkit-text-stroke: 1px #2a1606; paint-order: stroke fill; text-shadow: 0 3px 0 #2a1606 !important;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .7)); pointer-events: none; }
#evolution.path-pick #evolution-title::before, #evolution.path-pick #evolution-title::after { display: none !important; }
#evolution.path-pick #evolution-kicker { position: absolute; z-index: 3; left: 50%; translate: -50% 0; top: calc(max(2px, var(--sa-top, 0px)) + clamp(46px, 11vh, 84px) + 4px); margin: 0;
  padding: 2px 12px; font: 800 11px/1.3 'Nunito', sans-serif; letter-spacing: 2px; color: #e9e2c8; background: rgba(0, 0, 0, .6); box-shadow: 0 0 0 2px #000; white-space: nowrap; pointer-events: none; }
#evolution.path-pick #evolution-options { position: absolute; inset: 0; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-auto-rows: 1fr;
  gap: 0 !important; margin: 0 !important; padding: 0 !important; max-width: none !important; }

/* карточка: портрет во весь рост, снизу затемнение, плашка имени, роль, полоски статов, умение */
#evolution .path-card { all: unset; box-sizing: border-box; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  min-width: 0; min-height: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none;
  box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px color-mix(in srgb, var(--pc) 35%, transparent); transition: box-shadow .2s; }
#evolution .path-card .pc-art { position: absolute; inset: 0; z-index: -2; background-position: center 28%; background-size: cover; background-repeat: no-repeat; image-rendering: pixelated;
  filter: saturate(.9) brightness(.82); transition: transform .3s, filter .3s; }
#evolution .path-card::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, .35), transparent 22%, transparent 42%, rgba(0, 0, 0, .6) 62%, rgba(0, 0, 0, .94)); }
#evolution .path-card:hover .pc-art, #evolution .path-card:focus-visible .pc-art { transform: scale(1.04); filter: saturate(1.05) brightness(1); }
#evolution .path-card:hover, #evolution .path-card:focus-visible { box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px var(--pc), inset 0 0 40px color-mix(in srgb, var(--pc) 35%, transparent); }
#evolution .path-card.holding .pc-art { transform: scale(1.07); filter: saturate(1.15) brightness(1.15); }
#evolution .path-card.holding { box-shadow: inset 0 0 0 2px #000, inset 0 0 0 5px var(--pc), inset 0 0 60px color-mix(in srgb, var(--pc) 55%, transparent); }
/* полоса удержания по низу карточки */
#evolution .path-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; z-index: 2; background: var(--pc); transform-origin: left; scale: 0 1; opacity: 0; }
#evolution .path-card.holding::after { opacity: 1; animation: ch-hold var(--hold, 350ms) linear forwards; }
@keyframes ch-hold { to { scale: 1 1; } }
#evolution.path-pick.arming .path-card { opacity: .75; }

#evolution .path-card .pc-body { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 0 12px calc(16px + var(--sa-bottom, 0px)); text-align: center; }
#evolution .path-card .pc-name { box-sizing: border-box; min-width: 82%; max-width: 100%; padding: 7px 12px 6px; background: rgba(6, 10, 8, .84);
  box-shadow: 0 0 0 2px var(--pc), 0 0 0 4px #000, 0 0 18px color-mix(in srgb, var(--pc) 40%, transparent);
  font-family: 'Rubik', 'Nunito', sans-serif !important; font-weight: 900; font-size: clamp(14px, 2vw, 24px); line-height: 1.05; text-transform: uppercase; color: var(--pc);
  -webkit-text-stroke: 1px #000; paint-order: stroke fill; text-shadow: 0 2px 0 #000; text-wrap: balance; }
#evolution .path-card .pc-role { padding: 2px 12px 1px; font: 800 11px/1.3 'Nunito', sans-serif; font-style: normal; letter-spacing: 2.5px; text-transform: uppercase; color: #fff;
  background: color-mix(in srgb, var(--pc) 38%, #000); box-shadow: 0 0 0 2px #000; }
#evolution .path-card .pc-stats { display: grid; gap: 5px; width: min(100%, 250px); margin-top: 2px; }
#evolution .path-card .pc-stat { display: grid; grid-template-columns: 16px 66px minmax(0, 1fr); align-items: center; gap: 6px; }
#evolution .path-card .pc-stat i { display: grid; place-items: center; color: var(--pc); filter: drop-shadow(0 1px 0 #000); }
#evolution .path-card .pc-stat i svg { width: 15px; height: 15px; }
#evolution .path-card .pc-stat small { font: 800 10.5px/1 'Nunito', sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #e1e7d8; text-align: left; text-shadow: 0 1px 0 #000; }
/* полоска из 5 пиксельных делений */
#evolution .path-card .pc-bar { height: 9px; background: linear-gradient(90deg, var(--pc) calc(var(--v) * 20%), rgba(255, 255, 255, .13) 0);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(20% - 3px), transparent calc(20% - 3px) 20%); mask: repeating-linear-gradient(90deg, #000 0 calc(20% - 3px), transparent calc(20% - 3px) 20%);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--pc) 50%, transparent)); }
#evolution .path-card .pc-skill { display: flex; flex-direction: column; gap: 2px; max-width: 260px; }
#evolution .path-card .pc-skill b { font: 900 12.5px/1.2 'Nunito', sans-serif; color: #ffd965; text-shadow: 0 1px 0 #000; }
#evolution .path-card .pc-skill small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: 600 11px/1.3 'Nunito', sans-serif; color: #cdd5c4; }

/* телефон в альбомной: низкий экран — всё плотнее, без строки описания умения */
@media (orientation: landscape) and (max-height: 520px) {
  #evolution.path-pick #evolution-title { --th: 40px; }
  #evolution.path-pick #evolution-kicker { display: none; }
  #evolution .path-card .pc-body { gap: 5px; padding: 0 8px calc(10px + var(--sa-bottom, 0px)); }
  #evolution .path-card .pc-name { font-size: 14px; padding: 5px 8px 4px; }
  #evolution .path-card .pc-role { font-size: 9.5px; letter-spacing: 2px; }
  #evolution .path-card .pc-stats { gap: 3px; }
  #evolution .path-card .pc-stat { grid-template-columns: 13px 54px minmax(0, 1fr); gap: 4px; }
  #evolution .path-card .pc-stat i svg { width: 12px; height: 12px; }
  #evolution .path-card .pc-stat small { font-size: 9px; }
  #evolution .path-card .pc-bar { height: 7px; }
  #evolution .path-card .pc-skill small { display: none; }
  #evolution .path-card .pc-skill b { font-size: 11px; }
}
/* книжная: сетка 2×2, вывеска над верхним рядом */
@media (orientation: portrait) {
  #evolution.path-pick #evolution-title { --th: clamp(44px, 7.5vh, 70px); font-size: min(calc(var(--th) * .32), 6vw) !important; }
  #evolution.path-pick #evolution-kicker { top: calc(max(2px, var(--sa-top, 0px)) + clamp(44px, 7.5vh, 70px) + 4px); }
  #evolution.path-pick #evolution-options { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  #evolution .path-card .pc-art { background-position: center 34%; }
  #evolution .path-card .pc-body { gap: 5px; padding: 0 8px 12px; }
  #evolution .path-card:nth-child(n + 3) .pc-body { padding-bottom: calc(12px + var(--sa-bottom, 0px)); }
  #evolution .path-card .pc-name { font-size: clamp(13px, 4vw, 18px); padding: 5px 8px 4px; min-width: 90%; }
  #evolution .path-card .pc-role { font-size: 9.5px; letter-spacing: 2px; }
  #evolution .path-card .pc-stats { gap: 3px; }
  #evolution .path-card .pc-stat { grid-template-columns: 13px 56px minmax(0, 1fr); gap: 4px; }
  #evolution .path-card .pc-stat i svg { width: 12px; height: 12px; }
  #evolution .path-card .pc-stat small { font-size: 9px; letter-spacing: .5px; }
  #evolution .path-card .pc-bar { height: 7px; }
  #evolution .path-card .pc-skill small { display: none; }
  #evolution .path-card .pc-skill b { font-size: 11.5px; }
}

/* v-path: плашки имён одной высоты (имена переносятся по-разному — плашки стояли вразнобой) */
#evolution .path-card .pc-name { display: grid; place-items: center; min-height: calc(2.1em + 13px); }
#evolution .path-card .pc-skill { min-height: calc(12.5px * 1.2 + 2px + 11px * 1.3 * 2); justify-content: flex-start; }
@media (orientation: landscape) and (max-height: 520px) { #evolution .path-card .pc-name { min-height: 0; } #evolution .path-card .pc-skill { min-height: 0; } }
@media (orientation: portrait) { #evolution .path-card .pc-skill { min-height: 0; } }

/* v-path: узкий телефон в альбомной — имена переносятся не у всех, плашки той же высоты в две строки */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 760px) { #evolution .path-card .pc-name { min-height: calc(2.1em + 9px); } }

/* ===== v-cards: сундук и карты умений ближе к референсам, в пикселе =====
   общие детали — assets/ui/cards/: slab.png (толстая каменная рамка со мхом, 9-slice), tex.png (серая фактура, красится цветом
   поверх через hard-light), ring.png (серое кольцо-медальон, красится так же). Плита — цвета редкости (сундук) / типа (умения) */

/* --- сундук: плита цвета редкости --- */
.ch-card { --panel: #7a828b; }
.ch-card.uncommon { --panel: #3c982e; } .ch-card.rare { --panel: #2c6bc6; } .ch-card.epic { --panel: #7a3cc6; }
.ch-card.legendary { --panel: #c28816; } .ch-card.lunar { --panel: #b2283e; }
#cards #cards-list .ch-card {
  border-width: calc(var(--px) * 12) calc(var(--px) * 12) calc(var(--px) * 8) calc(var(--px) * 12);
  border-image: url('assets/ui/cards/slab.png') 24 24 16 24 / calc(var(--px) * 24) calc(var(--px) * 24) calc(var(--px) * 16) calc(var(--px) * 24) / 0 0 calc(var(--px) * 8) 0 round;
  background-image: url('assets/ui/cards/tex.png'),
    radial-gradient(120% 90% at 30% 12%, color-mix(in srgb, var(--panel) 78%, #fff 22%), var(--panel) 55%, color-mix(in srgb, var(--panel) 62%, #000));
  background-size: calc(var(--px) * 128) auto, 100% 100%; background-repeat: repeat, no-repeat; background-blend-mode: hard-light, normal;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .3), inset 0 -18px 26px rgba(0, 0, 0, .28); }
#cards #cards-list .ch-card::after { bottom: calc(var(--px) * -16 - 6px); }
/* предмет в медальоне: тёмный диск + кольцо цвета редкости */
#cards #cards-list .ch-card .ch-art .ch-img { display: contents; }
#cards #cards-list .ch-card .ch-art { background: radial-gradient(circle closest-side, color-mix(in srgb, var(--rc) 42%, #0b0d0c) 0, #0b0d0c 64%, transparent 66%); }
#cards #cards-list .ch-card .ch-art img { width: auto; max-width: 64%; height: 60%; }
#cards #cards-list .ch-card .ch-ring { position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -50%; height: 98%; aspect-ratio: 96 / 97; pointer-events: none; isolation: isolate;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .5)); }
:is(.ch-ring, .sk-ring)::before { content: ''; position: absolute; inset: 0; background: var(--ring);
  -webkit-mask: url('assets/ui/cards/ring.png') center / 100% 100% no-repeat; mask: url('assets/ui/cards/ring.png') center / 100% 100% no-repeat; }
:is(.ch-ring, .sk-ring)::after { content: ''; position: absolute; inset: 0; background: url('assets/ui/cards/ring.png') center / 100% 100% no-repeat; image-rendering: pixelated; mix-blend-mode: hard-light; }
.ch-ring { --ring: color-mix(in srgb, var(--rc) 80%, #fff 8%); }
/* имя — крупно белым с обводкой, без таблички; редкость — тёмная плашка */
#cards #cards-list .ch-card .ch-body .ch-name { width: auto; margin: 6px 0 0; min-height: 0; padding: 0 4px; background: none;
  font-family: 'Rubik', 'Nunito', sans-serif !important; font-weight: 900; font-size: 17px; line-height: 1.05; color: #fff;
  -webkit-text-stroke: 1.2px #1a0f06; paint-order: stroke fill; text-shadow: 0 3px 0 #1a0f06; }
#cards #cards-list .ch-card .ch-rar { color: color-mix(in srgb, var(--rc) 55%, #fff); background: rgba(10, 8, 6, .62); }
/* числа: тёмный мазок, слева значок, справа крупное число и подпись под ним */
#cards #cards-list .ch-card .ch-stat { display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 6px; align-items: center; justify-items: start; padding: 5px 14px 6px 11px; }
#cards #cards-list .ch-card .ch-stat .fx-ic { grid-row: 1 / span 2; width: 20px; height: 20px; }
#cards #cards-list .ch-card .ch-stat b { font-size: 18px; }
#cards #cards-list .ch-card .ch-stat small { font: 800 9.5px/1.1 'Nunito', sans-serif; letter-spacing: .6px; text-transform: uppercase; color: #ece2c6; }
#cards #cards-list .ch-card .ch-stat::before { background: rgba(14, 10, 7, .86); }
#cards #cards-list .ch-card .ch-line { color: #f4f1e8; text-shadow: 0 1px 0 rgba(0, 0, 0, .8), 0 0 6px rgba(0, 0, 0, .45); }
#cards #cards-list .ch-card .ch-line b { color: #fff6a8; }
/* вывеска — жёлтым, как в референсе */
#cards:has(.ch-card) #cards-title { color: #ffd965 !important; -webkit-text-stroke: 1px #2a1606; text-shadow: 0 3px 0 #2a1606 !important; }
/* книжная: медальон — то же кольцо, без старых обводок */
@media (orientation: portrait) {
  #cards:not(.boss-ped) #cards-list .ch-card .ch-art { box-shadow: none; border-radius: 0; background: radial-gradient(circle closest-side, color-mix(in srgb, var(--rc) 42%, #0b0d0c) 0, #0b0d0c 64%, transparent 66%); }
  #cards:not(.boss-ped) #cards-list .ch-card .ch-art img { width: 62%; height: 62%; max-width: none; }
  #cards:not(.boss-ped) #cards-list .ch-card .ch-art::after { inset: 14%; }
  #cards:not(.boss-ped) #cards-list .ch-card .ch-body .ch-name { margin: 0; padding: 0; font-size: 18px; }
  #cards:not(.boss-ped) #cards-list .ch-card .ch-stats { flex-direction: row; flex-wrap: wrap; gap: 4px 6px; }
}
/* телефон в альбомной */
@media (orientation: landscape) and (max-height: 520px) {
  #cards #cards-list .ch-card .ch-body .ch-name { font-size: 14px; margin-top: 3px; }
  #cards #cards-list .ch-card .ch-stat { padding: 3px 10px 4px 8px; column-gap: 4px; }
  #cards #cards-list .ch-card .ch-stat .fx-ic { width: 15px; height: 15px; }
  #cards #cards-list .ch-card .ch-stat b { font-size: 14px; }
  #cards #cards-list .ch-card .ch-stat small { font-size: 8px; }
}
/* пьедесталы после босса — без медальона */
#cards.boss-ped #cards-list .ch-card .ch-ring { display: none; }
#cards.boss-ped #cards-list .ch-card .ch-art { background: none; }
#cards.boss-ped #cards-list .ch-card .ch-art img { width: 86%; height: 86%; max-width: none; }
#cards.boss-ped #cards-list .ch-card { border-image: none; background: none; box-shadow: none; }
#cards.boss-ped #cards-list .ch-card .ch-body .ch-name { font-size: 14px; text-transform: uppercase; }

/* --- карты умений: та же пиксельная рамка-плита, фактура и кольцо --- */
#cards.passive-mode #cards-list .card.sk-card { --px: 2px;
  border-style: solid !important; border-color: transparent !important;
  border-width: calc(var(--px) * 12) calc(var(--px) * 12) calc(var(--px) * 8) calc(var(--px) * 12) !important;
  border-image: url('assets/ui/cards/slab.png') 24 24 16 24 / calc(var(--px) * 24) calc(var(--px) * 24) calc(var(--px) * 16) calc(var(--px) * 24) / 0 0 calc(var(--px) * 8) 0 round !important;
  image-rendering: pixelated; background-clip: padding-box !important;
  background: url('assets/ui/cards/tex.png') 0 0 / calc(var(--px) * 128) auto repeat,
    radial-gradient(130% 100% at 25% 15%, color-mix(in srgb, var(--panel) 80%, #fff 20%), var(--panel) 55%, color-mix(in srgb, var(--panel) 68%, #000) 100%) !important;
  background-blend-mode: hard-light, normal !important;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .3), inset 0 -14px 22px rgba(0, 0, 0, .3) !important; }
#cards.passive-mode #cards-list .card.sk-card::before { display: none !important; }
#cards.passive-mode #cards-list .card.sk-card .card-art { position: relative; overflow: visible !important; border-radius: 50% !important; box-shadow: none !important;
  background: radial-gradient(circle closest-side, color-mix(in srgb, var(--tc) 45%, #0c0907) 0, #0c0907 64%, transparent 66%) !important; }
#cards.passive-mode #cards-list .card.sk-card .card-art > img { position: relative; z-index: 1; width: 64% !important; height: 64% !important; }
#cards.passive-mode #cards-list .card.sk-card .card-art .sk-up-badge { z-index: 4; }
#cards.passive-mode #cards-list .card.sk-card .sk-ring { --ring: color-mix(in srgb, var(--tc) 78%, #fff 10%); position: absolute; z-index: 3; inset: -4%; pointer-events: none; isolation: isolate;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .5)); }
#cards.passive-mode #cards-list .card.sk-card .sk-chips i { background: none !important; position: relative; isolation: isolate; }
#cards.passive-mode #cards-list .card.sk-card .sk-chips i::before { content: ''; position: absolute; inset: -1px -3px; z-index: -1; background: rgba(14, 10, 7, .86);
  -webkit-mask: url('assets/ui/cards/brush.png') center / 100% 100% no-repeat; mask: url('assets/ui/cards/brush.png') center / 100% 100% no-repeat; }
@media (orientation: portrait) {
  #cards.passive-mode #cards-list .card.sk-card { --px: 1.5px; padding: 6px 10px 6px 8px !important; }
  #cards.passive-mode #cards-list .card.sk-card :is(.card-rarity, .sk-up-tag) { top: 4px; right: 4px; }
}
@media (orientation: landscape) {
  #cards.passive-mode #cards-list .card.sk-card { padding-top: 10px !important;
    background: url('assets/ui/cards/tex.png') 0 0 / calc(var(--px) * 128) auto repeat, repeating-conic-gradient(from 0deg at 50% 26%, rgba(255, 255, 255, .14) 0 7deg, transparent 7deg 20deg),
      radial-gradient(120% 80% at 50% 25%, color-mix(in srgb, var(--panel) 75%, #fff 25%), var(--panel) 55%, color-mix(in srgb, var(--panel) 68%, #000) 100%) !important;
    background-blend-mode: hard-light, normal, normal !important; }
}
@media (orientation: landscape) and (max-height: 520px) { #cards.passive-mode #cards-list .card.sk-card { --px: 1.5px; padding-top: 6px !important; } }

/* v-cards, книжная: плиты стали выше (подписи под числами) — зазор меньше, кнопки ниже ростом, чтобы ряд кнопок не уходил за край */
@media (orientation: portrait) {
  #cards:not(.boss-ped):has(.ch-card) #cards-list { gap: 16px !important; }
  #cards:has(.ch-card) #cards-tools :is(.tool-btn, .autopick-switch) { height: 68px !important; padding: 8px 4px 11px !important; }
}

@media (orientation: portrait) { #cards:not(.boss-ped) #cards-list .ch-card .ch-line { -webkit-line-clamp: 3; } #cards:not(.boss-ped) #cards-list .ch-card .ch-stats { margin-top: 5px; } }

@media (orientation: portrait) { #cards:has(.ch-card) #cards-title { --th: clamp(48px, 8vh, 70px); } }

/* v-cards: на выборе умения — те же каменные кнопки, что в сундуке */
#cards:has(.sk-card) #cards-tools :is(.tool-btn, .autopick-switch) { background: url('assets/ui/chest/btn.png') center / 100% 100% no-repeat !important; image-rendering: pixelated;
  border: 0 !important; border-image: none !important; border-radius: 0 !important; box-shadow: none !important; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .5)); }
#cards:has(.sk-card) #cards-tools :is(.tool-btn, .autopick-switch)::before { display: none !important; }
#cards:has(.sk-card) #cards-tools :is(.tool-btn, .autopick-switch) > span:not(.sw) b { color: #f1e9d2 !important; text-shadow: 0 1px 0 #000, 0 0 3px #000; }

/* v-cards: телефон в альбомной — толстая рамка добавила высоты, карты умений уходили за низ: иконка меньше, рамка тоньше, описание короче */
@media (orientation: landscape) and (max-height: 520px) {
  #cards.passive-mode #cards-list .card.sk-card { --px: 1.25px; padding-top: 2px !important; padding-bottom: 4px !important; }
  #cards.passive-mode #cards-list .card.sk-card .card-art { width: clamp(60px, 18vh, 96px) !important; height: clamp(60px, 18vh, 96px) !important; }
  #cards.passive-mode #cards-list .card.sk-card .card-desc { -webkit-line-clamp: 3 !important; }
}

@media (orientation: landscape) and (max-height: 520px) {
  #cards.passive-mode #cards-list .card.sk-card .sk-chips { gap: 3px 2px !important; justify-content: center; }
  #cards.passive-mode #cards-list .card.sk-card .sk-chips i { padding: 3px 8px !important; font-size: 11.5px !important; }
}

/* v-cards: очень низкий экран (≤400px) — карты умений ещё плотнее: описание в 2 строки, иконка и имя мельче */
@media (orientation: landscape) and (max-height: 400px) {
  #cards.passive-mode #cards-list .card.sk-card .card-desc { -webkit-line-clamp: 2 !important; font-size: 11px !important; }
  #cards.passive-mode #cards-list .card.sk-card .card-art { width: 54px !important; height: 54px !important; }
  #cards.passive-mode #cards-list .card.sk-card .card-name { font-size: 13px !important; padding-top: 3px !important; padding-bottom: 4px !important; }
}

/* ===== v-hud: интерфейс боя детальнее, в пикселе (референс пользователя: бой с кирпичным големом) =====
   детали — assets/ui/hud/: portrait-ring (кольцо из камня и лозы с потёками), panel (деревянная плашка со мхом, 9-slice),
   boss-bar (железная рамка полосы босса с шипами, 9-slice), btn (каменная кнопка со мхом), action (слизистая плашка подсказки) */
/* портрет героя: кольцо поверх, старые svg-кольца и рамка скрыты */
#arena .portrait svg, #arena .pf-frame { display: none !important; }
#arena .portrait::after { content: ''; position: absolute; z-index: 1; left: 50%; top: 50%; width: 84px; height: 99px; translate: -50% -41.6%; pointer-events: none;
  background: url('assets/ui/hud/portrait-ring.png') 0 0 / 100% 100% no-repeat; image-rendering: pixelated; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .6)); }
#arena .portrait #portrait-img { border-radius: 50%; }
/* уровень — круглый золотой жетон слева снизу */
#arena .portrait-lvl { z-index: 3 !important; left: -2px !important; bottom: -6px !important; translate: none !important; display: grid !important; place-items: center;
  min-width: 0 !important; width: 26px; height: 26px; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
  font-family: 'Rubik', 'Nunito', sans-serif !important; font-weight: 900 !important; font-size: 14px !important; line-height: 1 !important; color: #2a1606 !important; text-shadow: 0 1px 0 #ffe9a0 !important;
  background: radial-gradient(circle at 38% 32%, #fff3b0, #f4b832 55%, #a86c0c) !important; box-shadow: 0 0 0 2px #2a1606, 0 0 0 4px #7a5214, 0 3px 0 4px rgba(0, 0, 0, .5) !important; }
/* полосы здоровья и опыта — в деревянной плашке со мхом */
#arena .hero-card-text { box-sizing: border-box; gap: 4px !important; margin-left: 10px !important; padding: 3px 8px 3px 10px !important;
  border-style: solid !important; border-color: transparent !important; border-width: 8px 12px 5px 12px !important;
  border-image: url('assets/ui/hud/panel.png') 9 26 16 26 / 9px 26px 16px 26px / 0 0 11px 0 stretch !important; image-rendering: pixelated;
  background: rgba(10, 14, 10, .78) padding-box !important; }
#arena .hp-line { position: relative; background: #1d0f0c !important; box-shadow: inset 0 0 0 2px #000, inset 0 3px 0 2px rgba(0, 0, 0, .35) !important; }
#arena .hp-line #hp-line-fill { background: linear-gradient(#b4f77a, #52c52e 52%, #2e8a1a) !important; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .25) !important; }
#arena .hp-line::before { content: ''; position: absolute; z-index: 2; left: 5px; top: 50%; translate: 0 -50%; width: 12px; height: 12px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff4d5e' stroke='%23000' stroke-width='2' d='M12 21s-8-5.1-8-11.2C4 6.6 6.4 4.5 9 4.5c1.4 0 2.4.6 3 1.6.6-1 1.6-1.6 3-1.6 2.6 0 5 2.1 5 5.3C20 15.9 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat; }
#arena .hp-line b#portrait-hp, #arena .lvl-box #xp-text { font-family: 'Rubik', 'Nunito', sans-serif !important; font-weight: 900 !important; color: #fff !important;
  -webkit-text-stroke: 1px #0c0806; paint-order: stroke fill; text-shadow: 0 1px 0 #000 !important; }
#arena .lvl-box .bar.xp { position: relative; background: #1d150a !important; box-shadow: inset 0 0 0 2px #000 !important; border: 0 !important; }
#arena .lvl-box .bar.xp #xp-fill { background: linear-gradient(#ffe48a, #f2b42c 55%, #b57a10) !important; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35) !important; }
/* кнопки справа сверху — каменные плиты со мхом */
#arena .hud-right .gear-btn { box-sizing: border-box; width: 42px !important; height: 42px !important; border: 0 !important; border-image: none !important; border-radius: 0 !important;
  background: url('assets/ui/hud/btn.png') center / 100% 100% no-repeat !important; image-rendering: pixelated; box-shadow: none !important; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .55));
  font-family: 'Rubik', 'Nunito', sans-serif !important; font-weight: 900 !important; font-size: 16px !important; color: #c9ff7a !important; text-shadow: 0 2px 0 #000 !important; }
#arena .hud-right .gear-btn::before, #arena .hud-right .gear-btn::after { display: none !important; }

/* босс: имя — в такой же деревянной плашке, полоса здоровья — в железной рамке с шипами */
#arena .boss-bar .boss-head { border-style: solid !important; border-color: transparent !important; border-width: 8px 14px 5px 14px !important;
  border-image: url('assets/ui/hud/panel.png') 9 26 16 26 / 9px 26px 16px 26px / 0 0 11px 0 stretch !important; image-rendering: pixelated;
  background: rgba(10, 14, 10, .82) padding-box !important; padding: 1px 10px 2px !important; box-shadow: none !important; margin-bottom: 4px !important; }
#arena .boss-bar .boss-head b { font-family: 'Rubik', 'Nunito', sans-serif !important; font-weight: 900 !important; font-size: 15px !important; color: #fff !important;
  -webkit-text-stroke: 1px #0c0806; paint-order: stroke fill; text-shadow: 0 2px 0 #000 !important; }
#arena .boss-bar-track { box-sizing: content-box; height: 14px !important; padding: 0 !important; border-radius: 0 !important;
  border-style: solid !important; border-color: transparent !important; border-width: 6px 11px 5px 11px !important;
  border-image: url('assets/ui/hud/boss-bar.png') 13 28 13 28 / 13px 28px 13px 28px / 7px 17px 8px 17px stretch !important; image-rendering: pixelated;
  background: #1c0a0a padding-box !important; box-shadow: none !important; }
#arena .boss-bar-track i { inset: 0 auto 0 0 !important; max-width: 100% !important; border-radius: 0 !important;
  background: linear-gradient(#ff7a64, #dc2a1e 55%, #8a1010) !important; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), inset 0 -2px 0 rgba(0, 0, 0, .3) !important; }
#arena .boss-bar-track span { line-height: 14px !important; font-family: 'Rubik', 'Nunito', sans-serif !important; font-weight: 900 !important; font-size: 11px !important; color: #fff !important;
  -webkit-text-stroke: 1px #0c0806; paint-order: stroke fill; }
#arena .boss-bar.rage .boss-bar-track { filter: drop-shadow(0 0 6px #ff2a2a); }
#arena .boss-bar.shielded .boss-bar-track { filter: drop-shadow(0 0 6px #7fd8ff); }

/* подсказка «Тапай!» — слизистая плашка в левом нижнем углу, под героем, а не на нём */
#arena .boss-tap-hint { left: max(10px, var(--sa-left, 0px)) !important; right: auto !important; bottom: max(8px, var(--sa-bottom, 0px)) !important; top: auto !important; translate: none !important;
  max-width: none !important; padding: 9px 24px 17px 16px !important; gap: 8px !important; border: 0 !important; border-image: none !important; border-radius: 0 !important; box-shadow: none !important;
  background: url('assets/ui/hud/action.png') center / 100% 100% no-repeat !important; image-rendering: pixelated; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .55)); }
#arena .boss-tap-hint b { font-family: 'Rubik', 'Nunito', sans-serif !important; font-weight: 900 !important; font-size: 15px !important; color: #fff !important; white-space: nowrap !important;
  -webkit-text-stroke: 1px #0c0806; paint-order: stroke fill; text-shadow: 0 2px 0 #000 !important; }
#arena .boss-tap-hint i { font-size: 22px; filter: drop-shadow(0 2px 0 #000); }

/* v-hud: кольцо портрета и жетон уровня не обрезаются у левого края; старые ромбики на плашках убраны */
#arena .hero-card { margin-left: 10px !important; }
#arena .boss-bar .boss-head::before, #arena .boss-bar .boss-head::after, #arena .hero-card-text::before, #arena .hero-card-text::after { display: none !important; }

#arena .lvl-box::before, #arena .lvl-box::after { display: none !important; }

/* v-hud, книжная: в узком квадрате имя босса не помещается рядом с карточкой героя — полоса босса под ней */
@media (orientation: portrait) { #arena .boss-bar { margin-top: 64px !important; } }

/* v-hud: портрет босса — круглый медальон слева в плашке имени, крупнее плашки, как в референсе */
#arena .boss-bar .boss-head { position: relative; padding-left: 30px !important; }
#arena .boss-pic { position: absolute; z-index: 2; left: -24px; top: 50%; translate: 0 -50%; width: 38px; height: 38px; border-radius: 50%;
  background-color: #1d140d; background-repeat: no-repeat; image-rendering: pixelated;
  box-shadow: 0 0 0 2px #0c0806, 0 0 0 4px #5f6b3a, 0 0 0 6px #0c0806, 0 3px 6px 4px rgba(0, 0, 0, .55); }
/* кнопка статистики — такая же каменная плита, значок-столбики */
#arena .hud-right .stats-btn { display: grid !important; place-items: center; }
#arena .hud-right .stats-btn svg { width: 20px; height: 20px; filter: drop-shadow(0 2px 0 #000); }

/* ===== v-icons (2026-10-18): иконки и рамки интерфейса v2 — assets/ui/v2/{icons,frames}; нарезка листов художника: art-source/ui-v2/slice-run.cjs ===== */
img.ic { display: inline-block; flex: none; width: 1.25em; height: 1.25em; object-fit: contain; vertical-align: -0.28em; image-rendering: auto !important; pointer-events: none; }
#gold-box img.ic-coin { width: 1.15em; height: 1.15em; margin-right: 3px; vertical-align: -0.22em; }
.lunar-btn img.ic { margin-right: 3px; }
.energy-num img.ic, .skill-pill i img.ic { width: 1.2em; height: 1.2em; }
/* кнопки справа сверху: квадратная рамка v2, внутри иконка */
#arena .hud-right .gear-btn { background: url('assets/ui/v2/frames/frame-sq.png') center / 100% 100% no-repeat !important; image-rendering: auto;
  display: grid !important; place-items: center; color: #fff4c8 !important; }
#arena .hud-right .gear-btn:active { background-image: url('assets/ui/v2/frames/frame-sq-down.png') !important; }
#arena .hud-right .gear-btn img.ic { width: 26px; height: 26px; filter: drop-shadow(0 1px 0 #000); }
#arena .hud-right .stats-btn img.ic { width: 24px; height: 24px; }
/* автобой и награды: текст пишет game.js, иконка — здесь */
#auto-btn::before, #rewards-btn::before { content: ''; display: inline-block; width: 1.35em; height: 1.35em; margin-right: 4px; vertical-align: -0.32em;
  background: url('assets/ui/v2/icons/ic-auto.png') center / contain no-repeat; }
#rewards-btn::before { background-image: url('assets/ui/v2/icons/ic-gift.png'); }
#auto-btn:not(.on)::before { filter: grayscale(1) brightness(.8); }
/* широкие кнопки: рамка v2 «нарезкой» — углы по 52 px исходника не тянутся, середина растягивается */
:is(#pause-go, #pause-town, #results-again, #boss-call) {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 6px;
  border-style: solid !important; border-color: transparent !important; border-width: 0 var(--bw, 18px) !important; border-radius: 0 !important;
  border-image: url('assets/ui/v2/frames/btn-green.png') 0 52 fill / 0 var(--bw, 18px) stretch !important;
  background: none !important; box-shadow: none !important; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .5));
  color: #fff !important; text-shadow: 0 2px 0 #000, 0 0 3px #000 !important; }
:is(#pause-go, #pause-town, #results-again, #boss-call) img.ic { width: 1.3em; height: 1.3em; vertical-align: 0; filter: drop-shadow(0 1px 0 #000); }
:is(#pause-go, #pause-town, #results-again, #boss-call)[hidden] { display: none !important; }
#pause-town { border-image-source: url('assets/ui/v2/frames/btn-dark.png') !important; }
#boss-call { --bw: 15px; border-image-source: url('assets/ui/v2/frames/btn-red.png') !important; }
:is(#pause-go, #pause-town, #results-again, #boss-call):active { border-image-source: url('assets/ui/v2/frames/btn-down.png') !important; transform: translateY(2px); }
/* окно наград: иконки в инструментах — картинки вместо эмодзи */
#cards .tool-btn i img.ic, #cards .autopick-switch > i img.ic { width: 26px; height: 26px; vertical-align: middle; }
/* нижняя панель: «Отряд» */
.dock .dock-ic img.ic { width: 28px; height: 28px; }
/* крестики «Закрыть» и стрелка «Назад»: только иконка */
:is(#sheet-close, #backpack-close, #info-close, #evotree-close, .meta-back) img.ic { width: 1.4em; height: 1.4em; vertical-align: middle; filter: drop-shadow(0 1px 0 #000); }

/* Эффекты выстрелов v2 (Лаборатория, body.fx2): CSS-ауры героя и тонировка статусов v1 не рисуются — их заменяют пиксельные метки и частицы canvas v2 (fx-v2-world.js) */
body.fx2 .slime .aura { display: none !important; }
body.fx2 .mon.burning .art:not(.hitflash), body.fx2 .mon.burning .art:not(.hitflash) img, body.fx2 .mon.poisoned .art:not(.hitflash), body.fx2 .mon.poisoned .art:not(.hitflash) img,
body.fx2 .mon.slowed .art:not(.hitflash) img, body.fx2 .mon.bleed .art:not(.hitflash) { filter: none !important; }
body.fx2 .mon.bleed .mon-hp { box-shadow: none !important; }
body.fx2 .mon .st, body.fx2 .gore, body.fx2 .blood-puddle, body.fx2 .stuck-bomb, body.fx2 .frost-vortex { display: none !important; }

/* ===== v-s3: стиль интерфейса «Тёмный болотный» (Тест-лаборатория → Стиль интерфейса), рамки — assets/ui/style3 (см. README там).
   Включается классом ui-s3 на body. Пока: окно паузы, кнопки меню и паузы, полосы здоровья/опыта и босса в бою */
/* окно паузы — большое модальное окно со слизнем, свечами и черепом; центр тянется */
body.ui-s3 .pause-box { box-sizing: border-box; padding: 6px 10px 10px !important; background: none !important; box-shadow: none !important; border-radius: 0 !important;
  border-style: solid !important; border-color: transparent !important; border-width: 62px 44px 46px 44px !important;
  border-image: url('assets/ui/style3/panels/modal-large.png') 104 72 74 72 fill / 62px 44px 46px 44px / 0 stretch !important; }
body.ui-s3 .pause-box::before, body.ui-s3 .pause-box::after { display: none !important; }
body.ui-s3 .pause-title { margin-top: -6px !important; }
/* кнопки: главная — зелёная, обычные — тёмные каменные, «В город» — синяя */
body.ui-s3 :is(.menu-btn, .pause-btn, .town-leave, .meta-buy) { background: none !important; box-shadow: none !important; border-radius: 0 !important; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .55)) !important;
  border-style: solid !important; border-color: transparent !important; border-width: 14px 22px 16px !important; padding: 2px 8px !important; min-height: 0 !important;
  border-image: url('assets/ui/style3/buttons/btn-dark-large.png') 40 46 44 fill / 14px 22px 16px / 0 stretch !important;
  color: #ece6d6 !important; font-weight: 900; text-shadow: 0 2px 0 #000 !important; -webkit-text-stroke: 0; }
body.ui-s3 :is(.menu-btn.primary, .pause-btn.go, .town-leave, .meta-buy) { border-image-source: url('assets/ui/style3/buttons/btn-pressed.png') !important; border-image-slice: 42 40 42 fill !important; color: #f4ffe4 !important; }
body.ui-s3 .pause-btn.to-town { border-image-source: url('assets/ui/style3/buttons/btn-secondary-small.png') !important; border-image-slice: 36 38 38 fill !important; color: #e4f2ff !important; }
body.ui-s3 :is(.menu-btn, .pause-btn, .town-leave, .meta-buy)::before, body.ui-s3 :is(.menu-btn, .pause-btn, .town-leave, .meta-buy)::after { display: none !important; }
body.ui-s3 :is(.menu-btn, .pause-btn):active { transform: translateY(2px); filter: brightness(.92) !important; }

/* полосы в бою: жёлоб — пустая полоса кита (иконка слева входит в рамку), заливка — кусок заливки кита; ширина заливки задаётся кодом в % от жёлоба */
body.ui-s3 #arena .hero-card-text { border-image: none !important; border-width: 0 !important; background: none !important; padding: 0 !important; gap: 2px !important; }
body.ui-s3 #arena .hp-line { box-sizing: border-box; display: block; height: 30px !important; padding: 8px 8px 8px 28px; background: none !important; box-shadow: none !important; border-radius: 0 !important;
  border-image: url('assets/ui/style3/bars/bar-hp-empty.png') 0 fill / 0 / 0 stretch !important; border-width: 0 !important; overflow: visible; }
body.ui-s3 #arena .hp-line::before { display: none !important; }
body.ui-s3 #arena .hp-line #hp-line-fill { position: relative !important; inset: auto !important; display: block; height: 100% !important; border-radius: 0 !important; box-shadow: none !important;
  background: url('assets/ui/style3/bars/bar-hp-fill.png') left center / 100% 100% no-repeat !important; transition: width .2s; }
body.ui-s3 #arena .hp-line b#portrait-hp { padding-left: 18px; font-size: 12px !important; }
body.ui-s3 #arena .lvl-box .bar.xp { box-sizing: border-box; height: 26px !important; padding: 6px 6px 6px 23px; background: url('assets/ui/style3/bars/bar-xp-empty.png') center / 100% 100% no-repeat !important;
  box-shadow: none !important; border: 0 !important; border-radius: 0 !important; overflow: visible; }
body.ui-s3 #arena .lvl-box .bar.xp #xp-fill { position: relative !important; inset: auto !important; display: block; height: 100% !important; border-radius: 0 !important; box-shadow: none !important;
  background: url('assets/ui/style3/bars/bar-xp-fill.png') left center / 100% 100% no-repeat !important; }
body.ui-s3 #arena .lvl-box #xp-text { padding-left: 16px; font-size: 10px !important; }
body.ui-s3 #arena .boss-bar-track { box-sizing: border-box; height: 32px !important; padding: 10px 9px 8px 32px !important; border: 0 !important; border-image: none !important;
  background: url('assets/ui/style3/bars/bar-boss-empty.png') center / 100% 100% no-repeat !important; image-rendering: auto; }
body.ui-s3 #arena .boss-bar-track i#boss-bar-fill { position: relative !important; inset: auto !important; display: block; height: 100% !important; box-shadow: none !important;
  background: url('assets/ui/style3/bars/bar-boss-fill.png') left center / 100% 100% no-repeat !important; }
body.ui-s3 #arena .boss-bar-track span { position: absolute; inset: 0; padding-left: 22px; line-height: 32px !important; }

/* v-s3: кнопки паузы и итогов размечены по id (рамки v2) — в тёмном болотном стиле перебиваем их тем же id */
body.ui-s3 :is(#pause-go, #pause-town, #results-again) { border-width: 14px 22px 16px !important; padding: 2px 8px !important; min-height: 44px;
  border-image: url('assets/ui/style3/buttons/btn-pressed.png') 42 40 42 fill / 14px 22px 16px / 0 stretch !important; }
body.ui-s3 #pause-town { border-image: url('assets/ui/style3/buttons/btn-secondary-small.png') 36 38 38 fill / 14px 22px 16px / 0 stretch !important; }
body.ui-s3 :is(#pause-go, #pause-town, #results-again):active { border-image-source: url('assets/ui/style3/buttons/btn-pressed.png') !important; filter: brightness(.9); }

/* v-s3: шестерёнка паузы не на нарисованном «✕» рамки */
body.ui-s3 .pause-gear { right: 44px !important; top: -4px !important; }

/* ===== v-s3-cards: сундук и карты умений в стиле «Тёмный болотный» (Тест-лаборатория → Стиль интерфейса).
   Рамка — картинка карты из assets/ui/style3/cards в ::before (9-slice: верх с окном и табличкой и низ с кружком и плашкой
   не тянутся, поле описания тянется по высоте). Содержимое раскладывается по зонам картинки в cqw (ширина карты = 100cqw).
   Зоны картинок и этот блок — генератор scratchpad slicer/gen-cards.cjs. Книжная — компактная горизонтальная карта */
body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card { --img: url('assets/ui/style3/cards/card-common.png'); --W: 303; --H: 429; --sT: 243; --sB: 97; --tw: 80.2; --bw: 32.01; --rx: 30.05; --ry: 18.67; --rs: 40.55; --px0: 14.85; --px1: 85.81; --py0: 62.71; --py1: 75.91; --dx0: 4.95; --dxr: 9.24; --dy0: 78.22; --dyb: 30.03; --cx0: 16.5; --cs: 15.51; --cb: 11.88; --bx0: 33.33; --bx1: 84.16; --f: none; }
body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card.uncommon { --img: url('assets/ui/style3/cards/card-uncommon.png'); --W: 275; --H: 429; --sT: 241; --sB: 98; --tw: 87.64; --bw: 35.64; --rx: 28.2; --ry: 20.2; --rs: 44.68; --px0: 10.91; --px1: 89.82; --py0: 69.09; --py1: 82.91; --dx0: 5.45; --dxr: 5.45; --dy0: 85.45; --dyb: 33.45; --cx0: 14.91; --cs: 16.73; --cb: 13.09; --bx0: 33.09; --bx1: 88.73; --f: none; }
body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card.rare { --img: url('assets/ui/style3/cards/card-rare.png'); --W: 251; --H: 427; --sT: 241; --sB: 97; --tw: 96.02; --bw: 38.65; --rx: 25.35; --ry: 20.18; --rs: 50.49; --px0: 12.35; --px1: 88.45; --py0: 75.7; --py1: 90.84; --dx0: 4.38; --dxr: 5.18; --dy0: 93.63; --dyb: 36.25; --cx0: 15.14; --cs: 17.93; --cb: 14.34; --bx0: 34.66; --bx1: 88.84; --f: none; }
body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card.epic { --img: url('assets/ui/style3/cards/card-epic.png'); --W: 254; --H: 429; --sT: 243; --sB: 98; --tw: 95.67; --bw: 38.58; --rx: 25.22; --ry: 22.27; --rs: 48.38; --px0: 11.81; --px1: 88.58; --py0: 74.8; --py1: 90.55; --dx0: 5.91; --dxr: 11.42; --dy0: 93.31; --dyb: 36.22; --cx0: 14.96; --cs: 18.11; --cb: 14.57; --bx0: 35.04; --bx1: 81.89; --f: none; }
body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card.legendary { --img: url('assets/ui/style3/cards/card-rare.png'); --W: 251; --H: 427; --sT: 241; --sB: 97; --tw: 96.02; --bw: 38.65; --rx: 25.35; --ry: 20.18; --rs: 50.49; --px0: 12.35; --px1: 88.45; --py0: 75.7; --py1: 90.84; --dx0: 4.38; --dxr: 5.18; --dy0: 93.63; --dyb: 36.25; --cx0: 15.14; --cs: 17.93; --cb: 14.34; --bx0: 34.66; --bx1: 88.84; --f: hue-rotate(185deg) saturate(1.3); }
body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card.lunar { --img: url('assets/ui/style3/cards/card-skill.png'); --W: 317; --H: 374; --sT: 237; --sB: 95; --tw: 74.76; --bw: 29.97; --rx: 32.14; --ry: 20.31; --rs: 36.04; --px0: 12.3; --px1: 87.7; --py0: 60.88; --py1: 70.98; --dx0: 17.03; --dxr: 17.35; --dy0: 72.87; --dyb: 28.08; --cx0: 15.77; --cs: 15.46; --cb: 11.04; --bx0: 32.49; --bx1: 85.8; --f: none; }
body.ui-s3 #cards.passive-mode #cards-list .card.sk-card { --img: url('assets/ui/style3/cards/card-skill.png'); --W: 317; --H: 374; --sT: 237; --sB: 95; --tw: 74.76; --bw: 29.97; --rx: 32.14; --ry: 20.31; --rs: 36.04; --px0: 12.3; --px1: 87.7; --py0: 60.88; --py1: 70.98; --dx0: 17.03; --dxr: 17.35; --dy0: 72.87; --dyb: 28.08; --cx0: 15.77; --cs: 15.46; --cb: 11.04; --bx0: 32.49; --bx1: 85.8; --f: none; }
body.ui-s3 #cards.passive-mode #cards-list .card.sk-card.t-buff { --img: url('assets/ui/style3/cards/card-skill.png'); --W: 317; --H: 374; --sT: 237; --sB: 95; --tw: 74.76; --bw: 29.97; --rx: 32.14; --ry: 20.31; --rs: 36.04; --px0: 12.3; --px1: 87.7; --py0: 60.88; --py1: 70.98; --dx0: 17.03; --dxr: 17.35; --dy0: 72.87; --dyb: 28.08; --cx0: 15.77; --cs: 15.46; --cb: 11.04; --bx0: 32.49; --bx1: 85.8; --f: hue-rotate(28deg) saturate(1.2); }
body.ui-s3 #cards.passive-mode #cards-list .card.sk-card.t-def { --img: url('assets/ui/style3/cards/card-rare.png'); --W: 251; --H: 427; --sT: 241; --sB: 97; --tw: 96.02; --bw: 38.65; --rx: 25.35; --ry: 20.18; --rs: 50.49; --px0: 12.35; --px1: 88.45; --py0: 75.7; --py1: 90.84; --dx0: 4.38; --dxr: 5.18; --dy0: 93.63; --dyb: 36.25; --cx0: 15.14; --cs: 17.93; --cb: 14.34; --bx0: 34.66; --bx1: 88.84; --f: none; }
body.ui-s3 #cards.passive-mode #cards-list .card.sk-card.t-summon { --img: url('assets/ui/style3/cards/card-uncommon.png'); --W: 275; --H: 429; --sT: 241; --sB: 98; --tw: 87.64; --bw: 35.64; --rx: 28.2; --ry: 20.2; --rs: 44.68; --px0: 10.91; --px1: 89.82; --py0: 69.09; --py1: 82.91; --dx0: 5.45; --dxr: 5.45; --dy0: 85.45; --dyb: 33.45; --cx0: 14.91; --cs: 16.73; --cb: 13.09; --bx0: 33.09; --bx1: 88.73; --f: none; }
body.ui-s3 #cards.passive-mode #cards-list .card.sk-card.t-pas { --img: url('assets/ui/style3/cards/card-common.png'); --W: 303; --H: 429; --sT: 243; --sB: 97; --tw: 80.2; --bw: 32.01; --rx: 30.05; --ry: 18.67; --rs: 40.55; --px0: 14.85; --px1: 85.81; --py0: 62.71; --py1: 75.91; --dx0: 4.95; --dxr: 9.24; --dy0: 78.22; --dyb: 30.03; --cx0: 16.5; --cs: 15.51; --cb: 11.88; --bx0: 33.33; --bx1: 84.16; --f: none; }
body.ui-s3 #cards.passive-mode #cards-list .card.sk-card.t-pas.uncommon { --img: url('assets/ui/style3/cards/card-uncommon.png'); --W: 275; --H: 429; --sT: 241; --sB: 98; --tw: 87.64; --bw: 35.64; --rx: 28.2; --ry: 20.2; --rs: 44.68; --px0: 10.91; --px1: 89.82; --py0: 69.09; --py1: 82.91; --dx0: 5.45; --dxr: 5.45; --dy0: 85.45; --dyb: 33.45; --cx0: 14.91; --cs: 16.73; --cb: 13.09; --bx0: 33.09; --bx1: 88.73; --f: none; }
body.ui-s3 #cards.passive-mode #cards-list .card.sk-card.t-pas.rare { --img: url('assets/ui/style3/cards/card-rare.png'); --W: 251; --H: 427; --sT: 241; --sB: 97; --tw: 96.02; --bw: 38.65; --rx: 25.35; --ry: 20.18; --rs: 50.49; --px0: 12.35; --px1: 88.45; --py0: 75.7; --py1: 90.84; --dx0: 4.38; --dxr: 5.18; --dy0: 93.63; --dyb: 36.25; --cx0: 15.14; --cs: 17.93; --cb: 14.34; --bx0: 34.66; --bx1: 88.84; --f: none; }
body.ui-s3 #cards.passive-mode #cards-list .card.sk-card.t-pas.epic { --img: url('assets/ui/style3/cards/card-epic.png'); --W: 254; --H: 429; --sT: 243; --sB: 98; --tw: 95.67; --bw: 38.58; --rx: 25.22; --ry: 22.27; --rs: 48.38; --px0: 11.81; --px1: 88.58; --py0: 74.8; --py1: 90.55; --dx0: 5.91; --dxr: 11.42; --dy0: 93.31; --dyb: 36.22; --cx0: 14.96; --cs: 18.11; --cb: 14.57; --bx0: 35.04; --bx1: 81.89; --f: none; }
body.ui-s3 #cards.passive-mode #cards-list .card.sk-card.t-up { --img: url('assets/ui/style3/cards/card-dark.png'); --W: 308; --H: 374; --sT: 237; --sB: 95; --tw: 76.95; --bw: 30.84; --rx: 31.29; --ry: 21.23; --rs: 37.09; --px0: 9.74; --px1: 89.61; --py0: 61.36; --py1: 73.05; --dx0: 17.53; --dxr: 17.21; --dy0: 75; --dyb: 28.9; --cx0: 16.88; --cs: 15.91; --cb: 10.71; --bx0: 39.61; --bx1: 87.66; --f: none; }

:is(body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card, body.ui-s3 #cards.passive-mode #cards-list .card.sk-card) { container-type: inline-size; position: relative !important; border: 0 !important; border-image: none !important; background: none !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 !important; overflow: visible !important; aspect-ratio: var(--W) / var(--H); min-height: 0 !important; display: block !important; filter: none; }
:is(body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card, body.ui-s3 #cards.passive-mode #cards-list .card.sk-card)::before { content: '' !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none; width: auto !important; height: auto !important;
  top: 0 !important; left: 0 !important; translate: none !important; background: none !important; aspect-ratio: auto !important; margin: 0 !important;
  border-style: solid; border-color: transparent; border-width: calc(var(--tw) * 1cqw) 0 calc(var(--bw) * 1cqw) 0;
  border-image-source: var(--img); border-image-slice: var(--sT) 0 var(--sB) fill; border-image-width: 1; border-image-repeat: stretch; border-image-outset: 0;
  filter: var(--f) drop-shadow(0 6px 5px rgba(0, 0, 0, .6)); }
:is(body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card, body.ui-s3 #cards.passive-mode #cards-list .card.sk-card):hover:not(.holding) { transform: translateY(-3px) !important; }
:is(body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card, body.ui-s3 #cards.passive-mode #cards-list .card.sk-card).holding { transform: translateY(-5px) scale(1.02) !important; filter: drop-shadow(0 0 10px var(--rc, #9dff5a)) brightness(1.08) !important; }
/* landscape: карта не выше доступного места */
@media (orientation: landscape) { body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card { max-width: calc((100dvh - 120px) * var(--W) / var(--H)); } }

/* --- сундук --- */
body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card :is(.ch-gem, .ch-ring, .ch-rar, .ch-sym) { display: none !important; }
body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card .ch-body { position: static !important; display: block !important; }
body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card .ch-art { position: absolute !important; z-index: 1; left: calc(var(--rx) * 1cqw); top: calc(var(--ry) * 1cqw); width: calc(var(--rs) * 1cqw) !important; height: calc(var(--rs) * 1cqw) !important;
  aspect-ratio: auto !important; border-radius: 50%; box-shadow: none !important; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 38%, transparent), transparent 68%) !important; }
body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card .ch-art::before { inset: 6% !important; }
body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card .ch-art img { width: 66% !important; height: 66% !important; max-width: none !important; }
body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card .ch-body .ch-name { position: absolute !important; z-index: 1; left: calc(var(--px0) * 1cqw); width: calc((var(--px1) - var(--px0)) * 1cqw) !important; top: calc(var(--py0) * 1cqw);
  height: calc((var(--py1) - var(--py0)) * 1cqw); min-height: 0 !important; margin: 0 !important; padding: 0 2cqw !important; background: none !important; place-items: center !important; text-align: center !important;
  font-size: clamp(11px, 6.4cqw, 17px) !important; line-height: 1 !important; }
body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card .ch-line { position: absolute !important; z-index: 1; left: calc(var(--dx0) * 1cqw + 4cqw); right: calc(var(--dxr) * 1cqw + 4cqw); top: calc(var(--dy0) * 1cqw + 3cqw);
  bottom: calc(var(--dyb) * 1cqw + 2cqw); margin: 0 !important; padding: 0 !important; -webkit-line-clamp: 8 !important; overflow: hidden; text-align: center !important;
  font-size: clamp(9.5px, 4.7cqw, 12.5px) !important; line-height: 1.25 !important; }
body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card .ch-stats { position: absolute !important; z-index: 1; left: calc(var(--bx0) * 1cqw); width: calc((var(--bx1) - var(--bx0)) * 1cqw) !important; bottom: calc(var(--cb) * 1cqw); height: calc(var(--cs) * 1cqw);
  margin: 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-evenly !important; gap: 1cqw !important; }
body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card .ch-stat { position: static !important; padding: 0 !important; display: inline-flex !important; flex-direction: column !important; align-items: center !important; gap: 0 !important; min-width: 0; }
body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card .ch-stat::before { display: none !important; }
body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card .ch-stat b { font-size: clamp(11px, 5.8cqw, 16px) !important; line-height: 1 !important; }
body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card .ch-stat small { font-size: clamp(7px, 3.1cqw, 9px) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card .ch-stat .fx-ic { display: none !important; }
body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card .ch-stat:first-child .fx-ic { display: grid !important; position: absolute !important; left: calc((var(--cx0) - var(--bx0)) * 1cqw); top: 0; width: calc(var(--cs) * 1cqw) !important; height: calc(var(--cs) * 1cqw) !important;
  box-sizing: border-box; padding: 2cqw; margin: 0 !important; }
body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card i.ch-info { z-index: 3; top: 4cqw !important; right: 6cqw !important; }
body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card .ch-badge { z-index: 3; top: 4cqw !important; left: 6cqw !important; }

/* --- карты умений --- */
body.ui-s3 #cards.passive-mode #cards-list .card.sk-card .sk-ring { display: none !important; }
body.ui-s3 #cards.passive-mode #cards-list .card.sk-card .card-body, body.ui-s3 #cards.passive-mode #cards-list .card.sk-card .card-head { position: static !important; display: block !important; padding: 0 !important; margin: 0 !important; }
body.ui-s3 #cards.passive-mode #cards-list .card.sk-card .card-art { position: absolute !important; z-index: 1; left: calc(var(--rx) * 1cqw); top: calc(var(--ry) * 1cqw); width: calc(var(--rs) * 1cqw) !important; height: calc(var(--rs) * 1cqw) !important;
  margin: 0 !important; border-radius: 50% !important; box-shadow: none !important; background: radial-gradient(circle, color-mix(in srgb, var(--tc, #ff8a3a) 40%, transparent), transparent 68%) !important; }
body.ui-s3 #cards.passive-mode #cards-list .card.sk-card .card-art > img { width: 66% !important; height: 66% !important; }
body.ui-s3 #cards.passive-mode #cards-list .card.sk-card .card-name { position: absolute !important; z-index: 1; left: calc(var(--px0) * 1cqw); width: calc((var(--px1) - var(--px0)) * 1cqw) !important; top: calc(var(--py0) * 1cqw);
  height: calc((var(--py1) - var(--py0)) * 1cqw); display: grid !important; place-items: center; margin: 0 !important; padding: 0 2cqw !important; background: none !important; clip-path: none !important;
  font-size: clamp(11px, 6.2cqw, 17px) !important; line-height: 1 !important; text-align: center; }
body.ui-s3 #cards.passive-mode #cards-list .card.sk-card .card-desc { position: absolute !important; z-index: 1; left: calc(var(--dx0) * 1cqw + 4cqw); right: calc(var(--dxr) * 1cqw + 4cqw); top: calc(var(--dy0) * 1cqw + 9cqw);
  bottom: calc(var(--dyb) * 1cqw + 2cqw); margin: 0 !important; padding: 0 !important; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 8 !important; overflow: hidden;
  text-align: center; font-size: clamp(9.5px, 4.8cqw, 12.5px) !important; line-height: 1.25 !important; }
body.ui-s3 #cards.passive-mode #cards-list .card.sk-card :is(.card-rarity, .sk-up-tag) { position: absolute !important; z-index: 2; left: 50% !important; right: auto !important; translate: -50% 0; top: calc(var(--dy0) * 1cqw + 2cqw) !important;
  margin: 0 !important; font-size: clamp(8px, 3.8cqw, 10px) !important; padding: 2px 8px !important; white-space: nowrap; }
body.ui-s3 #cards.passive-mode #cards-list .card.sk-card .sk-chips { position: absolute !important; z-index: 1; left: calc(var(--bx0) * 1cqw); width: calc((var(--bx1) - var(--bx0)) * 1cqw) !important; bottom: calc(var(--cb) * 1cqw); height: calc(var(--cs) * 1cqw);
  margin: 0 !important; display: flex !important; flex-wrap: wrap !important; align-content: center; align-items: center; justify-content: center; gap: 1px 3px !important; overflow: hidden; }
body.ui-s3 #cards.passive-mode #cards-list .card.sk-card .sk-chips i { padding: 0 3px !important; font-size: clamp(8.5px, 4cqw, 11px) !important; background: none !important; line-height: 1.15; }
body.ui-s3 #cards.passive-mode #cards-list .card.sk-card .sk-chips i::before { display: none !important; }
/* нижний кружок: значок типа; у улучшения — точки прогресса */
body.ui-s3 #cards.passive-mode #cards-list .card.sk-card .card-body::after { content: '⚔'; position: absolute; z-index: 1; left: calc(var(--cx0) * 1cqw); bottom: calc(var(--cb) * 1cqw); width: calc(var(--cs) * 1cqw); height: calc(var(--cs) * 1cqw);
  display: grid; place-items: center; font-size: calc(var(--cs) * .5cqw); color: #ffe7b0; text-shadow: 0 2px 0 #000; pointer-events: none; }
body.ui-s3 #cards.passive-mode #cards-list .card.sk-card.t-def .card-body::after { content: '🛡'; } body.ui-s3 #cards.passive-mode #cards-list .card.sk-card.t-buff .card-body::after { content: '✦'; } body.ui-s3 #cards.passive-mode #cards-list .card.sk-card.t-summon .card-body::after { content: '☘'; }
body.ui-s3 #cards.passive-mode #cards-list .card.sk-card.t-pas .card-body::after { content: '◆'; } body.ui-s3 #cards.passive-mode #cards-list .card.sk-card.t-up .card-body::after { content: none; }
body.ui-s3 #cards.passive-mode #cards-list .card.sk-card .sk-up-pips { position: absolute !important; z-index: 2; left: calc(var(--cx0) * 1cqw); bottom: calc(var(--cb) * 1cqw); width: calc(var(--cs) * 1cqw); height: calc(var(--cs) * 1cqw);
  display: flex !important; flex-wrap: wrap; align-content: center; justify-content: center; gap: 2px; margin: 0 !important; }
/* у пассивок нет чисел — плашка вида уезжает в нижнюю плашку */
body.ui-s3 #cards.passive-mode #cards-list .card.sk-card:not(:has(.sk-chips)) :is(.card-rarity, .sk-up-tag) { top: auto !important; left: calc((var(--bx0) + var(--bx1)) * .5cqw) !important; bottom: calc((var(--cb) + var(--cs) * .5) * 1cqw - 9px); }
body.ui-s3 #cards.passive-mode #cards-list .card.sk-card:not(:has(.sk-chips)) .card-desc { top: calc(var(--dy0) * 1cqw + 3cqw); }

/* --- книжная: компактная горизонтальная карта (окно слева, табличка имени с описанием, кружок и плашка чисел) --- */
@media (orientation: portrait) {
  :is(body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card, body.ui-s3 #cards.passive-mode #cards-list .card.sk-card) { aspect-ratio: 379 / 186; width: 100% !important; height: auto !important; flex: none !important; max-width: none !important; }
  body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card { --img: url('assets/ui/style3/cards/card-compact.png'); --f: none; --rx: 13.2; --ry: 14.6; --rs: 21; --px0: 36.9; --px1: 80.7; --py0: 12.1; --py1: 25.3; --cx0: 40.4; --cs: 11.9; --cb: 9.8; --bx0: 53.8; --bx1: 91; }
  body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card.uncommon { --img: url('assets/ui/style3/cards/card-compact.png'); --f: none; --rx: 13.2; --ry: 14.6; --rs: 21; --px0: 36.9; --px1: 80.7; --py0: 12.1; --py1: 25.3; --cx0: 40.4; --cs: 11.9; --cb: 9.8; --bx0: 53.8; --bx1: 91; }
  body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card.rare { --img: url('assets/ui/style3/cards/card-compact.png'); --f: none; --rx: 13.2; --ry: 14.6; --rs: 21; --px0: 36.9; --px1: 80.7; --py0: 12.1; --py1: 25.3; --cx0: 40.4; --cs: 11.9; --cb: 9.8; --bx0: 53.8; --bx1: 91; }
  body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card.epic { --img: url('assets/ui/style3/cards/card-compact.png'); --f: none; --rx: 13.2; --ry: 14.6; --rs: 21; --px0: 36.9; --px1: 80.7; --py0: 12.1; --py1: 25.3; --cx0: 40.4; --cs: 11.9; --cb: 9.8; --bx0: 53.8; --bx1: 91; }
  body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card.legendary { --img: url('assets/ui/style3/cards/card-compact.png'); --f: none; --rx: 13.2; --ry: 14.6; --rs: 21; --px0: 36.9; --px1: 80.7; --py0: 12.1; --py1: 25.3; --cx0: 40.4; --cs: 11.9; --cb: 9.8; --bx0: 53.8; --bx1: 91; }
  body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card.lunar { --img: url('assets/ui/style3/cards/card-compact.png'); --f: none; --rx: 13.2; --ry: 14.6; --rs: 21; --px0: 36.9; --px1: 80.7; --py0: 12.1; --py1: 25.3; --cx0: 40.4; --cs: 11.9; --cb: 9.8; --bx0: 53.8; --bx1: 91; }
  body.ui-s3 #cards.passive-mode #cards-list .card.sk-card { --img: url('assets/ui/style3/cards/card-compact.png'); --f: none; --rx: 13.2; --ry: 14.6; --rs: 21; --px0: 36.9; --px1: 80.7; --py0: 12.1; --py1: 25.3; --cx0: 40.4; --cs: 11.9; --cb: 9.8; --bx0: 53.8; --bx1: 91; }
  body.ui-s3 #cards.passive-mode #cards-list .card.sk-card.t-buff { --img: url('assets/ui/style3/cards/card-compact.png'); --f: none; --rx: 13.2; --ry: 14.6; --rs: 21; --px0: 36.9; --px1: 80.7; --py0: 12.1; --py1: 25.3; --cx0: 40.4; --cs: 11.9; --cb: 9.8; --bx0: 53.8; --bx1: 91; }
  body.ui-s3 #cards.passive-mode #cards-list .card.sk-card.t-def { --img: url('assets/ui/style3/cards/card-compact.png'); --f: none; --rx: 13.2; --ry: 14.6; --rs: 21; --px0: 36.9; --px1: 80.7; --py0: 12.1; --py1: 25.3; --cx0: 40.4; --cs: 11.9; --cb: 9.8; --bx0: 53.8; --bx1: 91; }
  body.ui-s3 #cards.passive-mode #cards-list .card.sk-card.t-summon { --img: url('assets/ui/style3/cards/card-compact.png'); --f: none; --rx: 13.2; --ry: 14.6; --rs: 21; --px0: 36.9; --px1: 80.7; --py0: 12.1; --py1: 25.3; --cx0: 40.4; --cs: 11.9; --cb: 9.8; --bx0: 53.8; --bx1: 91; }
  body.ui-s3 #cards.passive-mode #cards-list .card.sk-card.t-pas { --img: url('assets/ui/style3/cards/card-compact.png'); --f: none; --rx: 13.2; --ry: 14.6; --rs: 21; --px0: 36.9; --px1: 80.7; --py0: 12.1; --py1: 25.3; --cx0: 40.4; --cs: 11.9; --cb: 9.8; --bx0: 53.8; --bx1: 91; }
  body.ui-s3 #cards.passive-mode #cards-list .card.sk-card.t-pas.uncommon { --img: url('assets/ui/style3/cards/card-compact.png'); --f: none; --rx: 13.2; --ry: 14.6; --rs: 21; --px0: 36.9; --px1: 80.7; --py0: 12.1; --py1: 25.3; --cx0: 40.4; --cs: 11.9; --cb: 9.8; --bx0: 53.8; --bx1: 91; }
  body.ui-s3 #cards.passive-mode #cards-list .card.sk-card.t-pas.rare { --img: url('assets/ui/style3/cards/card-compact.png'); --f: none; --rx: 13.2; --ry: 14.6; --rs: 21; --px0: 36.9; --px1: 80.7; --py0: 12.1; --py1: 25.3; --cx0: 40.4; --cs: 11.9; --cb: 9.8; --bx0: 53.8; --bx1: 91; }
  body.ui-s3 #cards.passive-mode #cards-list .card.sk-card.t-pas.epic { --img: url('assets/ui/style3/cards/card-compact.png'); --f: none; --rx: 13.2; --ry: 14.6; --rs: 21; --px0: 36.9; --px1: 80.7; --py0: 12.1; --py1: 25.3; --cx0: 40.4; --cs: 11.9; --cb: 9.8; --bx0: 53.8; --bx1: 91; }
  body.ui-s3 #cards.passive-mode #cards-list .card.sk-card.t-up { --img: url('assets/ui/style3/cards/card-compact.png'); --f: none; --rx: 13.2; --ry: 14.6; --rs: 21; --px0: 36.9; --px1: 80.7; --py0: 12.1; --py1: 25.3; --cx0: 40.4; --cs: 11.9; --cb: 9.8; --bx0: 53.8; --bx1: 91; }
  :is(body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card, body.ui-s3 #cards.passive-mode #cards-list .card.sk-card)::before { border-width: 0 !important; border-image-slice: 0 fill !important; }
  body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card .ch-body .ch-name, body.ui-s3 #cards.passive-mode #cards-list .card.sk-card .card-name { height: 6.6cqw; top: calc(var(--py0) * 1cqw + .6cqw); font-size: clamp(12px, 4.2cqw, 17px) !important; place-items: center start !important; text-align: left !important; padding: 0 1cqw !important; }
  body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card .ch-line, body.ui-s3 #cards.passive-mode #cards-list .card.sk-card .card-desc { left: calc(var(--px0) * 1cqw + 1cqw); right: calc((100 - var(--px1)) * 1cqw + 1cqw); top: calc(var(--py0) * 1cqw + 7.2cqw); bottom: auto; height: 5.8cqw;
    -webkit-line-clamp: 2 !important; font-size: clamp(9px, 2.85cqw, 12px) !important; line-height: 1.02 !important; text-align: left !important; }
  body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card .ch-art .ch-img img { width: 70% !important; height: 70% !important; }
  body.ui-s3 #cards.passive-mode #cards-list .card.sk-card :is(.card-rarity, .sk-up-tag) { top: 1.5cqw !important; left: auto !important; right: 3cqw !important; translate: none !important; }
  body.ui-s3 #cards.passive-mode #cards-list .card.sk-card:not(:has(.sk-chips)) :is(.card-rarity, .sk-up-tag) { top: auto !important; right: auto !important; left: calc((var(--bx0) + var(--bx1)) * .5cqw) !important; translate: -50% 0 !important; }
}

/* v-s3-cards: «i» внутрь рамки, к окну предмета (на краю она ложилась на шипы) */
body.ui-s3 #cards:not(.boss-ped) #cards-list .ch-card i.ch-info { top: calc(var(--ry) * 1cqw) !important; right: calc(var(--rx) * 1cqw - 7cqw) !important; }

/* v-s3-cards: описание умения — ровно в поле описания (старые правила задавали ему ширину 100% и display) */
body.ui-s3 #cards.passive-mode #cards-list .card.sk-card .card-body .card-desc { width: auto !important; max-width: none !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; }

/* v-s3-cards, книжная: панель игры за окном не просвечивает */
@media (orientation: portrait) { body.ui-s3 #cards:has(:is(.ch-card, .sk-card)) { background-color: rgba(4, 7, 5, .9) !important; } }

/* ===== v-s3-all: «Тёмный болотный» для остального интерфейса (меню, настройки, итоги, лавка, встречи, рюкзак, подсказки,
   вкладки, ресурсы, заголовки, тосты, выбор пути, договоры, награда босса). Рамки — 9-slice из assets/ui/style3, см. README там */
/* большие окна — модальное окно со слизнем, свечами и черепом */
body.ui-s3 :is(.menu-panel, .results-panel, .merchant-panel, .evolution-panel, .town-panel, .newlook-panel, .bp-panel, .event-side, .sheet, .evotree) {
  background: none !important; box-shadow: none !important; border-radius: 0 !important; border-style: solid !important; border-color: transparent !important;
  border-width: 50px 36px 38px 36px !important; border-image: url('assets/ui/style3/panels/modal-large.png') 104 72 74 72 fill / 50px 36px 38px 36px / 0 stretch !important; }
body.ui-s3 :is(.menu-panel, .results-panel, .merchant-panel, .evolution-panel, .town-panel, .newlook-panel, .bp-panel, .event-side, .sheet, .evotree)::before,
body.ui-s3 :is(.menu-panel, .results-panel, .merchant-panel, .evolution-panel, .town-panel, .newlook-panel, .bp-panel, .event-side, .sheet, .evotree)::after { display: none !important; }
body.ui-s3 #evolution.path-pick .evolution-panel { border: 0 !important; border-image: none !important; }
/* окно описания предмета и подсказка обучения — тёмная подсказка со свечами */
body.ui-s3 :is(.info-card, .tut-box) { background: none !important; box-shadow: none !important; border-radius: 0 !important; border-style: solid !important; border-color: transparent !important;
  border-width: 18px 18px 18px 20px !important; border-image: url('assets/ui/style3/tooltips/tooltip-medium.png') 40 40 40 50 fill / 18px 18px 18px 20px / 0 stretch !important; color: #ece6d6 !important; }
body.ui-s3 :is(.info-card, .tut-box)::before, body.ui-s3 :is(.info-card, .tut-box)::after { display: none !important; }
body.ui-s3 .tut-box :is(b, p, h3, span, small) { color: #ece6d6 !important; }
/* ряды и плашки внутри окон — малые каменные блоки */
body.ui-s3 :is(.settings-row, .lab-card, .results-card, .pause-panel, .party-row, .tavern-row, .town-upgrade, .evolution-option:not(.dev), .event-opt, .shop-row2, .sheet-stats, .newlook-stats, .pz-stat) {
  background: none !important; box-shadow: none !important; border-radius: 0 !important; border-style: solid !important; border-color: transparent !important;
  border-width: 12px 12px 13px 12px !important; border-image: url('assets/ui/style3/panels/small-block-medium.png') 30 26 32 26 fill / 12px 12px 13px 12px / 0 stretch !important; }
body.ui-s3 :is(.settings-row, .lab-card, .results-card, .pause-panel, .party-row, .tavern-row, .town-upgrade, .evolution-option, .event-opt, .pz-stat)::before,
body.ui-s3 :is(.settings-row, .lab-card, .results-card, .pause-panel, .party-row, .tavern-row, .town-upgrade, .evolution-option, .event-opt, .pz-stat)::after { display: none !important; }
body.ui-s3 .pz-stat { border-width: 8px 10px 9px !important; border-image-width: 8px 10px 9px !important; }
body.ui-s3 .event-opt:not(:disabled):hover { filter: brightness(1.15); }
/* переключатели и сегменты — тёмная каменная кнопка, включённый — зелёная */
body.ui-s3 :is(.style-toggle, .seg-btn, .et-btn:not(.et-close), .et-anim, .sound-toggle:not(.gear-btn), .cards-later, .cards-confirm, #cards-close) {
  background: none !important; box-shadow: none !important; border-radius: 0 !important; border-style: solid !important; border-color: transparent !important; min-height: 0 !important;
  border-width: 10px 15px 11px !important; padding: 2px 6px !important; border-image: url('assets/ui/style3/buttons/btn-dark-small.png') 34 40 36 40 fill / 10px 15px 11px / 0 stretch !important;
  color: #ece6d6 !important; text-shadow: 0 1px 0 #000 !important; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .5)); }
body.ui-s3 :is(.style-toggle, .seg-btn, .et-btn, .et-anim, .cards-later, .cards-confirm, #cards-close)::before, body.ui-s3 :is(.style-toggle, .seg-btn, .et-btn, .et-anim, .cards-later, .cards-confirm, #cards-close)::after { display: none !important; }
body.ui-s3 :is(.seg-btn.on, .style-toggle.on, .cards-confirm, .et-choose) { border-image-source: url('assets/ui/style3/buttons/btn-pressed.png') !important; border-image-slice: 42 40 42 fill !important; color: #f4ffe4 !important; }
/* вкладки */
body.ui-s3 :is(.set-tab, .et-tab, .tabbar .tab) { background: none !important; box-shadow: none !important; border-radius: 0 !important; border-style: solid !important; border-color: transparent !important;
  border-width: 11px 18px 9px !important; padding: 1px 6px !important; border-image: url('assets/ui/style3/tabs/tab-inactive-small.png') 22 40 18 40 fill / 11px 18px 9px / 0 stretch !important; color: #cfcab8 !important; }
body.ui-s3 :is(.set-tab, .et-tab, .tabbar .tab)::before, body.ui-s3 :is(.set-tab, .et-tab, .tabbar .tab)::after { display: none !important; }
body.ui-s3 :is(.set-tab.on, .et-tab.on, .tabbar .tab.on, .tabbar .tab.active) { border-image-source: url('assets/ui/style3/tabs/tab-active-large.png') !important; border-image-slice: 22 44 18 44 fill !important; color: #f4ffe4 !important; }
body.ui-s3 :is(.set-tabs, .tabbar) { background: none !important; box-shadow: none !important; border: 0 !important; border-image: none !important; }
/* квадратные кнопки-значки (шестерёнка, скорость, статистика, лагерь, панель) — малый каменный блок */
body.ui-s3 :is(#arena .hud-right .gear-btn, .camp-gear, .pp-btn:not(.pp-chest), .pause-gear) { background: none !important; box-shadow: none !important; border-radius: 0 !important;
  border-style: solid !important; border-color: transparent !important; border-width: 9px 9px 10px !important;
  border-image: url('assets/ui/style3/panels/small-block-small.png') 24 22 26 22 fill / 9px 9px 10px / 0 stretch !important; }
body.ui-s3 :is(#arena .hud-right .gear-btn, .camp-gear, .pp-btn, .pause-gear)::before, body.ui-s3 :is(#arena .hud-right .gear-btn, .camp-gear, .pp-btn, .pause-gear)::after { display: none !important; }
/* закрыть — красный крест из набора */
body.ui-s3 :is(.info-close, .sheet-close, .et-close, #backpack-close) { width: 34px !important; height: 36px !important; padding: 0 !important; border: 0 !important; border-image: none !important; box-shadow: none !important;
  background: url('assets/ui/style3/buttons/close-small.png') center / contain no-repeat !important; font-size: 0 !important; color: transparent !important; }
body.ui-s3 :is(.info-close, .sheet-close, .et-close, #backpack-close) > * { display: none !important; }
body.ui-s3 :is(.info-close, .sheet-close, .et-close, #backpack-close)::before, body.ui-s3 :is(.info-close, .sheet-close, .et-close, #backpack-close)::after { display: none !important; }
/* ресурсы — каменная пластина счётчика */
body.ui-s3 :is(.res-chip, .lunar-btn, .meta-res, #arena .hud-right #gold-box) { background: none !important; box-shadow: none !important; border-radius: 0 !important; border-style: solid !important; border-color: transparent !important;
  border-width: 8px 14px 9px !important; padding: 0 4px !important; border-image: url('assets/ui/style3/bars/counter-plate-small.png') 30 40 30 40 fill / 8px 14px 9px / 0 stretch !important; color: #ffe9a6 !important; }
body.ui-s3 :is(.res-chip, .lunar-btn, .meta-res, #gold-box)::before { display: none !important; }
/* заголовки: лагерь и вывески окон — зелёная пластина с фонарями */
body.ui-s3 .camp-title { background: none !important; box-shadow: none !important; border-radius: 0 !important; border-style: solid !important; border-color: transparent !important;
  border-width: 14px 52px 14px !important; border-image: url('assets/ui/style3/bars/section-plate-large.png') 28 96 28 96 fill / 14px 52px 14px / 0 stretch !important; }
body.ui-s3 .camp-title::before, body.ui-s3 .camp-title::after { display: none !important; }
body.ui-s3 :is(#cards:has(.ch-card) #cards-title, #evolution.path-pick #evolution-title) { border-image-source: url('assets/ui/style3/bars/banner-medium.png') !important; border-image-slice: 0 64 fill !important;
  border-image-width: 0 calc(var(--th) * .56) !important; padding-top: 0 !important; color: #f4ffe4 !important; }
/* кнопки лагеря (Персонаж, Лунная лавка, Формы, Коллекция) — подписи на узкой пластине */
body.ui-s3 .camp-btn b { background: none !important; box-shadow: none !important; border-radius: 0 !important; border-style: solid !important; border-color: transparent !important;
  border-width: 6px 14px 7px !important; padding: 0 2px !important; border-image: url('assets/ui/style3/bars/narrow-plate-small.png') 18 34 18 34 fill / 6px 14px 7px / 0 stretch !important; }
body.ui-s3 .camp-portal .cp-label, body.ui-s3 .camp-start { filter: none; }
/* тосты — узкий попап с фонарём */
body.ui-s3 .toast { background: none !important; box-shadow: none !important; border-radius: 0 !important; border-style: solid !important; border-color: transparent !important;
  border-width: 10px 16px 10px 30px !important; border-image: url('assets/ui/style3/panels/popup-wide-small.png') 18 30 18 62 fill / 10px 16px 10px 30px / 0 stretch !important; color: #ece6d6 !important; }
body.ui-s3 .toast::before, body.ui-s3 .toast::after { display: none !important; }
/* выбор пути: плашки имён — узкая пластина */
body.ui-s3 #evolution .path-card .pc-name { background: none !important; box-shadow: none !important; border-style: solid; border-color: transparent; border-width: 7px 16px 8px;
  border-image: url('assets/ui/style3/bars/narrow-plate-small.png') 18 34 18 34 fill / 7px 16px 8px / 0 stretch; }
/* договоры — карточки договора в малом каменном блоке */
body.ui-s3 #cards.pact-mode #cards-list .card.pact { background: none !important; box-shadow: none !important; border-radius: 0 !important; border-style: solid !important; border-color: transparent !important;
  border-width: 12px 14px 13px !important; border-image: url('assets/ui/style3/panels/small-block-large.png') 30 30 32 52 fill / 12px 14px 13px 22px / 0 stretch !important; }
body.ui-s3 #cards.pact-mode #cards-list .card.pact::before, body.ui-s3 #cards.pact-mode #cards-list .card.pact::after { display: none !important; }
/* награда босса: табличка под пьедесталом — малый каменный блок */
body.ui-s3 #cards.boss-ped #cards-list .ch-card .ch-body { background: none !important; box-shadow: none !important; border-style: solid; border-color: transparent; border-width: 12px 12px 13px;
  border-image: url('assets/ui/style3/panels/small-block-medium.png') 30 26 32 26 fill / 12px 12px 13px / 0 stretch; }
/* панель под полем в книжной */
body.ui-s3 .pp { background: linear-gradient(#0d110e, #070a08) !important; }
body.ui-s3 :is(.pp-stats, .pp-body) { border-image: none; }
/* кнопки инструментов на картах (переброс, исключить, автовыбор) — малый каменный блок вместо прежней плиты */
body.ui-s3 #cards #cards-tools :is(.tool-btn, .autopick-switch) { background: none !important; border-style: solid !important; border-color: transparent !important; border-width: 10px 10px 11px !important;
  border-image: url('assets/ui/style3/panels/small-block-small.png') 24 22 26 22 fill / 10px 10px 11px / 0 stretch !important; }

/* v-s3-all: кнопка портала в лагере — зелёная кнопка набора */
body.ui-s3 .camp-portal .cp-label { border-image: url('assets/ui/style3/buttons/btn-pressed.png') 42 40 42 fill / 16px 22px 18px / 0 stretch !important; border-width: 16px 22px 18px !important; color: #f4ffe4 !important; text-shadow: 0 2px 0 #000 !important; }

/* v-s3-all: строки списков (настройки, статы, отряд) — тонкая узкая пластина, а не блок с ромбом */
body.ui-s3 :is(.settings-row, .pz-stat, .party-row, .tavern-row):not(.s3-none) { border-width: 6px 14px 7px !important; border-image: url('assets/ui/style3/bars/narrow-plate-small.png') 18 34 18 34 fill / 6px 14px 7px / 0 stretch !important; }

/* ===== v-flat (2026-10-18, по просьбе автора: «сложно, круглая рамка»): проще карточка героя и карты.
   Перебивает v-hud (герой) и v-cards (карты умений, сундук) в пиксельном стиле; болотный стиль (body.ui-s3) не трогает.
   Вернуть прежний вид — удалить этот блок целиком. ===== */
/* герой: квадратный портрет в тонкой рамке, две тонкие полосы, уровень — маленькая цифра на углу портрета */
#arena .portrait::after { display: none !important; }
#arena .portrait { width: 48px !important; height: 48px !important; border-radius: 6px; background: #14110d; box-shadow: 0 0 0 2px #0c0806, 0 0 0 3px rgba(255, 255, 255, .18), 0 3px 0 2px rgba(0, 0, 0, .45); }
#arena .portrait #portrait-img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border-radius: 5px; translate: none !important; }
#arena .portrait-lvl { left: auto !important; right: -6px !important; bottom: -6px !important; width: auto; min-width: 18px !important; height: 18px; padding: 0 4px !important; border-radius: 4px !important;
  font-size: 12px !important; color: #fff !important; text-shadow: none !important; background: #14110d !important; box-shadow: 0 0 0 2px #0c0806, 0 0 0 3px rgba(255, 255, 255, .18) !important; }
#arena .hero-card-text { margin-left: 10px !important; padding: 0 !important; gap: 5px !important; border: 0 !important; border-image: none !important; background: none !important; justify-content: center; }
#arena .hp-line { height: 14px !important; border-radius: 3px !important; overflow: hidden; box-shadow: inset 0 0 0 1px #000, 0 2px 0 rgba(0, 0, 0, .4) !important; }
#arena .hp-line #hp-line-fill { box-shadow: none !important; }
#arena .hp-line::before { width: 10px; height: 10px; left: 4px; }
#arena .hp-line b#portrait-hp { font-size: 10px !important; }
#app #arena .hero-card .lvl-box, #app #arena .hero-card .lvl-box .bar.xp { height: 6px !important; min-height: 0 !important; border-radius: 3px !important; overflow: hidden; box-shadow: inset 0 0 0 1px #000, 0 2px 0 rgba(0, 0, 0, .4) !important; }
#arena .lvl-box .bar.xp #xp-fill { box-shadow: none !important; }
#arena .lvl-box #xp-text { display: none !important; }

/* карты умений и сундука: тёмная плита, сверху полоса цвета типа (умения) или редкости (сундук), иконка без медальона, имя без ленты */
body:not(.ui-s3) #cards.passive-mode #cards-list .card.sk-card { --px: 1px; --stripe: var(--tc); }
body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card { --stripe: var(--rc); }
body:not(.ui-s3) :is(#cards.passive-mode #cards-list .card.sk-card, #cards:not(.boss-ped) #cards-list .ch-card) {
  border: 2px solid #0a0907 !important; border-image: none !important; border-radius: 10px !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--stripe) 14%, #1f1d19) 0, #1a1815 40%, #131210 100%) !important;
  box-shadow: inset 0 6px 0 var(--stripe), inset 0 0 0 1px color-mix(in srgb, var(--stripe) 30%, transparent), 0 4px 0 rgba(0, 0, 0, .5) !important; }
body:not(.ui-s3) #cards.passive-mode #cards-list .card.sk-card { padding: 12px 8px 8px !important; }
body:not(.ui-s3) #cards.passive-mode #cards-list .card.sk-card .sk-ring, body:not(.ui-s3) #cards #cards-list .ch-card :is(.ch-ring, .ch-gem) { display: none !important; }
body:not(.ui-s3) #cards.passive-mode #cards-list .card.sk-card .card-art, body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card .ch-art {
  border-radius: 8px !important; background: rgba(255, 255, 255, .05) !important; box-shadow: none !important; }
body:not(.ui-s3) #cards.passive-mode #cards-list .card.sk-card .card-art > img { width: 82% !important; height: 82% !important; }
body:not(.ui-s3) #cards.passive-mode #cards-list .card.sk-card .card-name { width: auto !important; margin: 4px 0 2px !important; padding: 0 !important; background: none !important; box-shadow: none !important;
  clip-path: none !important; color: #fff !important; text-shadow: 0 2px 0 rgba(0, 0, 0, .55) !important; }
body:not(.ui-s3) #cards.passive-mode #cards-list .card.sk-card .card-name::before, body:not(.ui-s3) #cards.passive-mode #cards-list .card.sk-card .card-name::after { display: none !important; }
/* тип умения и редкость предмета — просто цветной текст */
body:not(.ui-s3) #cards.passive-mode #cards-list .card.sk-card :is(.card-rarity, .sk-up-tag), body:not(.ui-s3) #cards #cards-list .ch-card .ch-rar {
  background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; color: color-mix(in srgb, var(--stripe) 80%, #fff) !important;
  font-size: 10px !important; font-weight: 900 !important; letter-spacing: .8px; text-transform: uppercase; text-shadow: 0 1px 0 #000 !important; }
body:not(.ui-s3) #cards.passive-mode #cards-list .card.sk-card .sk-chips i { padding: 1px 4px !important; }
body:not(.ui-s3) #cards.passive-mode #cards-list .card.sk-card .sk-chips i::before { display: none !important; }
body:not(.ui-s3) #cards.passive-mode #cards-list .card.sk-card .card-desc { color: rgba(255, 255, 255, .85) !important; }
body:not(.ui-s3) #cards #cards-list .ch-card .ch-stat::before { background: rgba(255, 255, 255, .07) !important; -webkit-mask: none !important; mask: none !important; border-radius: 4px; }

/* кнопки справа (переброс, исключить, автовыбор): тёмная плитка вместо камня со мхом */
html body:not(.ui-s3) #cards #cards-tools :is(.tool-btn, .autopick-switch) {
  background: #1a1815 !important; border: 2px solid #0a0907 !important; border-image: none !important; border-radius: 10px !important; image-rendering: auto;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 3px 0 rgba(0, 0, 0, .5) !important; filter: none !important; }
html body:not(.ui-s3) #cards #cards-tools :is(.tool-btn, .autopick-switch)::before { display: none !important; }
html body:not(.ui-s3) #cards #cards-tools :is(.tool-btn, .autopick-switch):not(:disabled):hover { background: #24211c !important; }
html body:not(.ui-s3) #cards #cards-tools :is(.tool-btn, .autopick-switch) > span:not(.sw) b { color: #ece6d6 !important; text-shadow: none !important; }
html body:not(.ui-s3) #cards #cards-tools .tool-btn.banish.locked { filter: grayscale(.9) brightness(.75) !important; }

/* v-flat: подписи под числами в сундуке видны и на низких экранах (без них «✦ 2» непонятно что); длинная — в одну строку с многоточием */
@media (orientation: landscape) and (max-height: 400px) {
  body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card .ch-stat small { display: block; max-width: 92px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 9.5px; letter-spacing: 0; text-transform: none; }
}

/* ===== v-fonts (2026-10-18, проход по шрифтам): читаемость и раскладка текста ===== */
/* зелёные кнопки и выбранные вкладки болотного кита: тёмно-зелёный текст на ярко-зелёном не читался — белый с тёмной обводкой */
html.ui-swamp :is(.menu-btn.primary, .town-leave, .meta-buy, .et-choose, .seg-btn.on, .style-toggle.on, .set-tab.on, .et-tab.on, .camp-portal .cp-label, .tabbar .tab.on, .tabbar .tab.active),
html.ui-swamp .dock #dock-chest b, html.ui-swamp #cards .autopick-switch[aria-checked="true"] :is(b, small) {
  color: #fff !important; -webkit-text-stroke: 0; text-shadow: 0 1px 0 #0b2a04, 1px 0 0 #0b2a04, -1px 0 0 #0b2a04, 0 -1px 0 #0b2a04, 0 2px 2px rgba(0, 0, 0, .6) !important; }
/* награда босса: подписи под числами тоже видны (без них «0 ???», «+25% сами» непонятны) */
#cards.boss-ped #cards-list .ch-card .ch-stat small { display: block !important; max-width: 92px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 9.5px !important; letter-spacing: 0; text-transform: none; }
/* коллекция: подписи 8px → 9.5px; на низком экране панель по высоте экрана, сетка забирает остаток, «Назад» всегда видна */
#collection-grid small { font-size: 9.5px !important; }
@media (orientation: landscape) and (max-height: 520px) {
  #collection .menu-panel { height: calc(100dvh - 12px); max-height: none; box-sizing: border-box; }
  #collection .menu-panel > :is(.sheet-note, .collection-bans) { margin: 4px 0 !important; }
  #collection #collection-grid { flex: 1 1 0 !important; min-height: 0 !important; max-height: none !important; }
  #collection .menu-panel > .menu-btn { flex: none; }
}
/* лагерь: в карточке героя имя формы — строкой, ниже мелко уровень и мир (название мира уже в баннере) */
#menu-run b { display: block; line-height: 1.15; }
#menu-run small { display: block; margin-top: 2px; font-size: .9em; opacity: .85; line-height: 1.2; }
/* v-flat: без толстой рамки на картах умений есть место — на низких экранах описание в 3 строки, а не в 2 */
@media (orientation: landscape) and (max-height: 400px) {
  body:not(.ui-s3) #cards.passive-mode #cards-list .card.sk-card .card-desc { -webkit-line-clamp: 3 !important; }
}
/* персонаж (прокачка): на низком экране «Улучшить» и цена в одну строку — в столбик кнопку сжимало и текст уходил за низ экрана */
@media (orientation: landscape) and (max-height: 400px) {
  #meta .meta-buy { flex: none !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 10px !important; min-height: 50px !important; }
  #meta .meta-buy b { font-size: 16px !important; line-height: 1 !important; }
  #meta .meta-buy #meta-cost { font-size: 15px !important; line-height: 1 !important; margin: 0 !important; }
  #meta .meta-hint { display: none !important; }
}
/* лагерь вертикально: «Продолжить» и слизень выше — иначе луна над «Лунной лавкой» залезала на кнопку; подписи плиток помещаются в табличку (края 14→8px), текст ровно по центру */
@media (orientation: portrait) {
  .camp-menu .camp-portal { transform: translateY(-56px); }
  .camp-menu #menu-hero { translate: -50% calc(-100% - 56px) !important; }
  html.ui-swamp .camp-menu .camp-btn b { border-left-width: 8px !important; border-right-width: 8px !important; padding: 0 1px !important; font-size: 11px !important; }
}
/* v-flat, книжная: карты умений не от края до края и не вплотную; имя мельче, чтобы не переносилось на 2–3 строки */
@media (orientation: portrait) {
  body:not(.ui-s3) #cards.passive-mode #cards-list:has(.sk-card) { gap: 8px !important; padding: 0 12px !important; box-sizing: border-box; }
  body:not(.ui-s3) #cards.passive-mode #cards-list .card.sk-card .card-name { font-size: 17px !important; line-height: 1.1 !important; }
}
@media (orientation: portrait) { body:not(.ui-s3) #cards.passive-mode #cards-list .card.sk-card .card-desc { -webkit-line-clamp: 3 !important; } }
/* пауза, книжная: «Продолжить» упиралась в угол рамки — меньше отступ внутри и шрифт */
@media (orientation: portrait) { :is(#pause-go, #pause-town) { padding: 0 4px !important; font-size: 15px !important; gap: 4px !important; } }
/* персонаж, книжная: колонка вкладок не влезала по высоте (на 375×667 залезала на шапку и «Атаку») — вкладки в ряд под шапкой, прокачка под ними */
@media (orientation: portrait) {
  #meta .meta-tabs { top: 78px !important; bottom: auto !important; left: max(12px, var(--sa-left, 0px)) !important; right: max(12px, var(--sa-right, 0px)) !important; translate: none !important;
    flex-direction: row !important; justify-content: space-between !important; gap: 8px !important; height: auto !important; }
  #meta .meta-tabs .meta-tab { flex: 1 1 0 !important; max-width: 110px; margin: 0 !important; translate: none !important; }
  #meta .meta-right { top: 162px !important; }
}
@media (orientation: portrait) and (max-width: 370px) { :is(#pause-go, #pause-town) { font-size: 14px !important; } :is(#pause-go, #pause-town) img.ic { width: 1.1em !important; height: 1.1em !important; } }
/* награда босса на узком экране: подпись под числом не залезает на соседнее число */
#cards.boss-ped #cards-list .ch-card .ch-stats { flex-wrap: wrap !important; row-gap: 4px; }
#cards.boss-ped #cards-list .ch-card .ch-stat small { max-width: 70px !important; }
/* итоги забега: число в плитке не уходит под значок в правом верхнем углу (узкие плитки на телефоне) */
#results-fight .rf > b { display: block; padding-right: 20px; box-sizing: border-box; max-width: 100%; white-space: nowrap; }
@media (max-width: 400px) { #results-fight .rf > b { font-size: 17px !important; } }
/* итоги забега: «Ещё забег» — в той же болотной рамке и тем же шрифтом, что «В меню», только зелёная (как «Продолжить» в лагере) */
html.ui-swamp #results-again { border-width: 12px 26px 14px !important; border-image: url(assets/ui/swamp/btn-primary.png) 38 95 44 fill / 12px 26px 14px / 0 4px 3px stretch !important;
  padding: 2px 6px !important; min-height: 0 !important; height: auto !important; filter: drop-shadow(0 0 6px #7dff3a55) !important; transform: none !important;
  font-size: 15px !important; font-weight: 900 !important; gap: 6px !important; }
html.ui-swamp #results-again:active { border-image-source: url(assets/ui/swamp/btn-primary.png) !important; translate: 0 2px; }
html.ui-swamp #results-again img.ic { width: 1.1em !important; height: 1.1em !important; }
html.ui-swamp #results-ok { font-size: 15px !important; }
.results-stats div { gap: 6px; }
/* «Ты получил N предметов», книжная: карты по 3 в ряд с переносом (5 = 3 + 2), все видны сразу, а не одной строкой за края экрана */
@media (orientation: portrait) {
  #cards.gift-mode #cards-list { flex-wrap: wrap !important; justify-content: center !important; align-content: center !important; row-gap: 10px !important; column-gap: 8px !important;
    height: auto !important; max-height: none !important; overflow: visible !important; }
  #cards.gift-mode #cards-list .gift-card { flex: 0 0 calc((100% - 16px) / 3) !important; min-width: 0 !important; max-width: 124px !important; }
}

/* ===== v-boss-ring (2026-10-18, идея автора): босс — портрет в правом нижнем углу вместо правого кулака, здоровье кольцом вокруг;
   верхняя полоса с именем на время тап-боя скрыта (остаются только значки эффектов на боссе) ===== */
.boss-pads .pad.right { display: none; }
.boss-ring { position: absolute; right: max(14px, var(--sa-right, 0px)); bottom: 72px; width: 96px; height: 96px; }
.boss-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .55)); }
.boss-ring .br-track { fill: rgba(12, 9, 7, .8); stroke: #2c0f0c; stroke-width: 9; }
.boss-ring .br-hp { fill: none; stroke: #e8402c; stroke-width: 9; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset .2s; }
.boss-ring .br-shield { fill: none; stroke: #7fd8ff; stroke-width: 4; stroke-dasharray: 100; stroke-dashoffset: 100; }
.boss-ring .br-pic { position: absolute; left: calc(50% - 32px); top: calc(50% - 32px); width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  background-color: #1d140d; background-repeat: no-repeat; image-rendering: pixelated; box-shadow: inset 0 0 0 2px #000; }
.boss-ring .br-num { position: absolute; left: 50%; bottom: -10px; translate: -50% 0; padding: 1px 7px; border-radius: 8px; background: #14100a; box-shadow: 0 0 0 2px #e8402c;
  font: 900 12px/1.25 'Nunito', sans-serif !important; color: #fff; white-space: nowrap; }
.boss-ring .br-tap { position: absolute; left: 50%; top: -22px; translate: -50% 0; font: 900 12px/1 'Nunito', sans-serif !important; font-style: normal; color: #fff; white-space: nowrap;
  text-shadow: 0 1px 0 #000, 0 0 4px #000; animation: br-bob 1s ease-in-out infinite; }
@keyframes br-bob { 50% { translate: -50% -4px; } }
.boss-pads.urge .boss-ring { animation: br-pulse .5s ease-in-out infinite; }
.boss-pads.urge .boss-ring .br-tap { color: #ffe14a; }
@keyframes br-pulse { 50% { scale: 1.08; } }
.boss-ring.rage .br-hp { stroke: #ff2a2a; }
.boss-ring.rage svg { filter: drop-shadow(0 0 8px #ff2a2a); }
.boss-ring.shielded .br-num { box-shadow: 0 0 0 2px #7fd8ff; }
@media (prefers-reduced-motion: reduce) { .boss-ring, .boss-ring .br-tap { animation: none !important; } }
/* пока кольцо на экране — сверху без полосы и имени */
.arena:has(#boss-pads:not([hidden])) .boss-bar :is(.boss-pic, #boss-name, .boss-phase, .boss-bar-track, .boss-shield) { display: none !important; }
.arena:has(#boss-pads:not([hidden])) .boss-bar .boss-head { border: 0 !important; border-image: none !important; background: none !important; padding: 0 !important; box-shadow: none !important; }

/* «Сумка и стопки» на экране боя: стопки предметов по редкости и общие статы — слева под карточкой героя
   (чистый экран боя прятал всю полосу добычи; режим «Карточки» по-прежнему без полосы) */
.arena .scene-top .loot-strip.bag:not(:empty) { display: flex !important; position: absolute; z-index: 26; left: max(12px, var(--sa-left, 0px)); top: calc(max(6px, var(--sa-top, 0px)) + 78px);
  flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 8px 10px; max-width: min(46vw, 300px); margin: 0; }
.arena .scene-top .loot-strip.bag .bag-sum { display: block !important; flex-basis: 100%; text-align: left; font-size: 10.5px; }
.arena .scene-top .loot-strip.bag .bag-fan { justify-content: flex-start; }
@media (orientation: portrait) { .arena .scene-top .loot-strip.bag:not(:empty) { max-width: calc(100% - 24px); gap: 6px 8px; } }
/* книжная: левый кулак убран (справа — кольцо босса), стопки «Сумки» — в нижней панели под сундуком */
@media (orientation: portrait) { .boss-pads .pad.left { display: none !important; } }
#pp > .loot-strip.bag { position: static !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 8px 12px; max-width: none; margin: 8px 12px 2px; }
#pp > .loot-strip.bag:empty { display: none !important; }
#pp > .loot-strip.bag .stack { width: 40px; height: 44px; }
#pp > .loot-strip.bag .bag-sum { display: block !important; flex-basis: 100%; text-align: center; font-size: 11.5px; }

/* «Выбери путь» (2026-10-18, по просьбе автора): пути — отдельными карточками с зазорами и рамкой цвета пути, а не стеной впритык; заголовок — над карточками */
#evolution.path-pick #evolution-options { gap: 10px !important; box-sizing: border-box;
  padding: calc(max(2px, var(--sa-top, 0px)) + clamp(46px, 11vh, 84px) + 30px) max(12px, var(--sa-right, 0px)) max(12px, var(--sa-bottom, 0px)) max(12px, var(--sa-left, 0px)) !important; }
#evolution .path-card { border-radius: 12px;
  box-shadow: 0 0 0 2px #000, 0 0 0 4px color-mix(in srgb, var(--pc) 70%, #000), 0 6px 0 4px rgba(0, 0, 0, .55) !important; }
#evolution .path-card:hover, #evolution .path-card:focus-visible { box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--pc), 0 0 22px 4px color-mix(in srgb, var(--pc) 45%, transparent), 0 6px 0 4px rgba(0, 0, 0, .55) !important; }
#evolution .path-card.holding { box-shadow: 0 0 0 2px #000, 0 0 0 5px var(--pc), 0 0 34px 8px color-mix(in srgb, var(--pc) 60%, transparent) !important; }
@media (orientation: landscape) and (max-height: 520px) {
  #evolution.path-pick #evolution-options { padding-top: calc(max(2px, var(--sa-top, 0px)) + 48px) !important; gap: 10px !important; }
}
@media (orientation: portrait) {
  #evolution.path-pick #evolution-options { padding-top: calc(max(2px, var(--sa-top, 0px)) + clamp(44px, 7.5vh, 70px) + 32px) !important; }
}
@media (orientation: landscape) and (max-height: 400px) { #evolution .path-card .pc-name { font-size: 12px !important; padding: 4px 6px 3px !important; } }
@media (orientation: portrait) and (max-width: 370px) { #evolution .path-card .pc-name { font-size: 12.5px !important; padding: 4px 5px 3px !important; } }

/* «Тапай, чтобы вырасти» (2026-10-18): прогресс — кольцо из дуг вокруг героя (дуга на тап: удачный — золото, «мимо» — серый);
   прибавка всплывает над героем; окно выбора умений под ним не просвечивает */
.evo-tap { background: radial-gradient(circle at 50% 50%, rgba(60, 120, 50, calc(.45 + .4 * var(--p))), transparent 68%), #060c08 !important; }
body:has(.evo-tap) #cards, body:has(.evo-tap) #evolution { visibility: hidden !important; }
.evo-tap-hero .evo-tap-ring { position: absolute; inset: -12%; width: 124%; height: 124%; transform: rotate(-90deg); overflow: visible; pointer-events: none; }
.evo-tap-ring .etr-seg { fill: none; stroke: rgba(157, 255, 122, .22); stroke-width: 5; stroke-linecap: round; transition: stroke .15s; }
.evo-tap-ring .etr-seg.lucky { stroke: #ffd25e; filter: drop-shadow(0 0 3px #ffd25e); }
.evo-tap-ring .etr-seg.miss { stroke: #8a8a8a; }
.evo-tap-hero .evo-tap-plus { left: 50%; bottom: 104%; rotate: 0deg; font-size: 15px; z-index: 2; }
.evo-tap-gain { margin-top: 14px; }
.evo-tap-hero { margin: 26px 0 10px; }
.evo-tap-hero .evo-tap-plus { bottom: 86%; }
/* окно роста: герой вписан в круг под кольцом (портрет обрезан по поясу — прямой срез снизу смотрелся криво); тёмный диск — медальон */
.evo-tap-hero::before { content: ''; position: absolute; inset: -3%; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(70, 140, 55, .35), rgba(6, 12, 8, .9) 70%); box-shadow: inset 0 0 0 2px rgba(157, 255, 122, .18); }
.evo-tap-hero img { -webkit-mask: radial-gradient(circle at 50% 50%, #000 49%, transparent 53%); mask: radial-gradient(circle at 50% 50%, #000 49%, transparent 53%); }
/* сундук, книжная: плашки чисел — по левому краю под именем, как имя и описание (стояли по центру и казались сдвинутыми) */
@media (orientation: portrait) {
  #cards:not(.boss-ped) #cards-list .ch-card .ch-stats { justify-content: flex-start !important; }
  #cards:not(.boss-ped) #cards-list .ch-card .ch-body { align-items: flex-start !important; text-align: left; }
}
/* сундук: у числа без значка подпись тоже под числом, как у остальных плашек */
#cards #cards-list .ch-card .ch-stat:not(:has(.fx-ic)) { grid-template-columns: auto; }
#cards #cards-list .ch-card .ch-stat:not(:has(.fx-ic)) small { grid-column: 1; grid-row: 2; }

/* ===== v-chest2 (2026-10-18, просьбы автора по «Крупному сундуку»): без квадратной подложки под предметом — свечение цвета редкости;
   лёгкий бегущий блик по карте; круглая «i»; имя тоньше; в книжной — числа одной строкой, редкость закладкой над картой,
   заголовок у верха экрана, подсказка читаемой плашкой ===== */
body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card .ch-art { background: radial-gradient(circle closest-side, color-mix(in srgb, var(--rc) 50%, transparent) 0, color-mix(in srgb, var(--rc) 18%, transparent) 55%, transparent 100%) !important; border-radius: 50% !important; }
body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card .ch-art img { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--rc) 70%, transparent)) drop-shadow(0 3px 2px rgba(0, 0, 0, .6)); animation: ch2-glow 2.6s ease-in-out infinite; }
@keyframes ch2-glow { 50% { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--rc) 85%, transparent)) drop-shadow(0 3px 2px rgba(0, 0, 0, .6)); } }
body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card {
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .07) 48%, rgba(255, 255, 255, .02) 54%, transparent 62%) 120% 0 / 260% 100% no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--stripe) 14%, #1f1d19) 0, #1a1815 40%, #131210 100%) !important;
  box-shadow: inset 0 6px 0 var(--stripe), inset 0 0 0 1px color-mix(in srgb, var(--stripe) 30%, transparent), 0 0 16px color-mix(in srgb, var(--stripe) 22%, transparent), 0 4px 0 rgba(0, 0, 0, .5) !important;
  animation: ch2-sheen 5s ease-in-out infinite; }
body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card:nth-child(2) { animation-delay: 1.2s; }
body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card:nth-child(3) { animation-delay: 2.4s; }
@keyframes ch2-sheen { 0%, 55% { background-position: 120% 0, 0 0; } 100% { background-position: -40% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { body:not(.ui-s3) #cards #cards-list .ch-card, body:not(.ui-s3) #cards #cards-list .ch-card .ch-art img { animation: none !important; } }
/* имя — тоньше: Nunito 800 без толстой обводки */
body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card .ch-body .ch-name { font-family: 'Nunito', sans-serif !important; font-weight: 800 !important; -webkit-text-stroke: 0 !important; text-shadow: 0 1px 0 #000, 0 0 6px rgba(0, 0, 0, .6) !important; }
/* «i» — круглая, с тонкой светлой обводкой */
body:not(.ui-s3) #cards #cards-list .ch-card .ch-info { width: 22px !important; height: 22px !important; border-radius: 50% !important; display: grid !important; place-items: center;
  background: rgba(0, 0, 0, .5) !important; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .55) !important; font: italic 800 12px/1 Georgia, serif !important; color: #fff !important; }

@media (orientation: portrait) {
  /* заголовок и карты — от верха экрана, а не по центру с пустотой сверху */
  body:not(.ui-s3) #cards:has(.ch-card):not(.boss-ped) { align-items: flex-start !important; padding-top: max(10px, var(--sa-top, 0px)) !important; }
  /* подсказка — читаемой плашкой */
  body:not(.ui-s3) #cards:has(.ch-card):not(.boss-ped) #cards-sub { display: table; margin: 4px auto 0 !important; padding: 4px 12px; border-radius: 999px; background: rgba(0, 0, 0, .55);
    color: #f1ecd9 !important; font-size: 13px !important; font-weight: 700; }
  body:not(.ui-s3) #cards:has(.ch-card):not(.boss-ped) #cards-list { gap: 26px !important; margin-top: 26px !important; }
  /* редкость — закладкой над правым краем карты, цвета полосы */
  body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card .ch-rar { position: absolute !important; top: -19px; right: 14px; margin: 0 !important; padding: 4px 10px 3px !important;
    border-radius: 8px 8px 0 0 !important; background: var(--stripe) !important; color: #11140d !important; text-shadow: none !important; font-size: 10px !important; font-weight: 900 !important; letter-spacing: .8px; }
  /* числа — одной строкой текста: «3-й удар · ×2 урон», без подложек */
  body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card .ch-stats { display: block !important; margin: 3px 0 2px !important; line-height: 1.3; }
  body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card .ch-stat { display: inline !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
  body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card .ch-stat::before { content: none !important; display: none !important; }
  body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card .ch-stat + .ch-stat { margin-left: 4px; }
  body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card .ch-stat:not(:last-child)::after { content: '·' !important; display: inline !important; position: static !important; margin: 0 2px 0 8px; color: rgba(255, 255, 255, .45); font-weight: 900; background: none !important; }
  body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card .ch-stat .fx-ic { display: inline-grid !important; vertical-align: -2px; width: 14px !important; height: 14px !important; margin-right: 2px; }
  body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card .ch-stat b { display: inline !important; font-size: 15px !important; color: #fff6a8 !important; }
  body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card .ch-stat small { display: inline !important; margin-left: 3px; font: 700 13px/1.3 'Nunito', sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; color: #d8d2c0 !important; max-width: none !important; }
}

/* «Новый облик» (2026-10-18): без капель слизи сверху экрана, на панели и на кнопке; «Дальше!» — кодом, в стиле плашек-пилюль окна */
#newlook::before, #newlook .newlook-panel::before, #newlook #newlook-ok::after, #newlook #newlook-ok::before { content: none !important; display: none !important; }
#newlook #newlook-ok { position: relative; box-sizing: border-box; height: 52px !important; min-height: 0 !important; width: 100% !important; max-width: 340px; margin: 6px auto 0 !important; padding: 0 20px !important;
  border: 0 !important; border-image: none !important; border-radius: 999px !important; overflow: hidden; filter: none !important;
  background: linear-gradient(180deg, #9cf86a 0%, #4fc731 48%, #2f8f1d 100%) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -4px 0 rgba(0, 0, 0, .22), 0 0 0 2px #0c2408, 0 0 0 4px rgba(125, 255, 90, .55), 0 0 18px rgba(125, 255, 90, .35), 0 6px 0 3px rgba(0, 0, 0, .45) !important;
  font: 900 21px/1 'Nunito', sans-serif !important; letter-spacing: .5px; color: #fff !important; -webkit-text-stroke: 0 !important;
  text-shadow: 0 2px 0 #1a4a0e, 1px 0 0 #1a4a0e, -1px 0 0 #1a4a0e, 0 -1px 0 #1a4a0e !important; transition: translate .08s, box-shadow .08s; }
/* мягкий блик, пробегающий по кнопке */
#newlook #newlook-ok { background-image: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .28) 45%, transparent 55%), linear-gradient(180deg, #9cf86a 0%, #4fc731 48%, #2f8f1d 100%) !important;
  background-size: 250% 100%, 100% 100% !important; background-repeat: no-repeat !important; animation: nl-sheen 3.2s ease-in-out infinite; }
@keyframes nl-sheen { 0%, 60% { background-position: 130% 0, 0 0; } 100% { background-position: -30% 0, 0 0; } }
#newlook #newlook-ok:active { translate: 0 3px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), inset 0 -2px 0 rgba(0, 0, 0, .22), 0 0 0 2px #0c2408, 0 0 0 4px rgba(125, 255, 90, .55), 0 3px 0 3px rgba(0, 0, 0, .45) !important; }
@media (prefers-reduced-motion: reduce) { #newlook #newlook-ok { animation: none; } }

/* ===== v-pill (2026-10-18, по просьбе автора): все кнопки болотного кита — кодом, пилюлями, без картинок со мхом и потёками.
   Зелёная пилюля — главное действие и выбранная вкладка/вариант; тёмная — второстепенное и невыбранное; красная — вызов босса.
   Капли слизи, нарисованные кодом (фон и панель «Нового облика», под «Забрать», под окном предмета), убраны. ===== */
html.ui-swamp body:not(.ui-s3) :is(.menu-btn, .town-leave, .meta-buy, .et-choose, .seg-btn, .style-toggle, .set-tab, .et-tab, .et-anim, .sound-toggle:not(.gear-btn),
  .tabbar .tab, .camp-portal .cp-label, #results-again, #pause-go, #pause-town, #boss-call, #newlook-ok, .dock #dock-chest, #cards.gift-mode #cards-close:not(.hidden)) {
  border: 0 !important; border-image: none !important; border-radius: 999px !important; filter: none !important;
  font-family: 'Nunito', sans-serif !important; font-weight: 900 !important; -webkit-text-stroke: 0 !important; letter-spacing: .02em;
  min-height: 40px; padding: 8px 20px !important; box-sizing: border-box; transition: translate .08s, filter .15s; }
html.ui-swamp body:not(.ui-s3) :is(.menu-btn, .town-leave, .meta-buy, .et-choose, .seg-btn, .style-toggle, .set-tab, .et-tab, .et-anim, .sound-toggle:not(.gear-btn),
  .tabbar .tab, .camp-portal .cp-label, #results-again, #pause-go, #pause-town, #boss-call, #newlook-ok, .dock #dock-chest, #cards.gift-mode #cards-close:not(.hidden)):active { translate: 0 2px; }
/* зелёная */
html.ui-swamp body:not(.ui-s3) :is(.menu-btn.primary, .town-leave, .meta-buy, .et-choose, .seg-btn.on, .style-toggle.on, .set-tab.on, .et-tab.on, .tabbar .tab.on, .tabbar .tab.active,
  .camp-portal .cp-label, #results-again, #pause-go, #newlook-ok, .dock #dock-chest, #cards.gift-mode #cards-close:not(.hidden)) {
  background: linear-gradient(180deg, #9cf86a 0%, #4fc731 48%, #2f8f1d 100%) !important; color: #fff !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 rgba(0, 0, 0, .22), 0 0 0 2px #0c2408, 0 0 0 3.5px rgba(125, 255, 90, .5), 0 0 14px rgba(125, 255, 90, .28), 0 4px 0 2px rgba(0, 0, 0, .45) !important;
  text-shadow: 0 2px 0 #1a4a0e, 1px 0 0 #1a4a0e, -1px 0 0 #1a4a0e, 0 -1px 0 #1a4a0e !important; }
html.ui-swamp body:not(.ui-s3) .dock #dock-chest :is(b, small) { color: #fff !important; text-shadow: 0 1px 0 #1a4a0e, 0 0 3px #1a4a0e !important; }
/* тёмная */
html.ui-swamp body:not(.ui-s3) :is(.menu-btn:not(.primary), .seg-btn:not(.on), .style-toggle:not(.on), .set-tab:not(.on), .et-tab:not(.on), .et-anim, .sound-toggle:not(.gear-btn),
  .tabbar .tab:not(.on):not(.active), #pause-town) {
  background: linear-gradient(180deg, #2c3626 0%, #1b2217 100%) !important; color: #e9f6d6 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -2px 0 rgba(0, 0, 0, .3), 0 0 0 2px #0a1207, 0 0 0 3.5px rgba(125, 255, 90, .22), 0 4px 0 2px rgba(0, 0, 0, .45) !important;
  text-shadow: 0 1px 0 #000 !important; }
/* красная — «Вызвать босса» */
html.ui-swamp body:not(.ui-s3) #boss-call { background: linear-gradient(180deg, #ff8a6a 0%, #e0402a 50%, #9a1f14 100%) !important; color: #fff !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 0 0 2px #2a0805, 0 0 0 3.5px rgba(255, 110, 80, .5), 0 4px 0 2px rgba(0, 0, 0, .45) !important;
  text-shadow: 0 2px 0 #4a0e08, 1px 0 0 #4a0e08, -1px 0 0 #4a0e08 !important; }
/* крупные главные кнопки — выше */
html.ui-swamp body:not(.ui-s3) :is(.menu-btn.primary, .camp-portal .cp-label, #results-again, #newlook-ok, .meta-buy, #cards.gift-mode #cards-close:not(.hidden)) { min-height: 50px; padding: 10px 26px !important; }
/* капли и потёки: ни на кнопках, ни на панелях */
html.ui-swamp :is(.menu-btn, .camp-portal .cp-label, #results-again, #pause-go, #pause-town, #newlook-ok, .meta-buy, .dock #dock-chest)::after,
.newlook::before, .newlook-panel::before, #cards.gift-mode #cards-close::after, .info-modal.wide .info-card::after { content: none !important; display: none !important; }
/* дорожка вкладок — тоже кодом: тёмная капсула вместо картинки с мхом и потёками */
html.ui-swamp body:not(.ui-s3) :is(.set-tabs, .et-tabs, .tabbar) { border: 0 !important; border-image: none !important; border-radius: 999px !important; padding: 5px !important; gap: 6px !important;
  background: rgba(6, 12, 8, .7) !important; box-shadow: inset 0 0 0 1.5px rgba(125, 255, 90, .18) !important; }
/* панели меню (настройки, коллекция, лавка, итоги, торговец, эволюция, город) — кодом: тёмная скруглённая панель с зелёным кантом, без потёков на углах */
html.ui-swamp body:not(.ui-s3) :is(.menu-panel, .results-panel, .merchant-panel, .evolution-panel, .town-panel) {
  border: 0 !important; border-image: none !important; border-radius: 18px !important; padding: 16px 18px !important;
  background: linear-gradient(180deg, #1a251b 0%, #0f1610 100%) !important;
  box-shadow: inset 0 0 0 2px rgba(125, 255, 90, .38), inset 0 1px 0 4px rgba(255, 255, 255, .03), 0 0 0 2px #050805, 0 0 26px rgba(125, 255, 90, .12), 0 12px 30px rgba(0, 0, 0, .6) !important; }
html.ui-swamp body:not(.ui-s3) #evolution.path-pick .evolution-panel { border-radius: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
@media (orientation: landscape) and (max-height: 520px) { html.ui-swamp body:not(.ui-s3) .camp-portal .cp-label { min-height: 40px !important; padding: 6px 24px !important; } }

/* ===== v-fut (2026-10-18, референс автора — карточки FUT): карта сундука — форма со срезанными углами, глубокий градиент цвета редкости,
   серебристые голографические осколки справа (переливаются), светлая металлическая обводка по форме и свечение цвета редкости.
   Форма и заливка — в ::before (обрезан clip-path), обводка и свечение — drop-shadow на карте, поэтому они повторяют срезы ===== */
body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card {
  --cut: 16px; --cutb: 22px;
  background: none !important; border: 0 !important; box-shadow: none !important; animation: none !important; isolation: isolate;
  filter: drop-shadow(0 0 .6px rgba(250, 244, 255, .95)) drop-shadow(0 0 .6px rgba(250, 244, 255, .95)) drop-shadow(0 0 1.5px color-mix(in srgb, var(--rc) 60%, #fff))
          drop-shadow(0 0 14px color-mix(in srgb, var(--rc) 45%, transparent)) drop-shadow(0 6px 6px rgba(0, 0, 0, .55)) !important; }
body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cutb)), calc(100% - var(--cutb)) 100%, var(--cutb) 100%, 0 calc(100% - var(--cutb)), 0 var(--cut));
  background:
    linear-gradient(112deg, transparent 52%, rgba(255, 255, 255, .0) 55%, rgba(236, 228, 255, .5) 57.5%, rgba(170, 150, 255, .14) 61%, transparent 63%),
    linear-gradient(98deg, transparent 63%, rgba(255, 255, 255, .32) 65.5%, rgba(205, 195, 255, .08) 69%, transparent 71%),
    linear-gradient(126deg, transparent 70%, rgba(255, 255, 255, .42) 73%, rgba(190, 175, 255, .1) 76%, transparent 78%),
    linear-gradient(84deg, transparent 80%, rgba(255, 255, 255, .22) 83%, transparent 86%),
    radial-gradient(120% 90% at 22% 18%, color-mix(in srgb, var(--rc) 55%, transparent), transparent 62%),
    linear-gradient(160deg, color-mix(in srgb, var(--rc) 62%, #170c35) 0%, color-mix(in srgb, var(--rc) 30%, #110828) 48%, #0b061c 100%);
  background-size: 220% 100%, 220% 100%, 220% 100%, 220% 100%, 100% 100%, 100% 100%; background-repeat: no-repeat;
  background-position: 70% 0, 70% 0, 70% 0, 70% 0, 0 0, 0 0;
  animation: fut-holo 6s ease-in-out infinite alternate; }
body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card:nth-child(2)::before { animation-delay: -2s; }
body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card:nth-child(3)::before { animation-delay: -4s; }
@keyframes fut-holo { from { background-position: 92% 0, 86% 0, 95% 0, 90% 0, 0 0, 0 0; } to { background-position: 48% 0, 56% 0, 44% 0, 52% 0, 0 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { body:not(.ui-s3) #cards #cards-list .ch-card::before { animation: none !important; } }
/* книжная: карта — горизонтальная плита, срезы меньше */
@media (orientation: portrait) { body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card { --cut: 12px; --cutb: 12px; } }
/* закладка редкости — в тон карте, со светлым кантом */
@media (orientation: portrait) {
  body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card .ch-rar { background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 85%, #fff), color-mix(in srgb, var(--rc) 70%, #000)) !important;
    color: #fff !important; text-shadow: 0 1px 0 rgba(0, 0, 0, .55) !important; }
}
/* v-fut: ярче осколки, глубже фон */
body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card::before {
  background:
    conic-gradient(from 205deg at 96% 4%, transparent 0deg, rgba(255, 255, 255, .55) 6deg, rgba(210, 200, 255, .18) 12deg, transparent 16deg, transparent 22deg, rgba(255, 255, 255, .4) 26deg, transparent 31deg, transparent 40deg, rgba(225, 215, 255, .3) 43deg, transparent 47deg),
    linear-gradient(112deg, transparent 50%, rgba(255, 255, 255, .0) 53%, rgba(245, 240, 255, .75) 56%, rgba(185, 165, 255, .25) 60%, transparent 63%),
    linear-gradient(97deg, transparent 62%, rgba(255, 255, 255, .55) 65%, rgba(210, 200, 255, .15) 69%, transparent 72%),
    linear-gradient(128deg, transparent 69%, rgba(255, 255, 255, .65) 72.5%, rgba(195, 180, 255, .18) 76%, transparent 79%),
    linear-gradient(82deg, transparent 79%, rgba(255, 255, 255, .38) 82.5%, transparent 86%),
    radial-gradient(110% 80% at 24% 22%, color-mix(in srgb, var(--rc) 48%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--rc) 50%, #1a0c3c) 0%, color-mix(in srgb, var(--rc) 22%, #0f0626) 50%, #070316 100%) !important;
  background-size: 100% 100%, 220% 100%, 220% 100%, 220% 100%, 220% 100%, 100% 100%, 100% 100% !important;
  background-repeat: no-repeat !important; }
@keyframes fut-holo { from { background-position: 0 0, 92% 0, 86% 0, 95% 0, 90% 0, 0 0, 0 0; } to { background-position: 0 0, 48% 0, 56% 0, 44% 0, 52% 0, 0 0, 0 0; } }
/* v-fut: перебить старые фон/рамку/полосу карты (у прежнего правила селектор сильнее) */
html body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .card.ch-card.ch-card.ch-card { background: none !important; border: 0 !important; border-image: none !important; box-shadow: none !important; animation: none !important; }
/* осколки — гранями с чёткими краями (как стекло), а не лучами */
body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card::before {
  background:
    linear-gradient(118deg, transparent 54%, rgba(255, 255, 255, .5) 54.3%, rgba(220, 210, 255, .2) 60%, rgba(255, 255, 255, .06) 66%, transparent 66.3%),
    linear-gradient(100deg, transparent 63%, rgba(255, 255, 255, .42) 63.3%, rgba(200, 188, 255, .14) 70%, transparent 70.3%),
    linear-gradient(132deg, transparent 70%, rgba(255, 255, 255, .6) 70.3%, rgba(210, 200, 255, .22) 76%, transparent 76.3%),
    linear-gradient(76deg, transparent 77%, rgba(255, 255, 255, .34) 77.3%, rgba(190, 175, 255, .1) 83%, transparent 83.3%),
    linear-gradient(150deg, transparent 82%, rgba(255, 255, 255, .45) 82.3%, transparent 88%),
    radial-gradient(110% 80% at 24% 22%, color-mix(in srgb, var(--rc) 48%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--rc) 50%, #1a0c3c) 0%, color-mix(in srgb, var(--rc) 22%, #0f0626) 50%, #070316 100%) !important;
  background-size: 200% 100%, 200% 100%, 200% 100%, 200% 100%, 200% 100%, 100% 100%, 100% 100% !important; }
@keyframes fut-holo { from { background-position: 100% 0, 92% 0, 100% 0, 96% 0, 100% 0, 0 0, 0 0; } to { background-position: 62% 0, 66% 0, 58% 0, 64% 0, 60% 0, 0 0, 0 0; } }
/* v-fut: осколки — неподвижные грани в правой половине; переливается отдельный бегущий блик */
body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card::before {
  background:
    linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .22) 42%, transparent 54%),
    linear-gradient(118deg, transparent 56%, rgba(255, 255, 255, .55) 56.4%, rgba(220, 210, 255, .2) 63%, rgba(255, 255, 255, .05) 69%, transparent 69.4%),
    linear-gradient(100deg, transparent 66%, rgba(255, 255, 255, .45) 66.4%, rgba(200, 188, 255, .14) 73%, transparent 73.4%),
    linear-gradient(134deg, transparent 72%, rgba(255, 255, 255, .62) 72.4%, rgba(210, 200, 255, .22) 79%, transparent 79.4%),
    linear-gradient(74deg, transparent 80%, rgba(255, 255, 255, .36) 80.4%, rgba(190, 175, 255, .1) 87%, transparent 87.4%),
    linear-gradient(150deg, transparent 86%, rgba(255, 255, 255, .48) 86.4%, transparent 93%),
    radial-gradient(110% 80% at 24% 22%, color-mix(in srgb, var(--rc) 48%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--rc) 50%, #1a0c3c) 0%, color-mix(in srgb, var(--rc) 22%, #0f0626) 50%, #070316 100%) !important;
  background-size: 300% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
  background-position: 120% 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important; background-repeat: no-repeat !important;
  animation: fut-sheen 5s ease-in-out infinite !important; }
body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card:nth-child(2)::before { animation-delay: -1.7s !important; }
body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card:nth-child(3)::before { animation-delay: -3.4s !important; }
@keyframes fut-sheen { 0%, 50% { background-position: 130% 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } 100% { background-position: -30% 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } }
@media (orientation: portrait) { body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card .ch-stats { white-space: normal !important; flex-wrap: wrap !important; overflow: visible !important; max-width: 100%; }
  body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card .ch-stat { white-space: nowrap; } }
@media (orientation: portrait) { body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card .ch-stat { display: inline-block !important; } }

/* критик, раздел 1: совет после проигрыша — заметнее кода сессии; код — мелко */
.results-tip { display: inline-block; margin-top: 6px; font-size: 14px; font-weight: 700; color: #ffe48a; }
#results .session-code { opacity: .6; }
#results .session-code b { font-size: 13px !important; letter-spacing: .08em; }
/* критик, раздел 1: низ портрета — без дублей: строка статов уходит, блок «Предметы» прячется, когда предметы уже лежат стопками в сумке */
@media (orientation: portrait) {
  #pp > .loot-strip.bag .bag-sum { display: none !important; }
  #pp:has(> .loot-strip.bag:not(:empty)) .pp-body > h3:nth-of-type(3), #pp:has(> .loot-strip.bag:not(:empty)) #pp-items { display: none !important; }
}
/* критик, раздел 2: верх портрета — символы и «Вызвать босса» под строкой мира, а не на полоске здоровья и золоте */
@media (orientation: portrait) {
  .arena:not(.boss-fight) .scene-top .sym-bar { order: 2; align-self: flex-end; margin-right: 6px; }
  .arena:not(.boss-fight) .scene-top .boss-call { order: 3; align-self: flex-end; margin-right: 6px; }
  .arena .scene-top .world { font-size: 12px; color: #fff4d6; }
}
/* «Вызвать босса» мигает первые секунды, дальше стоит спокойно: фарм может длиться минуты */
.boss-call { animation-iteration-count: 4; }
/* бой с боссом: всё о боссе — на кольце; сверху пусто (имени и таймера нет: босс не уходит по времени, после 35 с он «устаёт») */
.arena:has(#boss-pads:not([hidden])) .boss-bar { display: none !important; }
.boss-pads { z-index: 1500; }   /* кольцо над призванными монстрами */
.boss-ring.rage::after { content: 'ЯРОСТЬ'; position: absolute; left: 50%; top: -40px; translate: -50% 0; padding: 1px 6px; border-radius: 6px;
  font: 900 10px/1.4 'Rubik', system-ui, sans-serif; letter-spacing: .08em; color: #fff; background: #c81e1e; box-shadow: 0 0 0 1.5px #1d1a14; white-space: nowrap; }
/* одна подсказка тапать: «👆 тапай» на кольце, плашка «Тапай где угодно! Босс звереет» — лишняя */
.arena:has(#boss-pads:not([hidden])) .boss-tap-hint { display: none !important; }
/* мало здоровья — полоска красная и мигает (в ките style3 заливка картинкой, поэтому через фильтр) */
body.ui-s3 #arena .hero-card.low .hp-line #hp-line-fill, #arena .hero-card.low .hp-line #hp-line-fill { filter: hue-rotate(-95deg) saturate(1.8) brightness(1.05); animation: hp-low 1s ease-in-out infinite; }
@keyframes hp-low { 50% { filter: hue-rotate(-95deg) saturate(1.8) brightness(1.5); } }
/* критик, раздел 2: веер предметов в нижней панели — ровной сеткой в ширину экрана, без наклона и обрезанных краёв */
#pp > .loot-strip.bag .bag-fan { flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 100%; box-sizing: border-box; }
#pp > .loot-strip.bag .fan-item { rotate: 0deg; width: 64px; }
#pp > .loot-strip.bag .fan-item b { font-size: 10px; line-height: 1.1; }
/* умения в панели: кольцо перезарядки, готовое — светится, тап — описание */
#pp .pz-tile.skill { cursor: pointer; }
#pp .pz-tile.skill img { box-shadow: 0 0 0 3px #3a3020; }
#pp .pz-tile.skill::before { content: ''; position: absolute; top: -3px; left: 50%; width: 52px; height: 52px; translate: -50% 0; border-radius: 50%;
  background: conic-gradient(#ffd25e calc(var(--p, 100) * 1%), #3a3020 0); }
#pp .pz-tile.skill img { position: relative; }
#pp .pz-tile.skill.ready img { box-shadow: 0 0 10px #ffd25e99; }
#pp .pz-tile.skill.fired img { animation: sk-fired .45s ease-out; }
@keyframes sk-fired { 30% { scale: 1.18; filter: brightness(1.8); } }
/* счётчик формы («Алый пир 0/6») — под рядом символов, а не поверх него */
@media (orientation: portrait) {
  .arena:not(.boss-fight) .evo-status { top: calc(max(6px, var(--sa-top)) + 118px) !important; }
  .arena:not(.boss-fight):has(.sym-bar:empty) .evo-status { top: calc(max(6px, var(--sa-top)) + 92px) !important; }
}
/* бой с боссом в портрете: полосы босса сверху нет — символы опускаем под шапку */
@media (orientation: portrait) { .arena:has(#boss-pads:not([hidden])) .scene-top .sym-bar { margin-top: 72px; } }
/* «БОСС ПОВЕРЖЕН!» гаснет, когда открылась награда, — не лежит полупрозрачно поверх карт */
body:has(#cards:not(.hidden)) .fx-bossdown { opacity: 0 !important; transition: opacity .25s; }
/* авторежимы: пояснение к тапу по боссу и совет про сундук перед логовом */
.boss-tap-intro em { display: block; margin-top: 4px; font-style: normal; font-size: 13px; font-weight: 700; color: #ffe9b0; text-shadow: 0 2px 0 #000; }
.fx-bossbanner .bb-tip { margin-top: 4px; font-style: normal; font-size: 12px; font-weight: 800; color: #ffe48a; }
/* символ на карте сундука: прогресс «3→4/5»; карта, открывающая ступень, — золотая рамка и подпись бонуса (критик, раздел 5) */
#cards #cards-list .ch-card .ch-sym { flex-wrap: wrap; }
#cards #cards-list .ch-card .ch-sym em { font-style: normal; color: #fff4d6; opacity: .85; }
#cards #cards-list .ch-card .ch-sym.up { padding: 3px 6px; border-radius: 6px; color: #2a1c00; background: linear-gradient(180deg, #ffe48a, #f2b42c); box-shadow: 0 0 10px #ffd25e88; }
#cards #cards-list .ch-card .ch-sym.up em { color: #2a1c00; }
#cards #cards-list .ch-card .ch-sym small { flex-basis: 100%; margin-top: 2px; font-size: 10px; font-weight: 800; line-height: 1.15; }
#cards #cards-list .ch-card.sym-up { box-shadow: 0 0 0 2px #ffd25e, 0 0 16px #ffd25e77 !important; }
@media (orientation: landscape) and (max-height: 520px) { #cards #cards-list .ch-card .ch-sym.up { display: inline-flex; } }
/* критик, раздел 5: блок «Символ» в окне предмета (новая разметка im2) — иконка строкой, счётчик отдельно, подпись ниже */
.im2-extra { margin-top: 8px; font-size: 12px; text-align: left; }
.im2-extra .card-sym { display: block; margin: 4px 0; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc, #ffd25e) 45%, transparent); }
.im2-extra .card-sym .combo-h { display: block; font-size: 11px; font-weight: 900; color: var(--sc, #ffd25e); }
.im2-extra .card-sym .sym-row { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.im2-extra .card-sym .sym-row .slot { width: 24px; height: 24px; flex: none; display: grid; place-items: center; }
.im2-extra .card-sym .sym-row img { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }
.im2-extra .card-sym .sym-row em { margin-left: auto; font-style: normal; font-weight: 900; color: #fff4d6; }
.im2-extra .card-sym .sym-note { display: block; font-size: 11.5px; color: #e6dcc0; }
.im2-extra .card-sym.up { box-shadow: inset 0 0 0 2px #ffd25e, 0 0 10px #ffd25e55; }
/* подарок договора на узком экране: текст не мельче 11 px */
@media (max-width: 480px) { #cards.gift-mode #cards-list .gift-card :is(.card-desc, .card-rarity, .card-name, small, .tcg-bot, .link-sym, .link-combo) { font-size: max(11px, 1em) !important; } }
/* длинный заголовок окна выбора («Выбор мудреца: редкий предмет») переносится, а не вылезает за экран */
#cards .cards-title { white-space: normal !important; overflow-wrap: anywhere; max-width: calc(100vw - 24px); }
@media (max-width: 480px) { #cards .cards-title { font-size: clamp(16px, 6vw, 24px) !important; line-height: 1.15 !important; } }
/* прохождение 2026-10-20: текст карт сундука читается поверх голографических бликов (сами блики — стиль v-fut, остаются) */
body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card :is(.ch-name, .ch-line, .ch-stat, .ch-sym) { text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 6px rgba(0, 0, 0, .7); }
/* договор: тёмные иконки (рой, руны) — на светлой подложке, чтобы не тонули в тёмной плитке */
.cards.pact-mode .pact-icon { background: radial-gradient(circle, rgba(255, 244, 214, .22), rgba(255, 244, 214, .04) 70%) !important; }
.cards.pact-mode .pact-icon img { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .7)) drop-shadow(0 2px 0 rgba(0, 0, 0, .6)) !important; }
/* привал: название места читается на тёмном небе */
#camp-world { color: #f4ffd8 !important; -webkit-text-stroke: 0 !important; text-shadow: 0 2px 0 #000, 0 0 10px rgba(0, 0, 0, .9) !important; }
/* прохождение 2026-10-20: нижняя панель портрета — не пустой ящик, а стена канализации под картой (assets/ui/panel-sewer.webp,
   сгенерировано по образцу карты мира 1; исходники — art-source/ui-gen). Блок «Навыки» полупрозрачный поверх неё */
@media (orientation: portrait) {
  body:not(.ui-s3) .pp { background: linear-gradient(180deg, rgba(6, 10, 8, .15), rgba(6, 10, 8, .45)), url('assets/ui/panel-sewer.webp') center top / cover no-repeat, #0c130a !important; }
  body:not(.ui-s3) .pp-body { background: rgba(10, 16, 12, .62) !important; backdrop-filter: blur(1px); }
}
/* «Улучшить» без кристаллов — приглушена, а не ярко-зелёная, как доступная (цена и так красная) */
.meta-buy.poor { filter: saturate(.35) brightness(.8) !important; }
/* прохождение 2026-10-20: «Лунная лавка» — свой рисованный фон, как у «Тренировочной поляны» (assets/ui/lunar-bg.webp, по образцу meta-bg) */
#lunarshop.menu.screen { background: url('assets/ui/lunar-bg.webp') 28% 50% / cover no-repeat, #05060f !important; }
#lunarshop.menu.screen::before { display: none !important; }
#lunarshop .menu-panel { background: rgba(9, 9, 26, .74) !important; box-shadow: inset 0 0 0 2px rgba(150, 140, 255, .55), 0 10px 30px rgba(0, 0, 0, .6) !important; backdrop-filter: blur(2px); }
#lunarshop .screen-head b { font-size: 20px; letter-spacing: .04em; text-transform: uppercase; color: #cfc8ff; text-shadow: 0 2px 0 #000, 0 0 12px rgba(140, 120, 255, .7); }
@media (orientation: portrait) {
  #lunarshop.menu.screen { background: url('assets/ui/lunar-bg.webp') 32% 0 / auto 40vh no-repeat, linear-gradient(180deg, #07071a 0, #05060f 40vh) !important; }
  #lunarshop .menu-panel { margin-top: 27vh; }
}
@media (orientation: landscape) {
  #lunarshop.menu.screen { background-position: 12% 50% !important; }
  #lunarshop .menu-panel { margin-left: auto !important; margin-right: max(3vw, var(--sa-right, 0px)) !important; max-width: min(58vw, 640px) !important; }
}
/* подсказки: подсветка по контуру цели (прохождение 2026-10-20) — цель светится по силуэту, окно затемнения скруглено под форму */
.tut-target { filter: drop-shadow(0 0 1.5px #fff4c4) drop-shadow(0 0 6px #ffe07a) drop-shadow(0 0 14px rgba(255, 210, 94, .8)) !important; animation: tut-target-glow 1.2s ease-in-out infinite; }
@keyframes tut-target-glow { 50% { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 10px #ffe07a) drop-shadow(0 0 22px rgba(255, 210, 94, .9)); } }
.tut-hole.contour { border-color: transparent !important; animation: none; box-shadow: 0 0 0 200vmax rgba(4, 8, 4, .66) !important; }
.tut-hole:not(.contour) { border-width: 2px; }
@media (prefers-reduced-motion: reduce) { .tut-target { animation: none; } }
/* ---------- заставки: вход босса, победа, новый мир (прохождение 2026-10-20) ---------- */
.cutscene { position: fixed; inset: 0; z-index: 5800; display: grid; place-items: center; overflow: hidden; pointer-events: auto;
  background: radial-gradient(120% 90% at 50% 45%, rgba(40, 6, 10, .9), rgba(4, 2, 4, .97)); animation: cs-in .28s ease-out; font-family: 'Rubik', system-ui, sans-serif; }
.cutscene.out { animation: cs-out .3s ease-in forwards; }
@keyframes cs-in { from { opacity: 0; } }
@keyframes cs-out { to { opacity: 0; transform: scale(1.04); } }
.cutscene .cs-rays { position: absolute; left: 50%; top: 42%; width: 160vmax; height: 160vmax; translate: -50% -50%; pointer-events: none; opacity: .5;
  background: repeating-conic-gradient(from 0deg, rgba(255, 70, 50, .35) 0 8deg, transparent 8deg 22deg); animation: cs-spin 14s linear infinite;
  mask-image: radial-gradient(circle, #000 0, transparent 55%); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 55%); }
.cutscene .cs-rays.gold { background: repeating-conic-gradient(from 0deg, rgba(255, 214, 90, .45) 0 8deg, transparent 8deg 22deg); opacity: .7; }
@keyframes cs-spin { to { rotate: 360deg; } }
.cutscene .cs-band { position: absolute; left: -10%; right: -10%; top: 50%; height: 30%; translate: 0 -50%; rotate: -8deg;
  background: linear-gradient(90deg, transparent, rgba(190, 20, 30, .85) 18%, rgba(120, 8, 16, .9) 82%, transparent); box-shadow: 0 0 40px rgba(255, 40, 40, .5);
  animation: cs-band .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes cs-band { from { transform: scaleX(0); } }
.cutscene .cs-boss { position: relative; z-index: 2; width: min(78vw, 62vh, 460px); aspect-ratio: 1; object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .8)); animation: cs-boss-in .6s cubic-bezier(.15, .9, .25, 1.15); margin-bottom: 18vh; }
@keyframes cs-boss-in { from { transform: translateX(40vw) scale(.7); opacity: 0; } }
.cutscene .cs-emoji { position: relative; z-index: 2; font-size: min(36vw, 26vh); font-style: normal; margin-bottom: 18vh; animation: cs-boss-in .6s cubic-bezier(.15, .9, .25, 1.15); }
.cutscene .cs-text { position: absolute; z-index: 3; left: 0; right: 0; bottom: 14vh; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 16px; text-align: center;
  animation: cs-text-in .5s .15s both cubic-bezier(.2, .8, .2, 1); }
@keyframes cs-text-in { from { transform: translateY(24px); opacity: 0; } }
.cutscene .cs-text small { font-size: 13px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #ffb0a0; }
.cutscene .cs-text b { font-size: clamp(30px, 9vw, 54px); font-weight: 900; line-height: 1.05; color: #fff4e0; text-shadow: 0 3px 0 #3a0000, 0 0 18px rgba(255, 60, 40, .7); }
.cutscene .cs-text em { font-style: normal; font-size: 14px; font-weight: 700; color: #ffe9b0; text-shadow: 0 2px 0 #000; max-width: 34ch; }
.cutscene .cs-stat { margin-top: 4px; padding: 3px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: #fff; background: rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
/* победа: золото, поверженный босс серый и наклонён */
.cutscene.cs-victory { background: radial-gradient(120% 90% at 50% 45%, rgba(60, 44, 6, .9), rgba(4, 4, 2, .97)); }
.cutscene.cs-victory .cs-text small { color: #ffe48a; }
.cutscene.cs-victory .cs-text b { font-size: clamp(40px, 13vw, 72px); color: #fff3c4; text-shadow: 0 3px 0 #4a3000, 0 0 22px rgba(255, 210, 80, .9); animation: cs-pop .5s .1s both cubic-bezier(.2, 1.6, .4, 1); }
@keyframes cs-pop { from { transform: scale(.4); } }
.cutscene .beaten { filter: grayscale(.85) brightness(.6) drop-shadow(0 10px 18px rgba(0, 0, 0, .8)); rotate: -10deg; animation: cs-beaten .7s ease-out; }
@keyframes cs-beaten { from { filter: none; rotate: 0deg; transform: scale(1.08); } }
/* новый мир: превью карты в рамке */
.cutscene.cs-world { background: radial-gradient(120% 90% at 50% 45%, rgba(8, 30, 14, .9), rgba(2, 6, 3, .97)); }
.cutscene .cs-map { position: relative; z-index: 2; width: min(86vw, 120vh, 620px); aspect-ratio: 2 / 1; margin-bottom: 14vh; border-radius: 14px; background: #1a2a1a center / cover no-repeat;
  box-shadow: 0 0 0 3px #b8e070, 0 0 0 6px #1d2a14, 0 14px 30px rgba(0, 0, 0, .7); animation: cs-map-in .55s cubic-bezier(.15, .9, .25, 1.1); image-rendering: pixelated; }
@keyframes cs-map-in { from { transform: scale(.8) rotate(-3deg); opacity: 0; } }
.cutscene.cs-world .cs-text small { color: #b8f08a; }
.cutscene.cs-world .cs-text b { text-shadow: 0 3px 0 #0a2a06, 0 0 16px rgba(120, 255, 80, .55); }
@media (orientation: landscape) and (max-height: 520px) {
  .cutscene .cs-boss, .cutscene .cs-emoji { margin-bottom: 0; margin-right: 34vw; width: min(70vh, 340px); }
  .cutscene .cs-text { left: auto; right: 4vw; width: 50vw; bottom: auto; top: 50%; translate: 0 -50%; }
  .cutscene .cs-map { margin-bottom: 0; margin-right: 34vw; width: min(52vw, 120vh); }
}
@media (prefers-reduced-motion: reduce) { .cutscene, .cutscene * { animation: none !important; } }
.cutscene .cs-boss { -webkit-mask-image: radial-gradient(circle at 50% 48%, #000 58%, transparent 71%); mask-image: radial-gradient(circle at 50% 48%, #000 58%, transparent 71%); image-rendering: auto; }
/* «Оборона», портрет, карта отдалена (CONFIG.standMode.portrait): над картой — размытое продолжение той же картинки,
   фигуры уменьшены в масштаб карты (--unit). Монстр уменьшается содержимым: сам .mon двигается через transform */
#arena.stand-zoomed .bg::before { content: ''; position: absolute; left: -20px; right: -20px; top: -20px; height: calc(var(--stand-top, 0px) + 60px); z-index: 0;
  background: var(--stand-src) center top / cover no-repeat; filter: blur(10px) brightness(.62) saturate(.9); pointer-events: none; }
#arena.stand-zoomed .bg::after { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--stand-top, 0px) - 24px); height: 48px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .0) 30%, rgba(0, 0, 0, .25) 50%, transparent); }
#arena.stand-zoomed #stand-bg { z-index: 2; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22px); mask-image: linear-gradient(180deg, transparent 0, #000 22px); }
/* у героя свой transform: scale(.5) с опорой 0 0 и якорем (21.5px, 35px) — масштабируем вокруг той же опоры и возвращаем якорь сдвигом */
#arena.stand-zoomed #slime { scale: var(--unit, 1); translate: calc((1 - var(--unit, 1)) * 21.5px) calc((1 - var(--unit, 1)) * 35px); }
#arena.stand-zoomed .mon > :not(.mon-hp) { scale: var(--unit, 1); transform-origin: 50% 100%; }
#arena.stand-zoomed .sk2-summon { scale: var(--unit, 1); transform-origin: 50% 100%; }
/* скелеты перед героем: полоска здоровья над головой */
.sk2-hp { position: absolute; z-index: 10; width: 36px; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, .7); box-shadow: 0 0 0 1px rgba(0, 0, 0, .8); pointer-events: none; overflow: hidden; }
.sk2-hp i { display: block; height: 100%; width: 100%; background: linear-gradient(180deg, #f3e6c4, #c9a86a); transition: width .15s; }
.sk2-hp { box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(243, 230, 196, .5); }
.float.t-bone { color: #f3e6c4; font-size: 15px; text-shadow: 0 2px 0 #3a2a10; }
/* ---------- сундук (разбор критика docs/critic/chest-ui.md, 2026-10-20) ---------- */
/* «Ещё сундук?»: «Не сейчас» — тихая второстепенная кнопка под ценой, уже главной; подпись «Сундук подождёт внизу» */
#cards.chest-more #cards-close:not(.hidden) { display: flex !important; flex-direction: column; align-items: center; gap: 1px; min-width: 0 !important; width: auto !important; max-width: 220px;
  margin: 4px auto 0 !important; padding: 8px 22px !important; border: 0 !important; border-image: none !important; border-radius: 10px !important;
  background: rgba(0, 0, 0, .38) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16) !important; color: #e2dac2 !important;
  font: 700 14px/1.2 'Rubik', system-ui, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; filter: none !important;
  grid-column: 1 / -1 !important; justify-self: center !important; position: relative !important; left: auto !important; right: auto !important; translate: none !important; }
#cards.chest-more #cards-close::before, #cards.chest-more #cards-close::after { display: none !important; }
#cards.chest-more #cards-close small { display: block; font-size: 11px; font-weight: 600; color: #b8b09a; opacity: .85; }
/* в окне — меньше движения: без покачивания, только лучи и медленное дыхание */
#cards.chest-more #cards-list .card.nc:not(.nc-knock) .nc-img { animation-duration: 4.5s !important; }
/* состояния и анимации: меньше постоянного движения, больше разовых событий.
   стал доступен — один подскок (chest-pop); ждёт — мягкое свечение и раз в 4 с приоткрытая крышка; напоминание — подскок раз в 5 с;
   крупный — фиолетовое свечение без качания; заблокирован (босс) — цепи, без анимации */
@keyframes chest-pop { 0% { translate: 0 0; } 35% { translate: 0 -14px; scale: 1.12; } 60% { translate: 0 0; scale: .96; } 100% { scale: 1; } }
@keyframes chest-glow { 0%, 100% { filter: drop-shadow(0 0 5px rgba(255, 225, 74, .45)) drop-shadow(0 4px 2px rgba(0, 0, 0, .6)); } 50% { filter: drop-shadow(0 0 14px rgba(255, 225, 74, .8)) drop-shadow(0 0 22px rgba(125, 255, 58, .45)) drop-shadow(0 4px 2px rgba(0, 0, 0, .6)); } }
@keyframes chest-big-glow { 0%, 100% { filter: drop-shadow(0 0 8px rgba(190, 140, 255, .6)) drop-shadow(0 4px 2px rgba(0, 0, 0, .6)); } 50% { filter: drop-shadow(0 0 18px rgba(200, 150, 255, .95)) drop-shadow(0 4px 2px rgba(0, 0, 0, .6)); } }
@keyframes chest-nag { 0%, 86%, 100% { translate: 0 0; } 90% { translate: 0 -10px; } 94% { translate: 0 0; } 97% { translate: 0 -4px; } }
@keyframes chest-peek-f0 { 0%, 82%, 100% { opacity: 1; } 86%, 96% { opacity: 0; } }
@keyframes chest-peek-f1 { 0%, 82%, 100% { opacity: 0; } 86%, 96% { opacity: 1; } }

/* портрет: нижняя панель */
.pp-btn.pp-chest:not(.ready) { filter: none !important; }
.pp-btn.pp-chest img { filter: drop-shadow(0 0 1px #d8f0a0) drop-shadow(0 0 4px rgba(216, 240, 160, .35)) drop-shadow(0 4px 3px rgba(0, 0, 0, .7)) !important; animation: none !important; }
.pp-btn.pp-chest.ready img { animation: chest-glow 3.2s ease-in-out infinite !important; }
.pp-btn.pp-chest.ready.nag img { animation: chest-glow 3.2s ease-in-out infinite, chest-nag 5s ease-in-out infinite !important; }
.pp-btn.pp-chest.big img { animation: chest-big-glow 3s ease-in-out infinite !important; }
.pp-btn.pp-chest.locked img { filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .7)) !important; }
.pp-btn.pp-chest.chest-pop img { animation: chest-pop .6s ease-out !important; }
.pp-btn.pp-chest.ready::before { animation-duration: 3.2s !important; }
/* плашка цены: пока копишь — полоса накопления «27 / 42» */
.pp-btn.pp-chest:not(.ready):not(.big):not(.locked) span { background: linear-gradient(90deg, rgba(125, 255, 90, .38) calc(var(--fill, 0) * 100%), rgba(0, 0, 0, .6) 0) !important; }
.pp-btn.pp-chest.locked span { background: rgba(40, 30, 30, .8) !important; }
.pp-btn.pp-chest.big span { background: linear-gradient(180deg, #d6b4ff, #8a5ad8) !important; box-shadow: inset 0 0 0 1.5px #efe0ff, 0 0 12px #b48cff88 !important; }
.pp-btn.pp-chest.big b, .pp-btn.pp-chest.big small { color: #1e0a3a !important; }

/* ландшафт: сундук — в правом нижнем углу, всегда виден, без зелёной пилюли; крупный и заблокированный — свои рисунки */
.ui-swamp .dock-chest-ic .fb, .ui-swamp .dock-chest-ic .fl { opacity: 0; }
.ui-swamp .dock #dock-chest.big .dock-chest-ic :is(.f0, .f1, .f2), .ui-swamp .dock #dock-chest.locked .dock-chest-ic :is(.f0, .f1, .f2) { opacity: 0 !important; animation: none !important; }
.ui-swamp .dock #dock-chest.big .fb, .ui-swamp .dock #dock-chest.locked .fl { opacity: 1; }
.ui-swamp .dock #dock-chest.ready .dock-chest-ic, .ui-swamp .dock #dock-chest.big .dock-chest-ic, .ui-swamp .dock #dock-chest.nag .dock-chest-ic { animation: chest-glow 3.2s ease-in-out infinite !important; }
.ui-swamp .dock #dock-chest.big .dock-chest-ic { animation-name: chest-big-glow !important; }
.ui-swamp .dock #dock-chest.nag .dock-chest-ic { animation: chest-glow 3.2s ease-in-out infinite, chest-nag 5s ease-in-out infinite !important; }
.ui-swamp .dock #dock-chest.ready:not(.big) .f0 { animation: chest-peek-f0 4s steps(1) infinite !important; }
.ui-swamp .dock #dock-chest.ready:not(.big) .f1 { animation: chest-peek-f1 4s steps(1) infinite !important; }
.ui-swamp .dock #dock-chest.ready:not(.big) .f2 { animation: none !important; opacity: 0 !important; }
.ui-swamp .dock #dock-chest.ready::before, .ui-swamp .dock #dock-chest.nag::before { animation-duration: 3.2s !important; }
@media (orientation: landscape) {
  .ui-swamp .arena .dock { left: auto !important; right: calc(10px + var(--sa-right, 0px)) !important; bottom: calc(8px + var(--sa-bottom, 0px)) !important; translate: none !important; width: auto !important; }
  .ui-swamp .arena .dock #dock-chest#dock-chest { display: flex !important; }
  html.ui-swamp body:not(.ui-s3) .arena .dock #dock-chest#dock-chest { background: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; min-height: 0 !important; text-shadow: none !important; }
  .ui-swamp .arena .dock #dock-chest .dock-chest-ic { width: 72px !important; height: 62px !important; margin-top: 0 !important; }
  .ui-swamp .arena .dock #dock-chest small { display: block; padding: 1px 8px; border-radius: 999px; font-size: 11px; color: #fff;
    background: linear-gradient(90deg, rgba(125, 255, 90, .4) calc(var(--fill, 1) * 100%), rgba(0, 0, 0, .65) 0); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
  .ui-swamp .arena .dock #dock-chest b { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pp-btn.pp-chest img, .ui-swamp .dock #dock-chest .dock-chest-ic, .ui-swamp .dock #dock-chest img { animation: none !important; } }
/* пока открыто «Ещё сундук?», сундук панели под затемнением не просвечивает второй ценой */
body:has(#cards.chest-more:not(.hidden)) :is(#pp-chest, #dock-chest) { visibility: hidden; }
/* ландшафт: сундук «копим» не серый, а со светлой кромкой и тенью — не сливается с картой в углу */
.ui-swamp .dock #dock-chest:not(.ready):not(.big):not(.locked) .dock-chest-ic { filter: drop-shadow(0 0 1px #d8f0a0) drop-shadow(0 0 4px rgba(216, 240, 160, .45)) drop-shadow(0 4px 3px rgba(0, 0, 0, .8)) !important; }

/* ===== «Голограмма лайт» (выбор автора 2026-10-20, docs/card-variants.html вариант D; разбор docs/critic/card-design.md) =====
   Карта сундука без нагромождения v-fut: тёмно-зелёная база с мягким пятном цвета редкости, один кант редкости, одна тень.
   Блик — одна полоса по арту раз в 6 с и только у эпических, легендарных и лунных. Под текстом бликов нет.
   Отключено: осколки и бегущий блик (::before v-fut), пять обводок drop-shadow, лучи/пульс/искры за иконкой, покачивание иконки. */
html body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card.ch-card {
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .55)) !important; }
html body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card.ch-card:is(.legendary, .lunar) {
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--rc) 45%, transparent)) drop-shadow(0 4px 6px rgba(0, 0, 0, .55)) !important; }
html body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card.ch-card::before {
  clip-path: inset(0 round 12px) !important; border-radius: 12px; animation: none !important;
  background: radial-gradient(120% 90% at 18% 22%, color-mix(in srgb, var(--rc) 26%, transparent), transparent 60%), linear-gradient(160deg, #1a2416, #0b100a) !important;
  background-size: 100% 100% !important; background-position: 0 0 !important;
  box-shadow: inset 0 0 0 2px var(--rc), inset 0 0 0 3px rgba(0, 0, 0, .5) !important; }
html body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card.ch-card:is(.legendary, .lunar)::before {
  box-shadow: inset 0 0 0 2px var(--rc), inset 0 2px 0 3px color-mix(in srgb, var(--rc) 35%, transparent), inset 0 0 0 4px rgba(0, 0, 0, .45) !important; }
/* иконка: без лучей, пульса, искр и качания; одна тень */
html body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card .ch-art::before { display: none !important; }
html body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card .ch-art img { animation: none !important; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .6)) !important; }
html body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card .ch-art::after { display: none !important; animation: none !important; }
/* блик по арту — только эпик, легендарный, лунный: одна полоса раз в 6 с */
html body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card:is(.epic, .legendary, .lunar) .ch-art { overflow: hidden; border-radius: 10px; }
html body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card:is(.epic, .legendary, .lunar) .ch-art::after { display: block !important; content: ''; position: absolute; z-index: 3; inset: -20%;
  background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, .5) 50%, transparent 60%) !important; -webkit-mask: none !important; mask: none !important; opacity: 1;
  translate: -120% 0; animation: card-sheen 6s ease-in-out infinite !important; }
html body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card:nth-child(2) .ch-art::after { animation-delay: -2s !important; }
html body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card:nth-child(3) .ch-art::after { animation-delay: -4s !important; }
@keyframes card-sheen { 0%, 70% { translate: -120% 0; } 90%, 100% { translate: 120% 0; } }
/* текст: тени-заплатки под осколки больше не нужны — обычная лёгкая тень */
body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card :is(.ch-name, .ch-line, .ch-stat, .ch-sym) { text-shadow: 0 1px 0 rgba(0, 0, 0, .85) !important; }
/* раскладка (разбор критика): редкость видна и в ландшафте, подписи чисел не обрезаются, ⓘ крупнее и удобнее */
@media (orientation: landscape) and (max-height: 400px) { #cards:not(.boss-ped) #cards-list .ch-card .ch-rar { display: inline-block !important; } }
body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card .ch-stat small { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card .ch-stats { max-width: 100%; }
body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card i.ch-info { width: 30px !important; height: 30px !important; font-size: 15px !important; }
body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card i.ch-info::after { content: ''; position: absolute; inset: -7px; }
@media (prefers-reduced-motion: reduce) { html body:not(.ui-s3) #cards #cards-list .ch-card .ch-art::after { animation: none !important; display: none !important; } }
/* иконка предмета — целым масштабом (160 → 80 px), а не 53 px: крупнее и чётче */
html body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card .ch-art img { width: 80px !important; height: 80px !important; max-width: 100%; max-height: 100%; object-fit: contain; }
/* договор «Безумец»: умения в панели заблокированы до первого босса — серые, с замком */
#pp .pz-tile.skill.locked img { filter: grayscale(1) brightness(.55) !important; }
#pp .pz-tile.skill.locked::after { content: '🔒'; position: absolute; top: 12px; left: 50%; translate: -50% 0; font-size: 18px; filter: drop-shadow(0 1px 1px #000); }
/* ландшафт: кольцо босса выше сундука в правом нижнем углу (раньше закрывало его вместе с цепями «после босса») */
@media (orientation: landscape) { .boss-ring { bottom: calc(120px + var(--sa-bottom, 0px)) !important; } }
/* награда босса на пьедесталах (портрет): длинное имя переносится, подписи чисел не режутся многоточием */
#cards.boss-ped #cards-list .ch-card .ch-name { overflow-wrap: break-word; word-break: normal; hyphens: none; white-space: normal !important; max-width: 100%; }   /* переносим по словам, а не «РАСКОЛОТА / Я ПАМЯТЬ» */
@media (orientation: portrait) { #cards.boss-ped #cards-list .ch-card .ch-name { font-size: 12.5px !important; line-height: 1.1 !important; } }
#cards.boss-ped #cards-list .ch-card .ch-stat small { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
/* экран «Босс ушёл» (критик-подросток): вместо тоста — что случилось и что делать */
.cutscene.cs-retreat { background: radial-gradient(120% 90% at 50% 45%, rgba(30, 24, 40, .92), rgba(4, 3, 6, .97)); }
.cutscene.cs-retreat .cs-boss, .cutscene.cs-retreat .cs-emoji { filter: grayscale(.4) brightness(.75) drop-shadow(0 10px 18px rgba(0, 0, 0, .8)); }
.cutscene.cs-retreat .cs-text small { color: #c9b8ff; }
.cutscene.cs-retreat .cs-text b { text-shadow: 0 3px 0 #1a0a30, 0 0 14px rgba(150, 120, 255, .5); }
.cutscene .cs-btns { display: flex; gap: 10px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.cutscene .cs-btn { min-height: 46px; padding: 10px 20px; border: 0; border-radius: 12px; font: 900 15px/1 'Nunito', sans-serif; color: #e8e0cc; cursor: pointer;
  background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.cutscene .cs-btn.main { color: #10300a; background: linear-gradient(180deg, #9cf86a, #4fc731); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 0 0 2px #0c2408, 0 4px 0 #1f5a10; }
/* эпик/легендарка в сундуке — вспышка цвета редкости поверх окна */
#cards.rare-drop::after { content: ''; position: fixed; inset: 0; z-index: 50; pointer-events: none; animation: rare-flash 1.1s ease-out forwards; }
#cards.rare-drop.r-epic::after { background: radial-gradient(circle at 50% 45%, rgba(195, 107, 255, .55), transparent 65%); }
#cards.rare-drop.r-legendary::after { background: radial-gradient(circle at 50% 45%, rgba(255, 210, 90, .7), rgba(255, 160, 40, .25) 40%, transparent 70%); }
@keyframes rare-flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
/* «Открыть все (N)» — под главной кнопкой цены */
#cards-list .nc-all { display: block; margin: 8px auto 0; padding: 9px 20px; border: 0; border-radius: 10px; font: 900 14px/1 'Nunito', sans-serif; color: #2a1c00; cursor: pointer;
  background: linear-gradient(180deg, #ffe48a, #f2b42c); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 0 0 2px #3a2400, 0 3px 0 #6a4a00; flex-basis: 100%; max-width: 220px; }
@media (prefers-reduced-motion: reduce) { #cards.rare-drop::after { animation: none; display: none; } }
/* «Новый облик»: рост крупно справа, числа мелко под подписью */
.nl-stat { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; }
.nl-stat span small { display: block; font-size: 11.5px; font-weight: 700; opacity: .7; margin-top: 2px; }
.nl-stat .nl-big { font-style: normal; font: 900 26px/1 'Nunito', sans-serif; color: #9cf86a; text-shadow: 0 2px 0 #0c2408, 0 0 12px rgba(125, 255, 90, .45); }
.nl-stat .nl-big.same { color: #b8b09a; font-size: 18px; text-shadow: none; }
/* нижняя панель: пока навыков нет — блок «Навыки» не показываем (было ~300 px пустоты «Пока нет…») */
#pp .pp-body:has(#pp-skills .pz-empty) > h3:nth-of-type(2), #pp-skills:has(.pz-empty) { display: none !important; }

/* «Ты получил» (подарок договора): имя предмета переносится, а не обрезается («Зелье в», «Боссол») */
.cards.gift-mode #cards-list .card .card-name { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: break-word; line-height: 1.1 !important; max-width: 100% !important; width: auto !important; }
/* «Вызвать босса» не налезает на счётчик формы («Голод ядра 0/6») — счётчик ниже кнопки */
@media (orientation: portrait) { .arena:not(.boss-fight):has(#boss-call:not([hidden])) .evo-status { top: calc(max(6px, var(--sa-top)) + 166px) !important; } }
.tut-hole.hand-left .tut-hand { right: auto; left: -14px; scale: -1 1; }
/* стопки сумки: зона нажатия не меньше 44 px (сами значки прежнего размера) */
.loot-strip.bag .stack > .hit { position: absolute; left: 50%; top: 50%; width: 46px; height: 48px; translate: -50% -50%; }

/* ---------- тексты на карточках (critic/card-texts.md) ---------- */
/* минус предмета — красный чип рядом с числами */
html body #cards:not(.x) #cards-list .ch-card.ch-card .ch-stat.cost.cost b, html body #cards:not(.x) #cards-list .ch-card.ch-card .ch-stat.cost.cost small,
.im2-stats .ch-stat.cost b, .im2-stats .ch-stat.cost small { color: #ff8a80 !important; }
/* окно ⓘ предмета: чипы чисел над описанием */
.im2-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 6px 0 2px; }
.im2-stats .ch-stat { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, .08); }
.im2-stats .ch-stat b { color: #fff6a8; font-size: 15px; }
.im2-stats .ch-stat small { color: #d8d2c0; font: 700 12px/1.2 'Nunito', sans-serif; }
/* ⓘ на карте умения: тап — подробности (в «Активном» тап и так открывает, удержание берёт) */
#cards.passive-mode #cards-list .card.sk-card { position: relative; }
#cards.passive-mode #cards-list .card.sk-card i.sk-info { position: absolute; right: 8px; bottom: 8px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font: 900 13px/1 'Nunito', sans-serif; font-style: normal; color: #fff; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); z-index: 3; }
#cards.passive-mode #cards-list .card.sk-card i.sk-info::after { content: ''; position: absolute; inset: -8px; }
#cards.passive-mode #cards-list .card.sk-card .card-desc { padding-right: 26px; }
.info-modal .sk-chips, #info-body .sk-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 6px 0; }
#info-body .sk-chips i { font-style: normal; font-size: 12px; padding: 2px 7px; border-radius: 6px; background: rgba(255, 255, 255, .1); }
/* ландшафт: текст карты сундука крупнее (было 10.5 / 9.5 px) */
@media (orientation: landscape) and (max-height: 500px) {
  body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card .ch-line { font-size: 11.5px !important; line-height: 1.3 !important; }
  body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card .ch-stat small { font-size: 10.5px !important; }
  body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card .ch-rar { font-size: 11px !important; }
}
/* минус в ландшафте — отдельной строкой под числами, а не узкой колонкой */
html body #cards:not(.x) #cards-list .ch-card .ch-stats:has(.cost) { flex-wrap: wrap !important; }
html body #cards:not(.x) #cards-list .ch-card .ch-stat.cost.cost { flex: 1 0 100% !important; display: block !important; text-align: center; }
html body #cards:not(.x) #cards-list .ch-card .ch-stat.cost.cost small { display: inline !important; max-width: none !important; white-space: normal !important; }
html body #cards:not(.x) #cards-list .ch-card .ch-stat.cost.cost::after { content: none !important; }

/* ---------- v-f2: главный экран «витрина облика» (docs/menu-variants.html, вариант F2) ---------- */
/* старый лагерь: фон остаётся (темнее), портал-лужа, плитки, портрет и табличка мира спрятаны — их заменяет .f2 */
html body #menu.f2-menu .camp-stage { filter: brightness(.48) saturate(.9); }
html body #menu.f2-menu :is(#menu-start, .camp-left, .camp-bottom, .camp-profile, .camp-title, .camp-start, #menu-hero) { display: none !important; }
html body #menu.f2-menu .camp-top { grid-template-columns: 1fr auto; }
html body #menu.f2-menu .camp-top .menu-res { grid-column: 2; }
html body #menu.f2-menu .camp-center { bottom: auto; top: calc(56px + var(--sa-top, 0px)); z-index: 4; }
.backpack { z-index: 46; }
.f2 { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: grid; gap: 10px;
  padding: calc(60px + var(--sa-top, 0px)) max(12px, var(--sa-right, 0px)) max(12px, var(--sa-bottom, 0px)) max(12px, var(--sa-left, 0px));
  grid-template-columns: 1fr 150px; grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas: "where where" "stage stats" "bag bag" "go go" "dock dock";
  background: radial-gradient(ellipse 60% 40% at 30% 42%, rgba(156, 240, 90, .16), transparent 70%), linear-gradient(transparent 45%, rgba(4, 7, 4, .78) 70%); }
.f2 > * { pointer-events: auto; min-width: 0; }
.f2-where { grid-area: where; display: flex; align-items: baseline; gap: 8px; padding: 0 4px; }
.f2-where b { font: 900 21px/1.1 'Nunito', sans-serif; color: #f4f1df; text-shadow: 0 2px 4px #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f2-where small { margin-left: auto; flex: none; font: 800 12.5px/1 'Nunito', sans-serif; color: #9cf05a; text-shadow: 0 1px 2px #000; }
.f2-stage { grid-area: stage; position: relative; min-height: 150px; }
.f2-ped { position: absolute; left: 12%; right: 12%; bottom: 34px; height: 30px; border-radius: 50%; background: radial-gradient(#3e5a2c, #18210f 70%); box-shadow: 0 0 30px rgba(156, 240, 90, .35); }
.f2-stage img { position: absolute; left: 50%; bottom: 46px; height: calc(100% - 52px); max-height: 230px; width: auto; max-width: 100%; translate: -50% 0; object-fit: contain; object-position: 50% 100%;
  image-rendering: pixelated; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .6)); transform-origin: 50% 100%; animation: f2-idle 1.6s ease-in-out infinite; }
.f2.drop .f2-stage img { max-height: 150px; }
@keyframes f2-idle { 50% { transform: scale(1.025, .975); } }
.f2-form { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; }
.f2-form b { display: block; font: 900 15px/1.1 'Nunito', sans-serif; color: #fff; text-shadow: 0 1px 3px #000; }
.f2-form small { display: block; margin-top: 3px; font: 800 11.5px/1 'Nunito', sans-serif; color: #9cf05a; }
.f2-stats { grid-area: stats; align-self: center; display: grid; gap: 7px; }
.f2-stats div { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(12, 18, 10, .84); border: 1px solid rgba(255, 255, 255, .1); }
.f2-stats i { font-style: normal; font-size: 17px; width: 20px; text-align: center; }
.f2-stats b { display: block; font: 900 17px/1 'Nunito', sans-serif; color: #fff; }
.f2-stats small { display: block; margin-top: 2px; font: 700 11px/1 'Nunito', sans-serif; color: #a9b59c; }
.f2-bag { grid-area: bag; display: block; width: 100%; text-align: left; padding: 10px 10px 9px; border-radius: 14px; background: rgba(12, 18, 10, .88); border: 1px solid rgba(255, 255, 255, .1); color: inherit; font: inherit; cursor: pointer; }
.f2-bag:disabled { cursor: default; }
.f2-bag h4 { margin: 0 0 8px; display: flex; font: 900 13px/1 'Nunito', sans-serif; color: #e6eedb; }
.f2-bag h4 small { margin-left: auto; font: 700 12px/1 'Nunito', sans-serif; color: #a9b59c; }
.f2-items { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.f2-items span { position: relative; aspect-ratio: 1; border-radius: 8px; background: #1b2418; border: 1.5px solid #3d4b36; display: grid; place-items: center; }
.f2-items span.uncommon { border-color: #4fa83a; } .f2-items span.rare { border-color: #3f8fe0; } .f2-items span.epic { border-color: #a35be0; }
.f2-items span.legendary { border-color: #e0a23a; } .f2-items span.lunar { border-color: #5fc8ff; }
.f2-items img { width: 84%; image-rendering: pixelated; }
.f2-items em { position: absolute; right: 1px; bottom: 0; font: 900 10px/1 'Nunito', sans-serif; font-style: normal; color: #fff; text-shadow: 0 1px 2px #000; }
.f2-items .more { font: 900 13px/1 'Nunito', sans-serif; color: #a9b59c; }
.f2-empty { margin: 0; font-size: 12.5px; line-height: 1.4; color: #a9b59c; }
.f2-empty b { color: #ffd15a; }
.f2-cta { grid-area: go; display: grid; gap: 6px; justify-items: center; }
.f2-go { width: 100%; border: 0; border-radius: 16px; padding: 14px 10px 12px; cursor: pointer; text-align: center; color: #10230a;
  background: linear-gradient(#b8ff6e, #5fcf2f); box-shadow: 0 5px 0 #2f7d17, 0 10px 24px rgba(80, 220, 60, .35), inset 0 2px 0 rgba(255, 255, 255, .6); }
.f2-go:active { translate: 0 3px; box-shadow: 0 2px 0 #2f7d17, inset 0 2px 0 rgba(255, 255, 255, .6); }
.f2-go b { display: block; font: 900 22px/1 'Nunito', sans-serif; letter-spacing: .5px; text-transform: uppercase; }
.f2-go small { display: block; margin-top: 5px; font: 800 12px/1 'Nunito', sans-serif; color: #2a5a14; }
.f2-quit { border: 0; background: none; padding: 2px 8px; font: 700 12px/1 'Nunito', sans-serif; color: #9aa68f; text-decoration: underline; cursor: pointer; }
.f2-dock { grid-area: dock; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.f2-dock button { position: relative; display: grid; justify-items: center; gap: 3px; padding: 7px 0 6px; border-radius: 12px; cursor: pointer;
  background: rgba(20, 28, 18, .92); border: 1px solid rgba(255, 255, 255, .12); color: #dfe8d2; font: 800 11px/1 'Nunito', sans-serif; }
.f2-dock img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.f2-badge { position: absolute; top: -5px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #ff4d4d; font: 900 11px/18px 'Nunito', sans-serif; font-style: normal; color: #fff; box-shadow: 0 0 0 2px #0b100b; }
/* ландшафт телефона: облик слева во всю высоту, справа статы в ряд, предметы, внизу кнопка и разделы в одну строку */
@media (orientation: landscape) and (max-height: 560px) {
  .f2 { padding-top: calc(52px + var(--sa-top, 0px)); gap: 8px; grid-template-columns: 34% 1fr auto; grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "stage where where" "stage stats stats" "stage bag bag" "stage go dock";
    background: radial-gradient(ellipse 30% 60% at 18% 55%, rgba(156, 240, 90, .16), transparent 70%), linear-gradient(90deg, transparent 30%, rgba(4, 7, 4, .7) 45%); }
  .f2-stage img { max-height: none; }
  .f2-stats { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .f2-stats div { padding: 6px 8px; }
  .f2-bag { align-self: start; padding: 8px; }
  .f2-items { grid-template-columns: repeat(10, 1fr); }
  .f2-go { padding: 10px 10px 9px; } .f2-go b { font-size: 19px; }
  .f2-cta { align-self: end; }
  .f2-dock { align-self: end; grid-template-columns: repeat(4, 58px); gap: 6px; }
  .f2-dock button { padding: 6px 0 5px; font-size: 10px; }
  .f2-dock img { width: 26px; height: 26px; }
}
/* облик по центру своей зоны, пьедестал под ногами */
.f2-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.f2-stage img { position: relative; z-index: 1; left: auto; bottom: auto; translate: none; height: clamp(110px, 27vh, 230px); min-height: 0; flex: 0 1 auto; max-height: calc(100% - 56px); max-width: 100%; }
.f2.drop .f2-stage img { height: clamp(100px, 20vh, 160px); }
.f2-ped { position: relative; left: auto; right: auto; bottom: auto; flex: none; width: 74%; height: 26px; margin-top: -16px; background: radial-gradient(#5b7f3f, #1e2a14 72%); box-shadow: 0 0 34px rgba(156, 240, 90, .45), inset 0 2px 0 rgba(255, 255, 255, .12); }
.f2-form { position: relative; flex: none; width: 100%; margin-top: 8px; overflow-wrap: anywhere; }
@media (orientation: landscape) and (max-height: 560px) { .f2-stage img { height: min(62vh, 240px); } }
.f2-stage img { order: 1; } .f2-ped { order: 2; } .f2-form { order: 3; }
.f2-items { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.f2-items span { min-width: 0; overflow: hidden; }
.f2-items img { max-width: 84%; height: auto; }
@media (orientation: landscape) and (max-height: 560px) { .f2-items { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
@media (orientation: landscape) and (max-height: 560px) {
  .f2 { padding-top: calc(62px + var(--sa-top, 0px)); }
  .f2.drop .f2-stage img { height: min(42vh, 170px); }
}
/* карта улучшения: крупно только улучшение, умение — мелкой строкой над ним; «1/3» показывают ромбики */
html body #cards.passive-mode #cards-list .card.sk-card .card-name { font-size: 16px !important; line-height: 1.1 !important; }
html body #cards.passive-mode #cards-list .card.sk-card .card-name .sk-of { display: block; margin-bottom: 2px; font: 800 11.5px/1.1 'Nunito', sans-serif; color: #c9d4bd; letter-spacing: 0; text-transform: none; }
html body #cards.passive-mode #cards-list .card.sk-card .card-desc { font-size: 13px !important; line-height: 1.3 !important; }
/* «Ещё сундук?»: сундук и под ним «Открыть все (N)» — обычной кнопкой, а не растянутой картой */
html body #cards.chest-more #cards-list { flex-direction: column !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: 10px !important; }
html body #cards.chest-more #cards-list .nc-all { flex: none !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; aspect-ratio: auto !important;
  margin: 0 auto !important; padding: 11px 22px !important; border-radius: 12px !important; font: 900 15px/1 'Nunito', sans-serif !important; }
/* ---------- торговец в портрете: кот виден сверху, товары — списком строк (critic, телефон) ---------- */
.shop-row { display: none; }
@media (orientation: portrait) {
  html body .merchant .merchant-panel { background: linear-gradient(transparent 0, transparent 18%, rgba(10, 8, 14, .9) 32%, rgba(8, 6, 12, .97) 100%) !important;
    border: 0 !important; border-image: none !important; box-shadow: none !important; justify-content: flex-end !important; padding: 12px 12px max(12px, var(--sa-bottom, 0px)) !important; gap: 8px !important; }
  html body .merchant .merchant-say small { display: none; }
  html body .merchant .shop-board { padding: 8px !important; }
  html body .merchant .shop-cards { display: flex !important; flex-direction: column !important; gap: 6px !important; grid-template-columns: none !important; padding: 0 !important; }
  html body .merchant .shop-item { position: relative; display: flex !important; align-items: center; gap: 8px; width: auto !important; height: auto !important; min-height: 0 !important; padding: 0 !important; }
  html body .merchant .shop-item > .card { display: none !important; }
  html body .merchant .shop-row { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 10px; text-align: left; cursor: pointer;
    background: rgba(255, 255, 255, .05); border: 1.5px solid #3d4b36; color: inherit; font: inherit; }
  html body .merchant .shop-row.uncommon { border-color: #4fa83a; } html body .merchant .shop-row.rare { border-color: #3f8fe0; } html body .merchant .shop-row.epic { border-color: #a35be0; }
  html body .merchant .shop-row.legendary { border-color: #e0a23a; } html body .merchant .shop-row.lunar { border-color: #5fc8ff; }
  html body .merchant .shop-row img { flex: none; width: 34px; height: 34px; image-rendering: pixelated; }
  html body .merchant .shop-row span { min-width: 0; display: grid; gap: 2px; }
  html body .merchant .shop-row b { font: 900 13.5px/1.1 'Nunito', sans-serif; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html body .merchant .shop-row small { font: 700 11.5px/1.2 'Nunito', sans-serif; color: #c9d4bd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html body .merchant .shop-item .shop-price { position: static !important; flex: none; width: 74px !important; min-height: 40px; margin: 0 !important; translate: none !important; transform: none !important; font-size: 14px !important; }
  html body .merchant .shop-item .shop-sale { position: absolute !important; left: -4px !important; top: -6px !important; right: auto !important; z-index: 2; font-size: 10px !important; padding: 1px 5px !important; transform: none !important; rotate: 0deg !important; }
  html body .merchant .shop-item .shop-evo { display: none !important; }
  html body .merchant .shop-item.sold .shop-row { opacity: .45; }
}
@media (orientation: portrait) {
  html body .merchant .shop-cards .shop-item { flex-direction: row !important; flex-wrap: nowrap !important; justify-content: stretch !important; }
  html body .merchant .shop-cards .shop-item .shop-price { order: 2; align-self: center; }
}
@media (orientation: portrait) {
  html.ui-swamp body:not(.ui-s3) .merchant .merchant-panel.merchant-panel { background: linear-gradient(transparent 0, transparent 22%, rgba(10, 8, 14, .88) 34%, rgba(8, 6, 12, .97) 100%) !important; box-shadow: none !important; border-radius: 0 !important; }
}
/* ---------- «Новый облик» лаконичнее: строки без рамок, разделитель тонкой линией, умение формы — простой текст (автор: «рамки перегружают») ---------- */
html body .newlook .newlook-stats { gap: 0 !important; margin-top: 4px; padding: 4px 0; border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); }
html body .newlook .nl-stat { background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; padding: 7px 4px !important; }
html body .newlook .nl-stat + .nl-stat { border-top: 1px solid rgba(255, 255, 255, .06) !important; }
html body .newlook .nl-stat .nl-big { font-size: 22px !important; }
html body .newlook .newlook-grow { background: none !important; box-shadow: none !important; padding: 2px 0 6px !important; margin: 0 !important; font-size: 12.5px !important; }
html body .newlook .newlook-grow * { background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 2px !important; }
html body .newlook .nl-skill { background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; padding: 8px 4px 2px !important; text-align: center !important; }
html body .newlook .nl-skill b { font-size: 14px !important; }
html body .newlook .nl-skill small { display: block; margin-top: 3px; font-size: 12.5px !important; line-height: 1.35 !important; color: #c9d4bd !important; }
html body .newlook .newlook-grow .grow-chip { color: #ffd15a !important; font-weight: 900; }
html body .newlook .newlook-grow .grow-chip.hp { color: #ff8a80 !important; }
html body .newlook .newlook-grow .grow-chip.spd { color: #7fe6ff !important; }
/* сцена босса (логово мандрила) сдвигается так, чтобы голова была в кадре и в узком портрете (game.js sceneShift) */
.boss-backdrop.scene, .boss-backdrop.scene .arena-face { background-position: var(--sx, 50%) bottom !important; }
/* «Оборона»: статичная карта мира (.stand-bg, z 2) закрывала сцену арены босса (.boss-backdrop, z 0) — на арене босса карту прячем */
.arena.arena-boss .stand-bg, .arena.arena-scene .stand-bg { visibility: hidden !important; }
/* портрет: панели «Статистика» и «Настройки» в бою — во весь экран поверх боя (раньше уезжали за левый край) */
@media (orientation: portrait) {
  html body #sheet.sheet { position: fixed !important; inset: 0 !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; width: auto !important; max-width: none !important; max-height: none !important;
    transform: none !important; translate: none !important; animation: none !important; z-index: 48 !important; border-radius: 0 !important; display: flex; flex-direction: column;
    padding: var(--sa-top, 0px) 0 var(--sa-bottom, 0px) !important; background: rgba(8, 12, 9, .97) !important; }
  html body #sheet.sheet[hidden] { display: none !important; }
  html body #sheet .sheet-head { padding: 14px 14px 10px !important; }
  html body #sheet .sheet-head b { font-size: 15px !important; }
  html body #sheet .sheet-close { min-width: 44px !important; min-height: 44px !important; }
  html body #sheet .sheet-body { flex: 1; overflow-y: auto; padding: 4px 16px 16px !important; }
}
/* ---------- «Персонаж» (Тренировочная поляна): фон темнее, текст читается; «Назад» — рядом с «Улучшить» ---------- */
html body .meta-screen .meta-bg { filter: brightness(.45) saturate(.85) !important; }
html body .meta-screen :is(.meta-hint, .meta-rank, .meta-nodes small, .meta-nodes b, .meta-nodes span) { text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, .9); }
html body .meta-screen .meta-hint { padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .45); color: #dfe8d2 !important; }
html body .meta-screen .meta-detail { background: rgba(10, 8, 4, .9) !important; }
.meta-actions { display: flex; align-items: stretch; gap: 10px; width: 100%; justify-content: center; }
.meta-actions .meta-buy { flex: 1; margin: 0 !important; }
.meta-back2 { flex: none; display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 76px; padding: 8px 10px; border-radius: 16px; cursor: pointer;
  background: rgba(16, 22, 14, .92); border: 1.5px solid rgba(255, 255, 255, .22); color: #e6eedb; font: 800 12px/1 'Nunito', sans-serif; }
.meta-back2 img { width: 26px; height: 26px; }
@media (orientation: portrait) { html body .meta-screen .meta-head .meta-back { visibility: hidden; } }
@media (orientation: landscape) { .meta-back2 { display: none; } }
/* нижняя панель по содержимому (game.js fitPortraitPanel): пустое тело панели не рисуется */
@media (orientation: portrait) { #pp .pp-body.pp-empty { display: none !important; } }
@media (orientation: landscape) { #app { --pp-top: auto; } }
/* портрет: кольцо босса (только показатель, тапы идут по всему полю) лежало на самом боссе — убрано, здоровье и имя в полосе сверху */
@media (orientation: portrait) { html body .boss-pads .boss-ring { display: none !important; } }
/* «Ещё сундук?»: главное — «Открыть за N» (залитая кнопка), «Открыть все» — вторичная ссылка; вне этого окна её не видно
   (при закрытии класс chest-more снимался, пока окно гасло, и «Открыть все» раздувалась в плиту — критик, портрет) */
html body #cards:not(.chest-more) #cards-list .nc-all { display: none !important; }
html body #cards.chest-more #cards-list .card.nc .nc-price { background: linear-gradient(#b8ff6e, #5fcf2f) !important; color: #10230a !important; box-shadow: 0 4px 0 #2f7d17, inset 0 2px 0 rgba(255, 255, 255, .55) !important; }
html body #cards.chest-more #cards-list .card.nc .nc-price b { color: #10230a !important; }
html body #cards.chest-more #cards-list .card.nc.poor .nc-price { background: #2a1d14 !important; color: #d8c8b0 !important; box-shadow: inset 0 0 0 2px #7a5a3a !important; }
html body #cards.chest-more #cards-list .nc-all { background: none !important; box-shadow: none !important; color: #ffd25e !important; text-decoration: underline; text-underline-offset: 3px; padding: 8px 14px !important; font-size: 14px !important; }
html body #cards.chest-more #cards-close:not(.hidden) { margin-top: 14px !important; background: none !important; box-shadow: none !important; opacity: 1; }
/* цепочка «Открыть все»: кнопка «Хватит» в подзаголовке */
.chain-stop { margin-left: 6px; padding: 5px 12px; border: 0; border-radius: 999px; cursor: pointer; pointer-events: auto; font: 900 13px/1 'Nunito', sans-serif; color: #fff; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
.chain-stop.on { color: #10230a; background: #ffd25e; }
#cards-sub:has(.chain-stop) { pointer-events: auto; }
/* ---------- карты умений (критик, портрет): имя одной строкой 15 px, без квадратной подложки под иконкой, описание целиком ---------- */
html body #cards.passive-mode #cards-list .card.sk-card .card-name { font: 900 15px/1.15 'Nunito', sans-serif !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; letter-spacing: 0 !important; }
html body #cards.passive-mode #cards-list .card.sk-card .card-name .sk-of { white-space: nowrap; }
html body #cards.passive-mode #cards-list .card.sk-card .card-art { background: none !important; box-shadow: none !important; border: 0 !important; border-image: none !important; }
html body #cards.passive-mode #cards-list .card.sk-card .card-art::before { display: none !important; }
html body #cards.passive-mode #cards-list .card.sk-card .card-desc { display: block !important; -webkit-line-clamp: unset !important; line-clamp: unset !important; overflow: visible !important; max-height: none !important; }
html body #cards.passive-mode #cards-list .card.sk-card.sk-card .card-art.art { background: none !important; box-shadow: none !important; }
/* улучшение: ромбики уровня — отдельной строкой под именем, иначе длинное имя («Нестабильность») обрезалось */
html body #cards.passive-mode #cards-list .card.sk-card.skill-up .card-head { flex-wrap: wrap !important; }
html body #cards.passive-mode #cards-list .card.sk-card.skill-up .card-head .card-name { flex: 1 1 100% !important; min-width: 0 !important; max-width: 100% !important; }
html body #cards.passive-mode #cards-list .card.sk-card.skill-up .card-head .sk-up-pips { order: 3; position: static !important; margin: 2px 0 0 !important; transform: none !important; }
html body #cards.passive-mode #cards-list .card.sk-card .card-head { flex-wrap: wrap !important; }
html body #cards.passive-mode #cards-list .card.sk-card .card-head .card-name { flex: 1 1 100% !important; min-width: 0 !important; max-width: 100% !important; width: 100% !important; }
/* плашка «Активное/Улучшение» стоит в углу карты выше имени — место справа под неё в строке имени не нужно */
html body #cards.passive-mode #cards-list .card.sk-card .card-head { padding-right: 0 !important; }
/* тестер, портрет: описание товара у Мурлиона — две строки, а не одна обрезанная */
@media (orientation: portrait) {
  html body .merchant .shop-row small { white-space: normal !important; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  html body .merchant .shop-row { padding: 6px 8px; }
}
/* тестер: текст на картах подарка договора был 8 px и обрезался — не меньше 10.5 px, без обрезки по строкам */
html body #cards.gift-mode .card.tcg .short-line { font-size: max(10.5px, min(6.2cqw, 12px)) !important; -webkit-line-clamp: 6 !important; line-height: 1.15 !important; }
/* тестер: лунная лавка на коротком экране (375×667) уходила за низ — панель поднимается выше */
@media (orientation: portrait) and (max-height: 720px) { html body #lunarshop .menu-panel { margin-top: 14vh !important; } }

/* ---------- итоги забега (в духе Risk of Rain 2): всё на одном экране без прокрутки ---------- */
html body #results.rr { padding: 0 !important; display: block !important; overflow-y: auto; background: radial-gradient(ellipse at 50% 0, #1d2b17 0, #0a0f08 60%) !important; }
html body #results.rr[hidden] { display: none !important; }
.rr-panel { width: min(100%, 480px); margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; gap: 8px; text-align: left;
  padding: max(12px, var(--sa-top, 0px)) max(12px, var(--sa-right, 0px)) max(10px, var(--sa-bottom, 0px)) max(12px, var(--sa-left, 0px)); color: #e8efe0; }
.rr-head { text-align: center; }
.rr-kicker { display: block; font: 900 11px/1 'Nunito', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #9cf05a; }
.rr-title { margin-top: 4px; font: 900 28px/1.05 'Nunito', sans-serif; color: #fff; text-shadow: 0 2px 0 #000, 0 0 18px rgba(255, 90, 70, .35); }
#results.win .rr-title { color: #ffd25e; text-shadow: 0 2px 0 #000, 0 0 18px rgba(255, 210, 94, .45); }
.rr-reason { margin: 4px 0 0; font: 700 12.5px/1.35 'Nunito', sans-serif; color: #b9c4ad; }
.rr-power { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; padding:8px 12px; border:1px solid #81945b88; border-radius:12px; background:#14200fd9; text-align:left; }
.rr-power > span { min-width:0; font:800 11px/1.25 'Nunito',sans-serif; color:#b9c4ad; }
.rr-power strong { display:block; margin-top:2px; font:900 24px/1.1 'Nunito',sans-serif; color:#f4f1df; }
.rr-power > span:last-child { text-align:right; }
.rr-power b { display:block; font-size:13px; color:#dfe8d2; }
.rr-power b.record { color:#c9ff7a; }
/* звёзды мощи (game.js powerStars): золотые — заработанные, тёмные — нет */
.rr-power .rr-stars { display:block; margin-top:3px; font:800 11px/1.2 'Nunito',sans-serif; font-style:normal; color:#dfe8d2; white-space:nowrap; }
.rr-power .rr-stars i, .rr-power .rr-stars s { font-style:normal; text-decoration:none; font-size:16px; letter-spacing:1px; }
.rr-power .rr-stars i { color:#ffd25e; text-shadow:0 0 6px rgba(255,200,60,.55); }
.rr-power .rr-stars s { color:#3d4636; }
.rr-power small { display:block; margin-top:3px; font-size:10px; }
@media (orientation:landscape) and (max-height:560px) { .rr-power { margin-top:4px; padding:4px 10px; } .rr-power strong { display:inline; margin-left:10px; font-size:20px; } }
.rr-reason .results-tip { display: block; margin-top: 4px; color: #ffe08a; }
.rr-top { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 10px; align-items: center; }
.rr-hero { position: relative; display: flex; flex-direction: column; align-items: center; }
.rr-hero img { order: 1; position: relative; z-index: 1; width: 96px; height: 96px; object-fit: contain; object-position: 50% 100%; image-rendering: pixelated; filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .6)); }
.rr-ped { order: 2; width: 84px; height: 18px; margin-top: -12px; border-radius: 50%; background: radial-gradient(#5b7f3f, #1e2a14 72%); box-shadow: 0 0 22px rgba(156, 240, 90, .35); }
.rr-hero b { order: 3; margin-top: 6px; font: 900 13px/1.1 'Nunito', sans-serif; text-align: center; }
.rr-hero small { order: 4; font: 800 11px/1.2 'Nunito', sans-serif; color: #9cf05a; }
.rr-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.rr-stats .rf { display: grid; grid-template-columns: 20px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 5px; align-items: center; padding: 5px 7px; border-radius: 9px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.rr-stats .rf i { grid-row: 1 / 3; font-style: normal; font-size: 15px; text-align: center; }
.rr-stats .rf b { font: 900 14.5px/1.05 'Nunito', sans-serif; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-stats .rf span { font: 700 10.5px/1.1 'Nunito', sans-serif; color: #a9b59c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-card { padding: 8px 10px; border-radius: 12px; background: rgba(12, 18, 10, .85); border: 1px solid rgba(255, 255, 255, .09); }
.rr-card h4 { margin: 0 0 6px; display: flex; font: 900 12px/1 'Nunito', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #c9d4bd; }
.rr-card h4 small { margin-left: auto; text-transform: none; letter-spacing: 0; color: #a9b59c; }
html body #results.rr .src-row { display: grid; grid-template-columns: 112px 1fr 36px; align-items: center; gap: 8px; padding: 2px 0; font: 700 12px/1.2 'Nunito', sans-serif; }
html body #results.rr .src-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #dfe8d2; }
html body #results.rr .src-row i { position: relative; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
html body #results.rr .src-row i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, #5fcf2f, #b8ff6e); }
html body #results.rr .src-row.top i::after { background: linear-gradient(90deg, #e0a23a, #ffd25e); }
html body #results.rr .src-row b { text-align: right; color: #fff; }
.rr-items { display: grid; grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr)); gap: 4px; }
html body #results.rr .rr-items .ri { position: relative; aspect-ratio: 1; min-width: 0; display: grid; place-items: center; border-radius: 7px; background: #1b2418; border: 1.5px solid #3d4b36; overflow: hidden; }
html body #results.rr .rr-items .ri.uncommon { border-color: #4fa83a; }
html body #results.rr .rr-items .ri.rare { border-color: #3f8fe0; }
html body #results.rr .rr-items .ri.epic { border-color: #a35be0; }
html body #results.rr .rr-items .ri.legendary { border-color: #e0a23a; }
html body #results.rr .rr-items .ri.lunar { border-color: #5fc8ff; }
html body #results.rr .rr-items .ri img { width: 84%; height: auto; image-rendering: pixelated; }
html body #results.rr .rr-items .ri b { position: absolute; right: 2px; bottom: 0; font: 900 9.5px/1 'Nunito', sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
.rr-empty { color: #a9b59c; font-size: 12px; }
html body #results.rr .results-syms { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
html body #results.rr .results-syms[hidden] { display: none; }
.rr-reward { display: flex; flex-direction: column; gap: 6px; }
.rr-crys { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: linear-gradient(90deg, rgba(95, 200, 255, .16), rgba(95, 200, 255, .04)); border: 1px solid rgba(127, 216, 255, .35); }
.rr-crys img { width: 26px; height: 26px; }
.rr-crys b { font: 900 20px/1 'Nunito', sans-serif; color: #bfeaff; }
.rr-crys small { font: 700 12px/1.25 'Nunito', sans-serif; color: #d6eef9; }
html body #results.rr .unlock-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 210, 94, .1); border: 1px solid rgba(255, 210, 94, .35); font-size: 12.5px; }
html body #results.rr .unlock-row img { width: 32px; height: 32px; image-rendering: pixelated; }
html body #results.rr .unlock-row em { display: block; font-style: normal; font-size: 10.5px; color: #ffd25e; }
html body #results.rr .unlock-row small { display: block; color: #a9b59c; font-size: 11px; }
.rr-actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; margin-top: auto; }
.rr-btn { min-height: 50px; border: 0; border-radius: 14px; cursor: pointer; font: 900 16px/1 'Nunito', sans-serif; color: #e6eedb; background: rgba(20, 28, 18, .95); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2); }
.rr-btn.primary { color: #10230a; background: linear-gradient(#b8ff6e, #5fcf2f); box-shadow: 0 4px 0 #2f7d17, inset 0 2px 0 rgba(255, 255, 255, .55); text-transform: uppercase; font-size: 18px; }
.rr-btn:active { translate: 0 2px; }
.rr-code { margin: 0; text-align: center; font: 700 10.5px/1.2 'Nunito', sans-serif; color: #6f7b66; }
.rr-code b { color: #a9b59c; }
/* короткий экран: плотнее */
@media (max-height: 700px) and (orientation: portrait) {
  .rr-panel { gap: 6px; }
  .rr-kicker { display: none; }
  .rr-title { font-size: 24px; margin-top: 0; }
  .rr-hero img { width: 80px; height: 80px; }
  .rr-stats .rf { padding: 3px 6px; }
  html body #results.rr .src-row:nth-child(n+4) { display: none; }
  .rr-btn { min-height: 46px; }
}
/* ландшафт: две колонки — слева облик, цифры и кнопки, справа урон и предметы */
@media (orientation: landscape) and (max-height: 560px) {
  .rr-panel { width: min(100%, 900px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: min-content; column-gap: 14px; row-gap: 6px; }
  .rr-head { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: center; gap: 10px; }
  .rr-kicker { display: none; }
  .rr-title { font-size: 22px; margin: 0; }
  .rr-reason { margin: 0; }
  .rr-top { grid-column: 1; }
  .rr-card { grid-column: 2; }
  .rr-reward, .rr-actions, .rr-code { grid-column: 1; }
  .rr-hero img { width: 72px; height: 72px; }
  .rr-actions { margin-top: 0; }
}

/* итоги: старые правила #results-fight (flex, неровные колонки) перебивали плитки — усиливаем */
html body #results.rr #results-fight.rr-stats { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 5px !important; }
html body #results.rr #results-fight .rf { display: grid !important; grid-template-columns: 20px minmax(0, 1fr) !important; grid-template-rows: auto auto !important; column-gap: 5px !important; row-gap: 0 !important;
  align-items: center !important; padding: 4px 7px !important; min-height: 0 !important; border-radius: 9px !important; background: rgba(255, 255, 255, .05) !important; border: 1px solid rgba(255, 255, 255, .08) !important; box-shadow: none !important; }
html body #results.rr #results-fight .rf i { grid-row: 1 / 3 !important; font-size: 14px !important; margin: 0 !important; }
html body #results.rr #results-fight .rf b { font-size: 14px !important; line-height: 1.1 !important; margin: 0 !important; }
html body #results.rr #results-fight .rf span { font-size: 10.5px !important; line-height: 1.1 !important; margin: 0 !important; }
html body #results.rr .rr-reason { font-size: 12px; }
html body #results.rr .rr-reason .results-tip { font-size: 11.5px; }
html body #results.rr #results-fight .rf i { position: static !important; grid-column: 1 !important; opacity: 1 !important; text-align: center; }
html body #results.rr #results-fight .rf b { grid-column: 2 !important; grid-row: 1 !important; padding-right: 0 !important; overflow: hidden; text-overflow: ellipsis; }
html body #results.rr #results-fight .rf span { grid-column: 2 !important; grid-row: 2 !important; display: block !important; }
html body #results.rr #results-fight .rf::before, html body #results.rr #results-fight .rf::after { content: none !important; display: none !important; }
@media (max-height: 700px) and (orientation: portrait) {
  html body #results.rr .rr-reason .results-tip, html body #results.rr .rr-code, html body #results.rr .unlock-row small { display: none !important; }
  html body #results.rr #results-fight .rf:nth-child(n+9) { display: none !important; }
  html body #results.rr .rr-hero img { width: 72px; height: 72px; }
  html body #results.rr .rr-hero b { font-size: 12px; }
  html body #results.rr .rr-top { grid-template-columns: 92px minmax(0, 1fr); }
  html body #results.rr .rr-card { padding: 6px 8px; }
  html body #results.rr .rr-crys { padding: 6px 10px; }
}

/* итоги в ландшафте: три колонки — облик, награда и кнопки | цифры | урон и предметы; без прокрутки на 844×390 */
@media (orientation: landscape) and (max-height: 560px) {
  html body #results.rr .rr-panel { width: min(100%, 980px); display: grid !important; gap: 6px 12px;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "head head head" "hero stats dmg" "reward stats items" "actions stats items"; align-items: start; }
  html body #results.rr .rr-head { grid-area: head; }
  html body #results.rr .rr-top { display: contents; }
  html body #results.rr .rr-hero { grid-area: hero; }
  html body #results.rr #results-fight.rr-stats { grid-area: stats; }
  html body #results.rr .rr-card:not(.rr-items-card) { grid-area: dmg; }
  html body #results.rr .rr-items-card { grid-area: items; }
  html body #results.rr .rr-reward { grid-area: reward; }
  html body #results.rr .rr-actions { grid-area: actions; align-self: end; grid-template-columns: 1fr 1.4fr; }
  html body #results.rr .rr-code, html body #results.rr .rr-reason .results-tip, html body #results.rr .unlock-row small { display: none !important; }
  html body #results.rr .rr-hero img { width: 64px; height: 64px; }
  html body #results.rr .rr-crys { padding: 5px 8px; }
  html body #results.rr .rr-crys b { font-size: 16px; }
  html body #results.rr .rr-crys small { font-size: 11px; }
  html body #results.rr .unlock-row { padding: 4px 8px; }
  html body #results.rr .unlock-row img { width: 26px; height: 26px; }
  html body #results.rr .src-row { grid-template-columns: 96px 1fr 34px; }
  html body #results.rr .rr-btn { min-height: 44px; font-size: 15px; }
}
/* итоги: совет на следующий забег — над кнопками, приглушённо (только в первых забегах, не при выходе по своей воле) */
.rr-tip { margin: 0; padding: 0 4px; text-align: center; font: 700 12px/1.35 'Nunito', sans-serif; color: #c9bf98; }
.rr-tip[hidden] { display: none; }
html body #results.rr .rr-tip + .rr-actions { margin-top: 0; }
html body #results.rr .rr-reward { margin-bottom: auto; }
@media (orientation: landscape) and (max-height: 560px) { html body #results.rr .rr-tip { display: none !important; } }
html body #results.rr .rr-items .rr-empty { grid-column: 1 / -1; }
/* главный экран F2: коды сессий ушли в настройки (наезжали на название мира); шапка с ресурсами — над затемнением .f2 */
html body #menu.f2-menu .menu-codes { display: none !important; }
html body #menu.f2-menu .camp-top { z-index: 5 !important; }
.f2-go small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* главный экран F2 на любом альбомном экране (не только телефон): облик слева, справа место, статы, предметы, внизу кнопка и разделы; ширина не больше 1040 px */
@media (orientation: landscape) and (min-height: 561px) {
  .f2 { padding: calc(64px + var(--sa-top, 0px)) max(24px, calc((100vw - 1040px) / 2)) 24px; gap: 12px; grid-template-columns: 34% 1fr auto; grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "stage where where" "stage stats stats" "stage bag bag" "stage go dock";
    background: radial-gradient(ellipse 30% 60% at 22% 55%, rgba(156, 240, 90, .16), transparent 70%), linear-gradient(90deg, transparent 30%, rgba(4, 7, 4, .7) 45%); }
  .f2-stage img { height: min(48vh, 300px); max-height: none; }
  .f2.drop .f2-stage img { height: min(34vh, 210px); }
  .f2-stats { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .f2-bag { align-self: start; }
  .f2-items { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .f2-cta { align-self: end; }
  .f2-dock { align-self: end; grid-template-columns: repeat(4, 76px); gap: 8px; }
}

/* ---------- главный экран: топ-5 критика (docs/critic/main-screen.md) ---------- */
/* статы: пиксельные иконки игры вместо системных эмодзи, прирост от «Персонажа» мелко */
.f2-stats .f2-ic { flex: none; width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }
.f2-stats em { display: block; margin-top: 2px; font: 800 10px/1.1 'Nunito', sans-serif; font-style: normal; color: #9cf05a; }
/* прогресс по мирам — 12 точек вместо текста «мир 1 из 12» */
.f2-dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.f2-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.f2-dots i.done { background: #9cf05a; }
.f2-dots i.now { background: #ffd25e; box-shadow: 0 0 6px #ffd25e; }
/* новый забег: «Цель забега» и облики, которые вырастут, — вместо пустой коробки предметов */
.f2-bag.goal { min-height: 44px; }
.f2-bag.goal:not(:disabled) { cursor: pointer; }
.f2-goals { margin: 0; padding: 0 0 0 16px; display: grid; gap: 3px; font: 700 12.5px/1.3 'Nunito', sans-serif; color: #dfe8d2; }
.f2-goals li::marker { color: #ffd25e; }
.f2-forms { display: flex; align-items: flex-end; gap: 6px; margin-top: 8px; }
.f2-forms small { flex: none; align-self: center; margin-right: 2px; font: 800 10.5px/1.1 'Nunito', sans-serif; color: #a9b59c; max-width: 64px; }
.f2-forms span { flex: 1; min-width: 0; display: grid; justify-items: center; gap: 2px; }
.f2-forms img { width: 100%; max-width: 46px; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; filter: brightness(0) drop-shadow(0 0 1px rgba(156, 240, 90, .8)); opacity: .75; }
.f2-forms .seen img { filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .65)); opacity: 1; }
.f2-forms .locked img { filter: brightness(0) drop-shadow(0 0 1px rgba(156, 240, 90, .8)); opacity: .75; }
.f2-forms b { font: 800 10px/1 'Nunito', sans-serif; color: #a9b59c; }
.f2-forms .seen b { color: #dfe8d2; }
.f2-forms span > small { max-width: 100%; margin: 0; font-size: 10px; line-height: 1.2; text-align: center; }
.f2-forms .seen > small { color: #c9ff7a; }
.f2-forms-link { display: block; margin-top: 8px; color: #c9ff7a; font: 800 12px/1.3 'Nunito', sans-serif; }
/* Компактный привал: цель и витрина рядом, ссылка остаётся над нижними действиями. */
@media (orientation: landscape) and (max-height: 560px) {
  .f2-bag.goal {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 10px; row-gap: 4px; min-width: 0; min-height: 0;
    max-height: 100%; align-self: stretch; align-content: start; padding: 8px;
  }
  .f2-bag.goal > h4 { grid-column: 1; grid-row: 1; margin: 0; font-size: 12px; line-height: 1.2; }
  .f2-bag.goal > .f2-goals { grid-column: 1; grid-row: 2; gap: 3px; font-size: 11px; line-height: 1.25; }
  .f2-bag.goal > .f2-forms { grid-column: 2; grid-row: 1 / span 2; min-width: 0; gap: 4px; margin: 0; align-items: flex-start; }
  .f2-bag.goal .f2-forms > small { max-width: 42px; font-size: 10px; }
  .f2-bag.goal .f2-forms img { max-width: 34px; }
  .f2-bag.goal .f2-forms b { font-size: 10px; line-height: 1.2; overflow-wrap: anywhere; }
  .f2-bag.goal .f2-forms span > small { font-size: 10px; }
  .f2-bag.goal > .f2-forms-link { grid-column: 1 / -1; grid-row: 3; margin-top: 2px; font-size: 11px; line-height: 1.2; }
}
.f2-bag.goal:not(:disabled):hover { outline: 2px solid rgba(156, 240, 90, .65); outline-offset: 2px; }
.f2-bag:focus-visible { outline: 3px solid #ffd25e; outline-offset: 3px; }
.f2-bag.goal:not(:disabled):active { transform: translateY(1px); }
/* отклик облика на тап и реплика */
.f2-stage img { cursor: pointer; pointer-events: auto; }
.f2-stage img.f2-poke { animation: f2-poke .35s ease-out !important; }
@keyframes f2-poke { 0% { transform: scale(1, 1); } 35% { transform: scale(1.12, .86); } 70% { transform: scale(.95, 1.06); } 100% { transform: scale(1, 1); } }
.f2-say { position: absolute; z-index: 3; left: 50%; top: 4%; translate: -50% 0; padding: 6px 12px; border-radius: 12px; background: #f6f0dc; color: #2a2014; font: 900 13px/1.2 'Nunito', sans-serif;
  white-space: nowrap; opacity: 0; pointer-events: none; box-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.f2-say::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: #f6f0dc; }
.f2-say.on { animation: f2-say 1.8s ease-out both; }
@keyframes f2-say { 0% { opacity: 0; transform: translateY(6px); } 12%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); } }
.f2-stage { position: relative; }
/* «В бой» (новый забег) мягко пульсирует — тянет к главному действию */
.f2.fresh .f2-go { animation: f2-pulse 2.2s ease-in-out infinite; }
@keyframes f2-pulse { 0%, 100% { box-shadow: 0 5px 0 #2f7d17, 0 10px 24px rgba(80, 220, 60, .35), inset 0 2px 0 rgba(255, 255, 255, .6); }
  50% { box-shadow: 0 5px 0 #2f7d17, 0 10px 34px rgba(140, 255, 90, .75), inset 0 2px 0 rgba(255, 255, 255, .6); } }
@media (prefers-reduced-motion: reduce) { .f2.fresh .f2-go, .f2-stage img { animation: none !important; } }
/* «Завершить забег»: зона нажатия 40 px, а не 16 */
.f2-quit { min-height: 40px; padding: 10px 16px; }
/* «Разраб» вне ?debug=1 и лунные монеты до первой монеты — скрыты (game.js renderF2) */
html body #menu.f2-menu .camp-top [hidden] { display: none !important; }
/* портрет: статы сеткой 2×2 под обликом, облик крупнее по центру */
@media (orientation: portrait) {
  /* Keep the caption in its own stage; short phones scroll instead of overlapping stats. */
  .f2 { grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(190px, 1fr) auto auto auto auto; grid-template-areas: "where where" "stage stage" "stats stats" "bag bag" "go go" "dock dock"; overflow-y: auto; overscroll-behavior-y: contain; }
  .f2-stage { min-height: 0; }
  .f2-stats { grid-template-columns: 1fr 1fr; gap: 6px; }
  .f2-stats div { padding: 6px 10px; }
}
/* ландшафт телефона: подписи разделов не меньше 11 px */
@media (orientation: landscape) and (max-height: 560px) {
  .f2-dock { grid-template-columns: repeat(4, 66px); }
  .f2-dock button { font-size: 11px; }
  .f2-quit { min-height: 32px; padding: 6px 12px; }
}
@media (orientation: portrait) { .f2-where { flex-wrap: wrap; row-gap: 4px; } .f2-where small { margin-left: 0; flex-basis: 100%; } }
/* вывеска сундука: надпись («Крупный сундук») сидела на нижнем крае доски — по центру доски */
html body #cards:has(.ch-card) #cards-title { padding-top: calc(var(--th) * .06) !important; padding-bottom: calc(var(--th) * .14) !important; line-height: 1.1 !important; }
/* портрет: кольцо босса убрано — полоса с именем и здоровьем сверху видна весь бой (правило выше прятало её, пока на поле кольцо) */
@media (orientation: portrait) { html body .arena:has(#boss-pads:not([hidden])) .boss-bar:not([hidden]) { display: block !important; } }
@media (orientation: portrait) { html body .arena:has(#boss-pads:not([hidden])) .boss-bar :is(.boss-pic, #boss-name, .boss-bar-track, .boss-shield:not([hidden])) { display: revert !important; } html body .arena:has(#boss-pads:not([hidden])) .boss-bar .boss-head { display: flex !important; } }

/* ---------- критик, мир 1 (docs/critic/world1-ux.md) ---------- */
/* 2. ландшафт: имя улучшения не выходит за карточку, между картами зазор 10 px */
@media (orientation: landscape) {
  html body #cards.passive-mode #cards-list { gap: 10px !important; }
  html body #cards.passive-mode #cards-list .card.sk-card .card-body { min-width: 0 !important; flex: 1 1 0 !important; overflow: hidden; }
  html body #cards.passive-mode #cards-list .card.sk-card .card-head { min-width: 0 !important; max-width: 100% !important; }
  html body #cards.passive-mode #cards-list .card.sk-card .card-head .card-name { width: 100% !important; flex: 1 1 100% !important; white-space: normal !important; overflow-wrap: anywhere; text-overflow: clip !important; }
}
@media (orientation: landscape) { html body #cards.passive-mode #cards-list .card.sk-card .card-head { flex-direction: column !important; align-items: flex-start !important; flex-wrap: nowrap !important; } html body #cards.passive-mode #cards-list .card.sk-card .card-head > * { max-width: 100% !important; } }
@media (orientation: landscape) { html body #cards.passive-mode #cards-list .card.sk-card.sk-card.sk-card .card-head { flex-wrap: nowrap !important; } }
@media (orientation: landscape) { html body #cards.passive-mode .cards-box { column-gap: 10px !important; } html body #cards.passive-mode #cards-list .card.sk-card.sk-card.sk-card .card-head { align-items: center !important; } html body #cards.passive-mode #cards-close { white-space: nowrap; } }
@media (orientation: landscape) { html body #cards.passive-mode .cards-box.cards-box.cards-box { column-gap: 10px !important; } }
/* 3. окна выше HUD: пока открыт выбор (#cards), полоса мира, строка умения формы и тост не просвечивают сквозь затемнение */
body:has(#cards:not(.hidden)) :is(#arena .scene-top, #evo-status, #toast) { visibility: hidden !important; }
.tut-hole.hand-in .tut-hand { right: 6px; left: auto; bottom: -16px; scale: 1 1; }

/* 5. цели нажатия ≥ 40 px; ⓘ одного размера (28 px) с зоной нажатия 44 px */
.chain-stop { min-height: 40px; padding: 10px 18px; }
html body #cards.chest-more #cards-list .nc-all { min-height: 40px !important; display: inline-flex !important; align-items: center; }
html body #cards.chest-more #cards-list .card.nc .nc-price { min-height: 44px; display: inline-flex; align-items: center; }
html body #sheet .sheet-stats { min-height: 40px; padding: 8px 14px; }
@media (orientation: landscape) and (max-height: 560px) { .f2-quit { min-height: 40px; padding: 10px 14px; } }
html body #cards #cards-list i.ch-info.link-more, html body #cards #cards-list .card i.link-more.sk-info { width: 28px !important; height: 28px !important; min-width: 28px !important; font-size: 14px !important; position: absolute; }
html body #cards #cards-list i.ch-info.link-more::after, html body #cards #cards-list .card i.link-more.sk-info::after { content: '' !important; position: absolute !important; inset: -8px !important; display: block !important; background: none !important; }
/* 7. развилка: выделенный путь и подсказка «Нажми ещё раз»; подписи статов не мельче 10.5 px */
.path-card { position: relative; }
.path-card .pc-confirm { display: none; position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 3; padding: 8px 6px; border-radius: 10px; text-align: center; font: 900 12.5px/1.2 'Nunito', sans-serif; color: #10230a; background: linear-gradient(#b8ff6e, #5fcf2f); box-shadow: 0 3px 0 #2f7d17; }
.path-card.picked { outline: 3px solid var(--pc, #9cf05a); outline-offset: 2px; }
.path-card.picked .pc-confirm { display: block; }
html body #evolution .path-card .pc-stat small, html body #evolution .path-card .pc-role { font-size: 10.5px !important; }

/* 8. HUD боя (портрет): поля 16/16, подпись «В болото» убрана (у остальных кнопок подписей нет), плашка здоровья шире,
   «Поглощение» — справа под строкой мира, как она, с общей тенью текста */
@media (orientation: portrait) {
  html body .arena .hud-right { margin-right: 10px; }
  html body .arena .home-btn small { display: none !important; }
  html body .arena .hero-card-text, html body .arena .hp-line { min-width: 100px; }
  html body .arena .evo-status { left: auto !important; right: 12px !important; transform: none !important; text-align: right; font-size: 11px; text-shadow: 0 1px 0 #000, 0 0 4px rgba(0, 0, 0, .8); }
}
/* 9. тени: одна для карточек-панелей, одна для заголовков; плоским плиткам привала — тень панели; «ЕЩЁ СУНДУК?» — тень заголовка и подложка */
:root { --sh-card: 0 6px 14px rgba(0, 0, 0, .45); --ts-title: 0 2px 0 #000, 0 0 10px rgba(0, 0, 0, .6); }
.f2-stats div, .f2-bag, .f2-dock button { box-shadow: var(--sh-card); }
html body #cards.chest-more #cards-title { text-shadow: var(--ts-title) !important; }
html body #cards.chest-more .cards-box { background: rgba(10, 14, 8, .78); border-radius: 18px; padding-bottom: 14px; box-shadow: var(--sh-card); }
/* 10. сетки без дыр: нечётная последняя плитка статов — на всю ширину ряда */
@media (orientation: portrait) { .f2-stats div:last-child:nth-child(odd) { grid-column: 1 / -1; } }
html body #results.rr #results-fight .rf:last-child:nth-child(odd) { grid-column: 1 / -1 !important; }
html body #results.rr #results-fight .rf:first-child { grid-column: auto !important; }
/* 10. заставка мира: подпись сразу под картой (было: от низа экрана, ≈196 px пустоты между ними) */
.cutscene.cs-world { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.cutscene.cs-world .cs-map { margin-bottom: 0; }
.cutscene.cs-world .cs-text { position: relative; bottom: auto; left: auto; right: auto; }
.rr-btn { white-space: nowrap; }
/* сумка для карт выглядывала за низ экрана на 43 px — стоит у края целиком */
html body #cards .bag-satchel { bottom: max(0px, var(--sa-bottom, 0px)) !important; }
/* «Ты получил» на картах сундука: компактнее, чтобы 4 дара и «Забрать» влезали в экран (описание — по ⓘ) */
html body #cards.gift-mode #cards-list .ch-card .ch-line { display: none !important; }
html body #cards.gift-mode #cards-list { gap: 14px !important; }
html body #cards.gift-mode #cards-list .ch-card { min-height: 0 !important; }
.rr-taken { display: block; margin-top: 3px; font: 700 11.5px/1.3 'Nunito', sans-serif; color: #ff9d8f; }
.cutscene .cs-stat.cs-rule { opacity: .8; font-size: 12px; }
/* развилка в портрете: строка умения пути видна (2 строки), а не только «✦ Три руны» */
@media (orientation: portrait) { html body #evolution .path-card .pc-skill small { display: -webkit-box !important; -webkit-line-clamp: 2; font-size: 10.5px; line-height: 1.25; } }
/* логово-сцена босса: размер задаёт game.js (--ssize: в портрете сцена ниже арены и прижата к низу); сверху — размытая копия той же сцены */
.boss-backdrop.scene, .boss-backdrop.scene .arena-face { background-size: var(--ssize, cover) !important; background-repeat: no-repeat !important; }
.boss-backdrop.scene { isolation: isolate; }
.boss-backdrop.scene::before { content: ''; position: absolute; inset: -20px; z-index: -1; background: var(--tall) center bottom / cover no-repeat; filter: blur(10px) brightness(.55) saturate(.9); }
/* слои логова: фон — размытая копия (::before), над ней — резкая сцена (::after) нужного размера, сверху — лица босса */
.boss-backdrop.scene { background-image: none !important; background-color: #07050a !important; }
.boss-backdrop.scene::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--tall) no-repeat; background-size: var(--ssize, cover); background-position: var(--sx, 50%) bottom; }
.boss-backdrop.scene .arena-face { z-index: 1; }
/* тень героя: над картой «Обороны» (z 2), но под героем и врагами; мягкая; в прыжке/выпаде бледнее (--so из game.js heroShadow), на бегу слабее */
html body #arena .hero-shadow { z-index: 6; height: 11px; margin-top: -6px; opacity: var(--so, 1); filter: blur(1.5px);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, .38) 40%, rgba(0, 0, 0, .12) 62%, transparent 72%) !important; transition: transform .12s, opacity .12s; }
html body #arena.running .hero-shadow { animation: none; opacity: calc(var(--so, 1) * .75); }
html body #arena .hero-shadow { height: 13px; margin-top: -7px; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .68) 0, rgba(0, 0, 0, .48) 38%, rgba(0, 0, 0, .16) 62%, transparent 72%) !important; }

/* Эссенция роста: тот же болотный интерфейс, один спокойный выбор по нажатию героя. */
#essence-evolution[hidden], #essence-chip[hidden], #essence-hud-ready[hidden], #f2-evolution-ready[hidden] { display: none !important; }
.essence-evolution { position: fixed; inset: 0; z-index: 170; display: grid; place-items: center;
  padding: max(10px, var(--sa-top, 0px)) max(10px, var(--sa-right, 0px)) max(10px, var(--sa-bottom, 0px)) max(10px, var(--sa-left, 0px));
  background: rgba(4, 7, 4, .88); color: #e6eedb; font-family: 'Nunito', sans-serif; }
.essence-shell { width: min(960px, 100%); max-height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  border: 2px solid #627c40; border-radius: 16px; background: #111a0e; box-shadow: 0 8px 28px #0009; overflow: hidden; }
.essence-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #627c4055; }
.essence-head h2 { margin: 0; font-size: 23px; font-weight: 900; line-height: 1.15; color: #f4f1df; }
.essence-head p { margin: 3px 0 0; font-size: 12px; line-height: 1.3; color: #bfcdb0; }
.essence-close { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px; border: 1px solid #627c40; background: #25321d; color: #f4f1df; font: 900 19px 'Nunito', sans-serif; cursor: pointer; }
.essence-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px; display: grid; grid-template-columns: minmax(140px, 190px) minmax(0, 1fr); align-items: start; gap: 12px; }
.essence-current { min-width: 0; padding: 10px; border: 1px solid #627c4055; border-radius: 12px; background: #0b100b; text-align: center; }
.essence-current img { display: block; width: 100%; height: 126px; object-fit: contain; image-rendering: pixelated; }
.essence-current h3 { margin: 6px 0 3px; font-size: 16px; line-height: 1.2; color: #f4f1df; }
.essence-current p { margin: 4px 0; font-size: 12px; line-height: 1.3; color: #bfcdb0; }
.essence-current-stats { display: grid; gap: 5px; margin-top: 10px; font-size: 12px; text-align: left; }
.essence-choice { min-width: 0; }
.essence-wallet { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 14px; font-weight: 800; color: #e6eedb; }
.essence-wallet b { font-size: 22px; color: #c9ff7a; }
.essence-wallet small { margin-left: auto; font-size: 11px; font-weight: 700; color: #bfcdb0; }
.essence-status { margin: 5px 0 10px; min-height: 1.3em; font-size: 12px; line-height: 1.35; color: #e6eedb; }
.essence-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.essence-option { min-width: 0; min-height: 44px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px;
  border: 2px solid #627c4066; border-radius: 10px; background: #1a2416; color: #e6eedb; font: 800 13px/1.25 'Nunito', sans-serif; cursor: pointer; text-align: center; }
.essence-option img { width: 72px; height: 72px; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
.essence-option > b, .essence-option h3 { margin: 0; font-size: 14px; line-height: 1.2; overflow-wrap: anywhere; color: #f4f1df; }
.essence-role { display: block; font-size: 11px; line-height: 1.3; font-weight: 700; color: #c3d2b2; }
.essence-option-stats { display: grid; gap: 3px; width: 100%; font-size: 11px; line-height: 1.3; font-weight: 700; color: #e6eedb; }
.essence-option-stats > span { display: block; }
.essence-option:hover:not(:disabled) { border-color: #9cf05a; background: #25321d; }
.essence-option.selected, .essence-option[aria-pressed="true"] { border-color: #c9ff7a; box-shadow: inset 0 0 0 1px #c9ff7a; background: #25321d; }
.essence-option.locked, .essence-option:disabled { cursor: default; border-style: dashed; }
.essence-option.locked .essence-role { color: #d4c9ac; }
.essence-preview { grid-column: 1 / -1; min-width: 0; padding: 10px 12px; border: 1px solid #627c4055; border-radius: 10px; background: #0b100b; font-size: 12px; line-height: 1.35; }
.essence-preview:empty { display: none; }
.essence-preview h3, .essence-preview p { margin: 0 0 6px; }
.essence-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.essence-compare > * { min-width: 0; }
.essence-compare b { color: #f4f1df; }
.essence-compare small { display: block; color: #bfcdb0; }
.essence-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid #627c4055; background: #172011; }
.essence-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
.essence-footer > .essence-preview { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 8px 10px; }
.essence-footer > .essence-preview:empty { display: none; }
.essence-footer .essence-preview > h3 { margin: 0; font-size: 13px; line-height: 1.25; }
.essence-footer .essence-preview > p { max-width: none; margin: 0; font-size: 11px; line-height: 1.25; }
.essence-footer .essence-preview > h3 + p { text-align: right; }
.essence-footer .essence-preview > .essence-compare { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 8px; }
.essence-footer .essence-preview > .essence-compare p { margin: 0; font-size: 12px; line-height: 1.3; color: #f4f1df; font-weight: 800; }
.essence-footer .essence-preview > .essence-compare + p { grid-column: 1 / -1; font-size: 10px; color: #bfcdb0; }
/* Graph card detail remains scrollable without displacing the purchase action. */
.essence-footer > #essence-preview { max-height: min(28dvh, 240px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #627c40 #0b100b; }
.essence-footer #essence-preview > p:nth-of-type(n+3), .essence-footer #essence-preview > details { grid-column: 1 / -1; text-align: left; }
#essence-preview details, .essence-current details { min-width: 0; padding-top: 5px; border-top: 1px solid #627c4044; color: #bfcdb0; text-align: left; font-size: 11px; line-height: 1.4; }
#essence-preview summary, .essence-current summary { padding: 4px 0; color: #d5e2c7; cursor: pointer; }
#essence-preview summary:focus-visible, .essence-current summary:focus-visible { outline: 2px solid #c9ff7a; outline-offset: 2px; }
#essence-preview details p, .essence-current details p { margin-top: 6px; overflow-wrap: anywhere; line-height: 1.45; }
.essence-footer p { flex: 1; margin: 0; max-width: 360px; font-size: 11px; line-height: 1.3; color: #bfcdb0; }
.essence-buy { min-height: 46px; max-width: 100%; padding: 10px 18px; border: 2px solid #65b533; border-radius: 12px;
  background: linear-gradient(#b8ff6e, #5fcf2f); box-shadow: 0 3px 0 #2f7d17; color: #10230a; font: 900 15px/1.2 'Nunito', sans-serif; cursor: pointer; }
.essence-buy:disabled { border-color: #627c4066; background: #34412b; box-shadow: none; color: #d0d7c6; cursor: default; }
.essence-chip { min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 7px;
  padding: 5px 8px; border: 1px solid #627c40; border-radius: 9px; background: #111a0e; color: #c9ff7a; font: 800 11px/1.1 'Nunito', sans-serif; cursor: pointer; }
.essence-chip b { font-size: 16px; }
.essence-chip small { flex-basis: 100%; font-size: 10px; color: #f4f1df; }
.f2-evolution-ready { display: block; padding: 3px 7px; border-radius: 6px; background: #25321d; color: #c9ff7a; font-size: 11px; }
#hero-card[role="button"], #f2-evolution-enter[role="button"] { cursor: pointer; }
#hero-card.evolution-ready .portrait { filter: drop-shadow(0 0 4px #9cf05a); }
#f2-evolution-enter.evolution-ready .f2-ped { box-shadow: 0 0 24px #9cf05a77; }
.essence-evolution button:focus-visible, .essence-chip:focus-visible, #hero-card[role="button"]:focus-visible, #f2-evolution-enter[role="button"]:focus-visible, #slime[role="button"]:focus-visible { outline: 3px solid #ffd25e; outline-offset: 3px; }
@media (orientation: portrait) {
  .essence-head { padding: 10px 12px; }
  .essence-head h2 { font-size: 21px; }
  .essence-content { grid-template-columns: minmax(0, 1fr); padding: 10px 12px; gap: 10px; }
  .essence-current { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 10px; text-align: left; padding: 8px; }
  .essence-current img { grid-column: 1; grid-row: 1 / span 4; width: 64px; height: 78px; align-self: center; }
  .essence-current > :not(img) { grid-column: 2; }
  .essence-current h3 { margin-top: 0; }
  .essence-current-stats { margin-top: 4px; gap: 3px; }
  .essence-option { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 6px; row-gap: 4px; padding: 8px; text-align: left; align-items: center; }
  .essence-option img { grid-column: 1; grid-row: 1 / span 2; width: 56px; height: 64px; }
  .essence-option > b { grid-column: 2; align-self: end; font-size: 13px; }
  .essence-option > .essence-role { grid-column: 2; align-self: start; }
  .essence-option > .essence-option-stats { grid-column: 1 / -1; font-size: 11px; }
  .essence-option > strong { grid-column: 1 / -1; font-size: 12px; }
  .essence-footer { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 6px; padding: 8px 12px; }
  .essence-footer .essence-preview > .essence-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .essence-footer .essence-preview > h3 + p { font-size: 10px; }
  .essence-footer p { max-width: none; }
  .essence-buy { width: 100%; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .essence-evolution { padding: max(6px, var(--sa-top, 0px)) max(10px, var(--sa-right, 0px)) max(6px, var(--sa-bottom, 0px)) max(10px, var(--sa-left, 0px)); }
  .essence-head { padding: 5px 10px; }
  .essence-head h2 { font-size: 19px; }
  .essence-content { grid-template-columns: 128px minmax(0, 1fr); gap: 8px; padding: 7px 10px; }
  .essence-current { padding: 6px; }
  .essence-current img { height: 64px; }
  .essence-current h3 { font-size: 13px; }
  .essence-current-stats { margin-top: 6px; font-size: 11px; gap: 3px; }
  .essence-options { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .essence-options:has(> .essence-option:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .essence-option { padding: 5px 4px; gap: 2px; }
  .essence-option > strong { font-size: 12px; }
  .essence-option img { width: 44px; height: 44px; }
  .essence-option > b, .essence-option h3 { font-size: 12px; }
  .essence-option-stats, .essence-role { font-size: 10px; }
  .essence-wallet { font-size: 12px; }
  .essence-wallet b { font-size: 17px; }
  .essence-status { margin: 3px 0 6px; font-size: 11px; }
  .essence-preview { padding: 6px 8px; }
  .essence-footer { padding: 6px 10px; }
  .essence-footer > .essence-preview { padding: 5px 8px; }
  .essence-footer > #essence-preview { max-height: min(27dvh, 112px); }
  .essence-footer .essence-preview > .essence-compare p { font-size: 11px; }
  .essence-buy { min-height: 44px; padding: 8px 12px; font-size: 14px; }
  .essence-chip { padding: 4px 6px; }
  .essence-chip small { font-size: 9px; }
}

/* UX: заметные ресурсы и готовность, спокойные действия, пять товаров. */
#chest-wallet[hidden], #essence-purchase-reveal[hidden], #essence-continue[hidden], #merchant [hidden] { display: none !important; }
.chest-wallet { display: flex; align-items: center; justify-content: center; gap: 14px; width: max-content; max-width: 100%; margin: 8px auto 4px; padding: 8px 18px;
  grid-column: 1 / -1; border: 1px solid #8d7f4755; border-radius: 12px; background: #172011; color: #e8dfbf; }
.chest-wallet > span { font: 800 13px/1.2 'Nunito', sans-serif; }
.chest-wallet > b { display: flex; align-items: center; gap: 7px; font: 900 30px/1 'Nunito', sans-serif; color: #f4da86; }
.chest-wallet img { width: 26px; height: 26px; image-rendering: pixelated; }
html body #cards.chest-more #cards-list .card.nc:not(.poor) .nc-price,
html body .essence-buy:not(:disabled) {
  border: 1px solid #91ab65; background: linear-gradient(#506d39, #354d28) !important; color: #f2edda !important;
  box-shadow: 0 3px 0 #24361a, inset 0 1px 0 #c9df9e33 !important; text-shadow: 0 1px 0 #24361a; }
html body #cards.chest-more #cards-list .card.nc:not(.poor) .nc-price b { color: #f2edda !important; }
html body #cards.chest-more #cards-list .card.nc .nc-price { gap: 6px; }
html body .essence-buy:not(:disabled):hover { background: linear-gradient(#5a7740, #405b2e) !important; }

.essence-symbol { flex: 0 0 12px; display: inline-block; width: 12px; height: 15px; border-radius: 3px 7px 3px 7px; transform: rotate(45deg);
  background: #c9ff7a; border: 1px solid #eaffc8; box-shadow: inset -3px -3px 0 #739f3a, 0 0 5px #9cf05a44; }
.essence-chip { column-gap: 7px; }
.essence-chip:has(#essence-hud-ready:not([hidden])) { border-color: #c9ff7a; box-shadow: 0 0 0 2px #9cf05a33; }
.essence-chip small { color: #f2edda; font-weight: 900; }
.f2-evolution-ready { width: max-content; max-width: 100%; margin: 5px auto 0; padding: 5px 9px; border: 1px solid #9cf05a; background: #25391a; color: #eef9d7 !important; }
#hero-card.evolution-ready .portrait { filter: drop-shadow(0 0 7px #b6ef71) drop-shadow(0 0 2px #efffd8); }
#f2-evolution-enter.evolution-ready #f2-hero { filter: drop-shadow(0 0 9px #b6ef7188) drop-shadow(0 5px 3px #0008); }
#slime.evolution-ready { filter: drop-shadow(0 0 9px #b6ef7199); }
#slime.evolution-ready::after { content: 'Нажми на героя'; position: absolute; z-index: 14; left: 50%; top: 100%; transform: translateX(-50%);
  width: max-content; max-width: 150px; padding: 5px 8px; border: 1px solid #9cf05a; border-radius: 7px; background: #172511;
  color: #eef9d7; font: 900 12px/1.2 'Nunito', sans-serif; text-shadow: none; pointer-events: none; }
/* Поле масштабирует героя целиком: текст готовности остаётся в читаемом HUD, а не в масштабе спрайта. */
#slime.evolution-ready::after { display: none; }
.float.t-essence { color: #d9ff9f; font: 900 17px/1.15 'Nunito', sans-serif; text-shadow: 0 2px 0 #102008, 1px 0 0 #102008, -1px 0 0 #102008; }

.essence-purchase-reveal { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px;
  min-width: 0; text-align: center; border: 1px solid #91ab6577; border-radius: 14px; background: radial-gradient(ellipse at 50% 40%, #45602a66, transparent 65%), #111a0e;
  animation: essence-reveal-in .35s ease-out both; }
.essence-purchase-reveal img { width: min(220px, 58vw); height: 210px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 5px 8px #0008); }
.essence-purchase-reveal h3 { margin: 0; font: 900 23px/1.2 'Nunito', sans-serif; color: #f4f1df; }
.essence-purchase-reveal p { max-width: 400px; margin: 0; font: 700 13px/1.4 'Nunito', sans-serif; color: #d5e2c7; }
.essence-purchase-reveal p > span { display: block; margin-top: 3px; line-height: 1.4; }
#essence-evolution.is-purchased :is(.essence-current, .essence-choice, #essence-preview, #essence-buy) { display: none !important; }
#essence-evolution.is-purchased .essence-content { grid-template-columns: minmax(0, 1fr); }
.essence-continue { min-width: 180px; }
@keyframes essence-reveal-in { from { opacity: 1; transform: translateY(4px) scale(.97); } to { opacity: 1; transform: none; } }

/* Один редкий блик только у легендарного арта; под описаниями движения нет. */
html body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card:not(.legendary) .ch-art::after { display: none !important; animation: none !important; }
html body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card.legendary .ch-art::after {
  display: block !important; opacity: .4; background: linear-gradient(110deg, transparent 38%, #fff0b455 49%, transparent 60%) !important;
  animation: legendary-calm-sheen 8s ease-in-out infinite !important; }
@keyframes legendary-calm-sheen { 0%, 82% { translate: -150% 0; } 96%, 100% { translate: 150% 0; } }
html body #cards #cards-list .ch-card.legendary { filter: drop-shadow(0 0 6px #d7a53e55) drop-shadow(0 4px 6px #0008) !important; }
#merchant .shop-row2 { display: none !important; }
#merchant .shop-cards.merchant-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#merchant .shop-row.legendary { border-color: #d5b561 !important; background: linear-gradient(120deg, #4c3c1855, #292514) !important; box-shadow: inset 0 0 0 1px #d5b56144, 0 0 8px #d5b56122; }
#merchant .shop-item:has(.legendary) .shop-price:not(.poor):not(.done) { color: #ffe4a1; box-shadow: inset 0 0 0 1px #d5b56188; }
#merchant .shop-item:has(.legendary) .card-art { box-shadow: inset 0 0 0 1px #d5b56166, 0 0 8px #d5b56122; }
#merchant :is(.shop-row.legendary img, .card.legendary .card-art img) { animation: legendary-icon-glow 8s ease-in-out infinite; }
@keyframes legendary-icon-glow { 0%, 75%, 100% { filter: drop-shadow(0 2px 2px #0008); } 88% { filter: drop-shadow(0 0 4px #d5b56188) brightness(1.06); } }
@media (orientation: landscape) and (max-height: 560px) {
  .chest-wallet { margin: 3px auto; padding: 5px 14px; gap: 10px; }
  .chest-wallet > b { font-size: 25px; }
  .essence-purchase-reveal { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 16px; padding: 10px; text-align: left; }
  .essence-purchase-reveal img { width: 150px; height: 132px; grid-column: 1; grid-row: 1 / span 3; }
  .essence-purchase-reveal h3 { grid-column: 2; font-size: 21px; }
  .essence-purchase-reveal p { grid-column: 2; }
  .essence-purchase-reveal p { max-width: 280px; }
  #slime.evolution-ready::after { font-size: 11px; padding: 4px 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .essence-purchase-reveal { animation: none; }
  #merchant :is(.shop-row.legendary img, .card.legendary .card-art img) { animation: none; }
  html body:not(.ui-s3) #cards:not(.boss-ped) #cards-list .ch-card.legendary .ch-art::after { display: none !important; animation: none !important; }
}

/* Две покупки рядом: сундук за золото, облик за эссенцию. */
html body #essence-chip:not([hidden]) {
  position: relative !important; inset: auto !important; display: flex !important; flex-direction: column; flex-wrap: nowrap;
  align-items: center; justify-content: center; gap: 3px; width: 148px; min-width: 0; min-height: 80px; height: auto;
  padding: 5px 8px; border: 1px solid #658440; border-radius: 13px; background: linear-gradient(#25351b, #111c0e);
  color: #f2edda; box-shadow: inset 0 1px #b9d28733, 0 3px 8px #0008; font: 900 13px/1.15 'Nunito', sans-serif;
  cursor: pointer; box-sizing: border-box; z-index: auto;
}
#essence-chip .evolution-action-art { width: 36px; height: 30px; object-fit: contain; image-rendering: pixelated; }
#essence-chip .evolution-wallet { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #d9e5ba; }
#essence-chip .evolution-wallet b { font-size: 15px; }
#essence-chip .essence-symbol { width: 10px; height: 14px; }
#essence-chip small { flex: none; font-size: 11px; color: #c4d1ac; }
#essence-next-step[hidden] { display: none !important; }
html body #essence-chip.ready { border-color: #cbf88d; background: linear-gradient(#3c5427, #1b2b13); box-shadow: inset 0 0 0 1px #b9ef7555, 0 0 16px #b0ed6555; }
#essence-chip.ready #essence-hud-ready { color: #f2ffb4; }
#essence-chip:disabled { cursor: default; filter: saturate(.35); opacity: .7; }
#dock:has(> #essence-chip:not([hidden])) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
#dock #essence-chip:not([hidden]) { width: 100%; min-height: 76px; }
html body #dock #essence-chip:not([hidden]) { display: flex !important; border: 1px solid #658440 !important; border-image: none !important;
  background: linear-gradient(#25351b, #111c0e) !important; border-radius: 13px !important; padding: 5px 8px !important;
  box-shadow: inset 0 1px #b9d28733, 0 3px 8px #0008 !important; text-shadow: none !important; }
html body #dock #essence-chip.ready { border-color: #cbf88d !important; background: linear-gradient(#3c5427, #1b2b13) !important; box-shadow: 0 0 16px #b0ed6555 !important; }
html body #dock #essence-chip .evolution-action-art { position: static !important; width: 36px !important; height: 30px !important; }
html body #dock #essence-chip small { position: static !important; display: block; font-size: 11px !important; color: #f2ffb4 !important; }
html body #dock #essence-chip small[hidden] { display: none !important; }
@media (orientation: landscape) {
  .ui-swamp .arena #dock:has(> #essence-chip:not([hidden])) { display: flex; align-items: end; gap: 14px; }
  html body .ui-swamp .arena #dock #essence-chip:not([hidden]), html.ui-swamp body .arena #dock #essence-chip:not([hidden]) { width: 148px; }
}
@media (orientation: portrait) {
  #pp .pp-actions:has(> #essence-chip:not([hidden])) { gap: 14px !important; align-items: center; }
  #pp #essence-chip:not([hidden]) { width: 148px; flex: 0 1 148px; }
}

/* Выбранный вариант 4: одинаковые каменные пьедесталы для двух покупок. */
html body #pp #essence-chip:not([hidden]), html body #dock #essence-chip:not([hidden]),
html body #pp #pp-chest, html body .arena #dock #dock-chest#dock-chest {
  position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important;
  justify-content: flex-start !important; gap: 3px !important; flex: 0 1 142px !important; width: 142px !important;
  min-height: 142px !important; height: 142px !important; padding: 0 4px !important; margin: 0 !important;
  border: 0 !important; border-image: none !important; border-radius: 0 !important; background: none !important;
  box-shadow: none !important; text-shadow: 0 2px 2px #000 !important; filter: none !important; isolation: isolate;
}
html body :is(#pp, #dock) :is(#essence-chip, #pp-chest, #dock-chest)::before {
  content: '' !important; display: block !important; position: absolute !important; top: 57px !important; left: 50% !important;
  translate: -50% 0 !important; transform: none !important; width: 124px !important; height: 30px !important;
  border: 2px solid #6f8051 !important; border-radius: 50% !important;
  background: radial-gradient(ellipse, #9fa77d, #3c4d2a 65%) !important;
  box-shadow: 0 7px 0 #27371d, 0 12px 9px #0009 !important; z-index: -1 !important; animation: none !important;
}
html body #pp #essence-chip .evolution-action-art, html body #dock #essence-chip .evolution-action-art,
html body #pp #pp-chest > img, html body .arena #dock #dock-chest .dock-chest-ic {
  position: relative !important; flex: none !important; width: 88px !important; height: 80px !important; margin: 0 !important;
  object-fit: contain !important; image-rendering: pixelated; z-index: 1; filter: drop-shadow(0 4px 4px #0008) !important;
}
html body #pp #pp-chest > span { display: flex !important; flex-direction: column !important; gap: 5px !important; margin: 9px 0 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
html body #essence-chip > .evolution-action-art + span, html body .arena #dock #dock-chest > b { display: block !important; margin: 9px 0 0 !important; font-size: 13px !important; color: #eef2d7 !important; }
html body #pp #pp-chest > span b { color: #eef2d7 !important; font-size: 13px !important; }
html body #pp #pp-chest > span small, html body #dock #dock-chest > small { color: #f2dda0 !important; background: #17250f !important; padding: 2px 9px !important; border-radius: 7px; font-size: 12px !important; box-shadow: none !important; }
html body :is(#pp, #dock) #essence-chip.ready::before { box-shadow: 0 7px 0 #27371d, 0 0 18px #b8ed7977 !important; }
html body :is(#pp, #dock) #essence-chip:disabled .evolution-action-art { filter: grayscale(.8) brightness(.65) !important; }
html body :is(#pp, #dock) #essence-chip:disabled { opacity: .8; }

/* Предложенная копия: одно описание вместо двух рядов одинаковых чисел. */
.copy-next, .copy-unit, .copy-star { display: block; }
.copy-next { margin-bottom: 6px; color: #ddf3a9; font-size: 11px; font-weight: 900; }
.copy-unit { margin-bottom: 3px; color: #c4cbbb; font-size: 10px; }
.copy-star { margin-top: 6px; color: #ffe296; font-size: 11px; }
html body:not(.ui-s3) #cards #cards-list .ch-card .ch-line { display: block !important; -webkit-line-clamp: unset !important; max-height: none !important; }
.im2-next > b { display: block; }
.im2-next > p { margin: 6px 0 0; }

/* Receipt actions remain in the viewport, independently of the scrollable cards. */
html body #arena .hero-card-text { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: center !important; gap: 4px !important; }
html body #arena .hero-card-text #portrait-name { display: flex !important; position: static !important; flex: none !important; height: 14px; min-height: 14px; margin: 0 !important; line-height: 14px !important; }
html body #arena .hero-card-text #portrait-form { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body #arena .hero-card-text .hp-line { display: block !important; position: relative !important; flex: none !important; height: 16px !important; min-height: 16px !important; margin: 0 !important; }
html body #arena .hero-card-text .hp-line #portrait-hp { position: absolute !important; inset: 0 !important; translate: none !important; transform: none !important; display: grid !important; place-items: center !important; line-height: 1 !important; }
html body #cards.gift-mode .cards-box {
  display: flex !important; flex-direction: column !important; gap: 8px !important;
  width: min(1060px, calc(100vw - 24px)) !important; max-height: calc(100dvh - 24px - var(--sa-top, 0px) - var(--sa-bottom, 0px)) !important;
  min-height: 0 !important; overflow: hidden !important; margin: auto !important; padding: 12px !important; box-sizing: border-box;
}
html body #cards.gift-mode .cards-box > :is(#cards-title, #cards-sub) { flex: none !important; margin: 0 !important; }
html body #cards.gift-mode #cards-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important;
  flex: 1 1 auto !important; min-height: 0 !important; overflow: auto !important; padding: 4px 2px !important; margin: 0 !important; width: 100% !important; }
html body #cards.gift-mode #cards-list > .card { width: 100% !important; min-width: 0 !important; max-width: none !important; flex: none !important; }
html body #cards.gift-mode:not(.boss-ped) #cards-list > .ch-card { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important;
  gap: 5px !important; padding: 10px !important; height: auto !important; min-height: 230px !important; max-height: none !important; aspect-ratio: auto !important; }
html body #cards.gift-mode:not(.boss-ped) #cards-list .ch-card .ch-art { position: relative !important; inset: auto !important; transform: none !important; translate: none !important; flex: none !important; width: 82px !important; height: 70px !important; margin: 0 !important; }
html body #cards.gift-mode:not(.boss-ped) #cards-list .ch-card .ch-body { display: flex !important; flex-direction: column !important; align-items: stretch !important; position: static !important;
  inset: auto !important; transform: none !important; translate: none !important; width: 100% !important; min-width: 0 !important; height: auto !important; padding: 0 !important; gap: 4px !important; text-align: left; }
html body #cards.gift-mode:not(.boss-ped) #cards-list .ch-card :is(.ch-name,.ch-rar,.ch-line) { display: block !important; position: static !important; inset: auto !important; transform: none !important; width: 100% !important; height: auto !important;
  min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; }
html body #cards.gift-mode:not(.boss-ped) #cards-list .ch-card .ch-name { font-size: 14px !important; line-height: 1.2 !important; }
html body #cards.gift-mode:not(.boss-ped) #cards-list .ch-card .ch-line { font-size: 12px !important; line-height: 1.35 !important; }
html body #cards.gift-mode:not(.boss-ped) #cards-list .ch-card .ch-info { top: 8px !important; right: 8px !important; bottom: auto !important; left: auto !important; }
html body #cards.gift-mode .cards-box > .cards-rail { display: flex !important; flex: none !important; position: relative !important; inset: auto !important;
  width: 100% !important; height: auto !important; align-items: center !important; justify-content: center !important; padding: 4px 0 6px !important; z-index: 4; }
html body #cards.gift-mode.play-mode .cards-box > .cards-rail:has(> #cards-close:not(.hidden)) { display: flex !important; }
html body #cards.gift-mode #cards-close:not(.hidden) { display: block !important; position: relative !important; inset: auto !important; translate: none !important;
  flex: none !important; margin: 0 !important; height: 48px !important; min-height: 48px !important; width: min(320px, 100%) !important; }
@media (orientation: landscape) { html body #cards.gift-mode #cards-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* The icon halo is above the button surface and below its content, never behind
   an isolated negative stacking layer. A paid ordinary chest uses the same state. */
html body :is(#pp, #dock) :is(#essence-chip, #pp-chest, #dock-chest) { overflow: visible !important; }
html body :is(#pp, #dock) :is(#essence-chip, #pp-chest, #dock-chest).ready::after {
  content: '' !important; display: block !important; position: absolute !important; pointer-events: none !important;
  z-index: 0 !important; inset: 1px 9px auto !important; height: 92px !important; width: auto !important; border: 0 !important; border-radius: 50% !important;
  background: radial-gradient(ellipse at 45% 57%, #fff3a9b8 0%, #e7df438f 20%, #94ee5385 42%, #51b84140 62%, transparent 75%) !important;
  box-shadow: 0 0 18px #c2ef5d66 !important; opacity: .9; transform: scale(1); animation: paid-action-radiance 2.4s ease-in-out infinite !important;
}
html body :is(#pp, #dock) :is(#essence-chip, #pp-chest, #dock-chest) > * { z-index: 1; }
@keyframes paid-action-radiance { 50% { opacity: 1; transform: scale(1.13) rotate(7deg); filter: hue-rotate(16deg) brightness(1.17); } }
/* Evolution choice: one scene, prominent art, a single selected rim. */
#essence-evolution { background:#030805e8; }
#essence-evolution .essence-shell { width:min(1000px,100%); height:min(740px,calc(100dvh - 28px)); border:0; border-radius:22px; background:radial-gradient(ellipse at 65% 26%,#344b284f,transparent 66%),#101a13; box-shadow:0 20px 90px #000b; }
#essence-evolution .essence-head { padding:18px 22px 10px; border:0; gap:14px; }
#essence-evolution .essence-heading { flex:1; min-width:0; }
#essence-evolution .essence-eyebrow { display:block; font-size:9px; font-weight:900; letter-spacing:.14em; color:#acc887; line-height:1.4; }
#essence-evolution .essence-head h2 { font-size:28px; margin-top:3px; }
#essence-evolution .essence-head p { font-size:12px; color:#b6c5ab; }
#essence-evolution .essence-wallet { flex:none; align-items:center; flex-wrap:nowrap; gap:10px; font-size:11px; }
#essence-evolution .essence-wallet b { margin-left:5px; font-size:25px; color:#e2f5b1; }
#essence-evolution .essence-close { border:0; background:#ffffff09; border-radius:50%; color:#ccd7bd; }
#essence-evolution .essence-close:hover { background:#ffffff16; }
#essence-evolution .essence-content { padding:4px 22px 16px; gap:22px; grid-template-columns:154px minmax(0,1fr); scrollbar-width:thin; }
#essence-evolution .essence-current { padding:10px 0; background:none; border:0; border-radius:0; }
#essence-evolution .essence-current-art { width:100%; height:142px; background:radial-gradient(ellipse at 50% 70%,#a8c1741f,transparent 65%); }
#essence-evolution .essence-current img { width:100%; height:100%; }
#essence-evolution .essence-current-copy h3 { font-size:16px; margin:4px 0 6px; }
#essence-evolution .essence-current-stats { display:block; font-size:11px; line-height:1.6; color:#aebea1; }
#essence-evolution .essence-current-stats b { color:#d4e1c5; }
#essence-evolution .essence-status { margin:5px 0 12px; font-size:12px; color:#bac8ac; }
#essence-evolution .essence-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-items:stretch; }
#essence-evolution .essence-options:has(>.essence-option:nth-child(3):last-child) { grid-template-columns:repeat(3,minmax(0,1fr)); }
#essence-evolution .essence-option { position:relative; display:flex; flex-direction:column; gap:5px; padding:12px 8px 14px; border:0; border-radius:17px; text-align:center; background:linear-gradient(180deg,#91b47408,#759b431a); box-shadow:none; transition:background .16s ease,box-shadow .16s ease; }
#essence-evolution .essence-option:hover { background:linear-gradient(180deg,#91b47416,#759b432d); }
#essence-evolution .essence-option.selected { background:linear-gradient(180deg,#bde88516,#70963f38); box-shadow:inset 0 0 0 2px #b8cc8c,0 7px 24px #0003; }
#essence-evolution .essence-option-art { display:grid; place-items:center; flex:none; width:100%; height:156px; background:radial-gradient(ellipse at 50% 66%,#b7d17c26,transparent 66%); }
#essence-evolution .essence-option img { width:160px; max-width:100%; height:160px; object-fit:contain; filter:drop-shadow(0 6px 4px #0005); transition:transform .18s ease; }
#essence-evolution .essence-option.selected img { transform:translateY(-4px); }
#essence-evolution .essence-option>b { align-self:stretch; font-size:17px; line-height:1.15; min-height:2.3em; display:grid; place-items:center; overflow-wrap:normal; }
#essence-evolution .essence-role { font-size:11px; line-height:1.25; color:#c9d8b8; }
#essence-evolution .essence-option-benefit { font-size:11px; font-weight:700; line-height:1.35; color:#aebb9e; min-height:2.7em; }
#essence-evolution .essence-option>strong { margin-top:auto; padding-top:7px; display:flex; gap:7px; align-items:center; justify-content:center; color:#e2f5b1; font-size:22px; line-height:1.2; }
#essence-evolution .essence-option>strong small { font-size:10px; color:#b9c8a9; font-weight:700; }
#essence-evolution .essence-option.locked { cursor:pointer; }
#essence-evolution .essence-option.locked>strong { color:#dfc38b; }
#essence-evolution .essence-selection-mark { position:absolute; top:9px; right:9px; display:grid; place-items:center; width:23px; height:23px; border-radius:50%; background:#bdd58f; color:#263b1b; opacity:0; font-size:15px; }
#essence-evolution .essence-option.selected .essence-selection-mark { opacity:1; }
#essence-evolution .essence-footer { background:#0b140ed9; border:0; padding:12px 22px 16px; gap:9px 16px; }
#essence-evolution .essence-footer>#essence-preview { border:0; border-radius:0; padding:0 2px; background:none; max-height:min(29dvh,240px); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; }
#essence-evolution .essence-preview-heading h3 { font-size:19px; line-height:1.15; margin:1px 0 3px; color:#f4f1df; }
#essence-evolution .essence-preview-price { align-self:center; font-size:13px; color:#d9e9b6; font-weight:900; }
#essence-evolution .essence-footer .essence-compare { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
#essence-evolution .essence-footer .essence-compare p { font-size:13px; line-height:1.4; }
#essence-evolution .essence-compare small { font-size:10px; font-weight:700; color:#a8b69a; }
#essence-evolution .essence-compare b { white-space:nowrap; }
#essence-evolution .essence-compare b span { color:#8dab68; padding:0 3px; }
#essence-evolution .essence-health-note { grid-column:1/-1; font-size:9px; color:#91a284; }
#essence-evolution .essence-ability { grid-column:1/-1; display:flex; align-items:baseline; gap:10px; padding-top:3px; font-size:12px; color:#e4ebd8; }
#essence-evolution .essence-ability>span { flex:none; font-size:10px; font-weight:900; color:#b7ca9b; }
#essence-evolution .essence-ability small { color:#91a284; }
#essence-evolution .essence-ability p { font-size:12px; color:#e4ebd8; max-width:none; }
#essence-evolution .essence-math { grid-column:1/-1; border:0; font-size:11px; padding-top:2px; }
#essence-evolution .essence-math summary { font-size:10px; padding:6px 0; color:#abbf93; }
#essence-evolution .essence-math p { font-size:11px; max-width:none; margin:6px 0; }
#essence-evolution .essence-preview-empty { grid-column:1/-1; font-size:13px; padding:5px 0; color:#b1c39b; }
#essence-evolution .essence-footer>p { font-size:10px; color:#99ac87; }
#essence-evolution .essence-buy { min-width:230px; min-height:48px; font-size:16px; border-radius:14px; }
#essence-evolution .essence-buy[hidden] { display:none!important; }
#essence-evolution .essence-purchase-reveal { align-self:center; border:0; background:none; padding:4px; gap:6px; animation:essence-scene-arrive .3s ease-out both; }
#essence-evolution .essence-reveal-art { position:relative; isolation:isolate; width:260px; height:260px; display:grid; place-items:center; }
#essence-evolution .essence-reveal-art img { position:relative; width:100%; height:100%; grid-area:1/1; filter:drop-shadow(0 7px 7px #0007); }
#essence-evolution .essence-reveal-rays { position:absolute; z-index:-1; inset:-20px; border-radius:50%; background:radial-gradient(circle,#d8f5a338,#a5ce5c14 45%,transparent 68%),repeating-conic-gradient(from 10deg,transparent 0deg 22deg,#d8f5a30e 23deg 35deg,transparent 36deg 45deg); mask-image:radial-gradient(circle,#000 30%,transparent 68%); animation:essence-rays-arrive .55s ease-out both; }
#essence-evolution .essence-reveal-copy h3 { font-size:31px; line-height:1.15; margin:3px 0 7px; }
#essence-evolution .essence-reveal-copy .essence-eyebrow { color:#d7e9a4; }
#essence-evolution .essence-reveal-copy p { max-width:none; }
#essence-evolution .essence-reveal-role { color:#c6d8b1; font-size:14px; }
#essence-evolution .essence-reveal-stats { display:flex; justify-content:center; gap:25px; padding:14px 0 9px; }
#essence-evolution .essence-reveal-stats>span { display:flex; gap:7px; font-size:12px; color:#a9bd94; }
#essence-evolution .essence-reveal-stats b { font-size:17px; color:#edf3df; }
#essence-evolution .essence-reveal-next { font-size:11px; color:#a5b991; }
@keyframes essence-scene-arrive { from { transform:translateY(8px) scale(.97); } to { transform:none; } }
@keyframes essence-rays-arrive { from { opacity:.2; transform:scale(.7) rotate(-10deg); } to { opacity:1; transform:none; } }
@media (orientation:portrait) {
 #essence-evolution { padding:8px; }
 #essence-evolution .essence-shell { height:calc(100dvh - 16px); border-radius:18px; }
 #essence-evolution .essence-head { padding:15px 14px 8px; gap:8px; }
 #essence-evolution .essence-head h2 { font-size:23px; }
 #essence-evolution .essence-wallet { flex-direction:column; gap:4px; font-size:9px; }
 #essence-evolution .essence-wallet>.essence-symbol { display:none; }
 #essence-evolution .essence-wallet b { font-size:20px; margin-left:3px; }
 #essence-evolution .essence-content { grid-template-columns:minmax(0,1fr); padding:0 12px 12px; gap:8px; }
 #essence-evolution .essence-current { display:grid; grid-template-columns:64px minmax(0,1fr); column-gap:9px; padding:0; text-align:left; }
 #essence-evolution .essence-current>.essence-current-art { grid-column:1; grid-row:1/3; width:64px; height:72px; }
 #essence-evolution .essence-current>.essence-current-copy { grid-column:2; align-self:end; }
 #essence-evolution .essence-current>.essence-math { grid-column:2; }
 #essence-evolution .essence-current-copy h3 { font-size:14px; margin:2px 0; }
 #essence-evolution .essence-current-stats { font-size:10px; margin:0; }
 #essence-evolution .essence-current img { height:72px; width:64px; }
 #essence-evolution .essence-current summary { padding:3px 0; }
 #essence-evolution .essence-status { margin:0 0 8px; font-size:11px; }
 #essence-evolution .essence-options { gap:6px; }
 #essence-evolution .essence-option { padding:8px 5px 10px; gap:5px; border-radius:13px; }
 #essence-evolution .essence-option-art { height:110px; }
 #essence-evolution .essence-option img { height:110px; width:110px; }
 #essence-evolution .essence-option>b { font-size:13px; min-height:2.3em; }
 #essence-evolution .essence-role { font-size:9px; }
 #essence-evolution .essence-option-benefit { font-size:10px; min-height:2.7em; }
 #essence-evolution .essence-option>strong { font-size:19px; flex-wrap:wrap; gap:5px; padding-top:3px; }
 #essence-evolution .essence-option>strong small { font-size:9px; }
 #essence-evolution .essence-selection-mark { top:5px; right:5px; width:19px; height:19px; font-size:12px; }
 #essence-evolution .essence-footer { padding:10px 14px 12px; gap:7px; }
 #essence-evolution .essence-footer>#essence-preview { max-height:245px; gap:5px 8px; }
 #essence-evolution .essence-preview-heading h3 { font-size:17px; }
 #essence-evolution .essence-preview-price { font-size:11px; }
 #essence-evolution .essence-footer .essence-compare { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 14px; }
 #essence-evolution .essence-footer .essence-compare p { font-size:13px; }
 #essence-evolution .essence-ability { display:block; }
 #essence-evolution .essence-ability p { font-size:11px; margin-top:2px; }
 #essence-evolution .essence-buy { width:100%; min-width:0; }
 #essence-evolution .essence-footer>p { text-align:center; }
 #essence-evolution .essence-reveal-art { width:250px; height:250px; }
 #essence-evolution .essence-reveal-copy h3 { font-size:28px; }
}
@media (orientation:landscape) and (max-height:560px) {
 #essence-evolution .essence-shell { height:calc(100dvh - 12px); border-radius:16px; }
 #essence-evolution .essence-head { padding:7px 16px 4px; }
 #essence-evolution .essence-heading>.essence-eyebrow { display:none; }
 #essence-evolution .essence-head h2 { font-size:21px; margin:0; }
 #essence-evolution .essence-head p { font-size:10px; margin-top:1px; }
 #essence-evolution .essence-wallet b { font-size:21px; }
 #essence-evolution .essence-content { padding:0 16px 7px; grid-template-columns:112px minmax(0,1fr); gap:14px; }
 #essence-evolution .essence-current { padding:0; }
 #essence-evolution .essence-current-art { height:80px; }
 #essence-evolution .essence-current-copy h3 { font-size:12px; margin:2px 0; }
 #essence-evolution .essence-current-stats { font-size:9px; line-height:1.3; }
 #essence-evolution .essence-current summary { font-size:9px; padding:3px 0; }
 #essence-evolution .essence-status { margin:0 0 5px; font-size:10px; }
 #essence-evolution:has(.essence-option) .essence-status { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); }
 #essence-evolution .essence-options { grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
 #essence-evolution .essence-options:has(>.essence-option:nth-child(2):last-child) { grid-template-columns:repeat(2,minmax(0,1fr)); }
 #essence-evolution .essence-option { padding:4px 6px 6px; gap:2px; border-radius:11px; }
 #essence-evolution .essence-option-art { height:75px; }
 #essence-evolution .essence-option img { width:82px; height:82px; }
 #essence-evolution .essence-option>b { font-size:12px; min-height:1.2em; }
 #essence-evolution .essence-role { font-size:9px; }
 #essence-evolution .essence-option-benefit { font-size:10px; min-height:1.3em; }
 #essence-evolution .essence-option>strong { font-size:17px; padding-top:3px; }
 #essence-evolution .essence-option>strong small { font-size:9px; }
 #essence-evolution .essence-footer { padding:7px 16px 9px; gap:5px 12px; }
 #essence-evolution .essence-footer>#essence-preview { max-height:99px; gap:3px 10px; }
 #essence-evolution .essence-preview-heading { display:flex; gap:7px; align-items:baseline; }
 #essence-evolution .essence-preview-heading h3 { font-size:15px; margin:0; }
 #essence-evolution .essence-footer .essence-compare p { font-size:12px; }
 #essence-evolution .essence-compare small { font-size:9px; }
 #essence-evolution .essence-health-note { display:none; }
 #essence-evolution .essence-ability { padding:0; }
 #essence-evolution .essence-ability p { font-size:11px; }
 #essence-evolution .essence-math summary { padding:3px 0; }
 #essence-evolution .essence-buy { min-height:44px; padding:8px 14px; font-size:14px; }
 #essence-evolution .essence-purchase-reveal { display:grid; grid-template-columns:190px minmax(0,1fr); gap:20px; text-align:left; justify-self:center; }
 #essence-evolution .essence-reveal-art { width:190px; height:190px; }
 #essence-evolution .essence-reveal-copy h3 { font-size:27px; }
 #essence-evolution .essence-reveal-stats { justify-content:start; gap:20px; }
}
@media (prefers-reduced-motion:reduce) {
 #essence-evolution .essence-option,#essence-evolution .essence-purchase-reveal,#essence-evolution .essence-reveal-rays { animation:none!important; transition:none!important; }
 #essence-evolution .essence-option img { transition:none; }
}
@media (prefers-reduced-motion: reduce) {
  html body :is(#pp, #dock) :is(#essence-chip, #pp-chest, #dock-chest).ready::after { animation: none !important; opacity: 1; transform: none; }
}

/* Phone reference: one choice row, a small current-form label, details on demand.
   The outer phone host supplies the real visible height, including browser UI. */
html:not(.rot-host), html:not(.rot-host) body, #app { height:var(--visible-height,100dvh); }
#essence-evolution { padding:max(8px,var(--sa-top)) max(8px,var(--sa-right)) max(8px,var(--sa-bottom)) max(8px,var(--sa-left)); }
#essence-evolution .essence-shell { height:auto; max-height:calc(var(--visible-height,100dvh) - max(8px,var(--sa-top)) - max(8px,var(--sa-bottom))); grid-template-rows:auto minmax(0,1fr) auto; }
#essence-evolution .essence-head { padding:12px 14px 8px; }
#essence-evolution .essence-head h2 { font-size:23px; }
#essence-evolution:has(.essence-option) :is(.essence-heading>.essence-eyebrow,#essence-progress,#essence-status) { display:none; }
#essence-evolution .essence-content { display:flex; flex-direction:column; gap:8px; padding:0 12px 10px; }
#essence-evolution .essence-current { display:flex; align-items:center; gap:7px; padding:0; min-height:32px; font-size:11px; color:#acbd9c; }
#essence-evolution .essence-current img { width:30px; height:30px; object-fit:contain; flex:none; }
#essence-evolution .essence-current b { color:#dde8cc; }
#essence-evolution .essence-choice { width:100%; align-self:stretch; }
#essence-evolution .essence-options { gap:6px; }
#essence-evolution .essence-option { gap:4px; padding:7px 5px 9px; border-radius:12px; }
#essence-evolution .essence-option-art { height:92px; }
#essence-evolution .essence-option img { height:92px; width:92px; }
#essence-evolution .essence-option>b { font-size:12px; min-height:2.3em; }
#essence-evolution .essence-role { font-size:9px; }
#essence-evolution .essence-option-benefit { font-size:10px; min-height:2.6em; }
#essence-evolution .essence-option>strong { font-size:19px; gap:4px; padding-top:3px; }
#essence-evolution .essence-option>strong small { display:none; }
#essence-evolution .essence-footer { padding:8px 14px 12px; gap:7px; }
#essence-evolution .essence-footer>#essence-preview { display:block; max-height:none; overflow:visible; }
#essence-evolution .essence-footer>p { display:none; }
#essence-evolution .essence-quick-result { display:flex; flex-direction:column; gap:4px; font-size:12px; color:#d3dfc1; }
#essence-evolution .essence-quick-result>b { font-size:15px; color:#f2f5e7; }
#essence-evolution .essence-selection-details { margin-top:5px; font-size:11px; }
#essence-evolution .essence-selection-details>summary { cursor:pointer; padding:7px 0; color:#acc28e; }
#essence-evolution .essence-selection-full { max-height:min(28dvh,200px); overflow:auto; overscroll-behavior:contain; padding:4px 0 8px; }
#essence-evolution .essence-selection-full .essence-compare { margin:7px 0; }
#essence-evolution .essence-buy { min-width:0; width:100%; min-height:48px; }
@media (orientation:portrait) {
 #pp { padding-bottom:calc(12px + var(--sa-bottom)); }
 #pp>.loot-strip { flex:none; min-height:66px; max-height:130px; overflow-y:auto; padding-top:10px; padding-bottom:8px; }
}
@media (orientation:landscape) and (max-height:560px) {
 #essence-evolution .essence-head { padding:7px 14px 4px; }
 #essence-evolution .essence-head h2 { font-size:20px; }
 #essence-evolution .essence-content { gap:4px; padding-bottom:5px; }
 #essence-evolution .essence-current { min-height:24px; }
 #essence-evolution .essence-current img { width:24px; height:24px; }
 #essence-evolution .essence-option-art,#essence-evolution .essence-option img { height:64px; }
 #essence-evolution .essence-option { padding:3px 5px 5px; gap:2px; }
 #essence-evolution .essence-option-benefit { min-height:1.3em; }
 #essence-evolution .essence-option>b { min-height:1.2em; }
 #essence-evolution .essence-footer { padding:5px 14px 7px; display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,.7fr); align-items:end; }
 #essence-evolution .essence-footer>#essence-preview { grid-column:1; }
 #essence-evolution .essence-footer>.essence-buy { grid-column:2; }
 #essence-evolution .essence-selection-full { max-height:80px; }
}

/* Audit 3–6: common utility windows, readable offers and a browsable catalogue.
   Story illustrations and rarity colours retain their existing roles. */
:root {
 --window-bg: #101b14; --window-raised: #1c2b1e; --window-edge: #557447;
 --window-text: #f1f3e5; --window-muted: #bdcbb0; --window-accent: #b8ec77;
 --window-radius: 16px;
}
html body :is(#forms,#collection,#lunarshop,#menu-settings-screen) .menu-panel,
html body :is(.info-card,.tut-box,.newlook-panel),
html body :is(#sheet,.pause-panel),
html body :is(#tavern,#evolution) .evolution-panel,
html body #merchant .merchant-panel,
html body #backpack .bp-panel,
html body #essence-evolution .essence-shell {
 border: 1px solid var(--window-edge) !important; border-image: none !important;
 border-radius: var(--window-radius) !important;
 background: radial-gradient(ellipse at 75% 0%,#6d9b3520,transparent 70%),var(--window-bg) !important;
 box-shadow: 0 16px 60px #0009 !important; color: var(--window-text);
}
html body :is(.info-card,.tut-box,.newlook-panel)::before,
html body :is(.info-card,.tut-box,.newlook-panel)::after { content:none !important; }
html body :is(#info-close,#backpack-close,#sheet-close,#essence-close,.meta-back) {
 width:44px !important; height:44px !important; min-width:44px; min-height:44px;
 padding:10px !important; border:1px solid #76915a66 !important; border-image:none !important;
 border-radius:12px !important; background:#263821 !important; box-shadow:none !important;
 color:var(--window-text); display:grid; place-items:center;
}
html body :is(#info-close,#backpack-close,#sheet-close) img { width:22px; height:22px; object-fit:contain; }
html body :is(.info-card,.tut-box) { padding:20px; }
html body .info-card { width:min(560px,calc(100vw - 24px)) !important; max-height:calc(var(--visible-height,100dvh) - 24px) !important; overflow:auto; }
html body #info-close { position:sticky !important; top:0 !important; right:auto !important; float:right; z-index:3; margin:0 0 6px 8px; }
html body :is(.info-desc,.im2-desc,.info-note,.info-sub,.im2-next p,.tut-body p) { font-size:14px !important; line-height:1.5 !important; }
html body .info-card :is(h3,.im2 h3) { font-size:22px; line-height:1.2; }
html body .info-form .info-stage { width:180px; height:180px; margin:0 auto; }
html body .info-form .info-skill { display:grid; gap:7px; margin-top:14px; color:var(--window-text); font-size:14px; line-height:1.5; }
html body .info-form #info-anim { width:100%; height:100%; object-fit:contain; }
html body .form-unlock { padding:10px 12px; border-radius:10px; background:#24341f; color:#d1e5b6; font-size:14px; line-height:1.4; }
html body .form-unlock.is-open { color:var(--window-accent); }
html body .info-btn { min-height:44px; font-size:14px; }
html body :is(button,summary,select,input):focus-visible { outline:3px solid #e2f2b3 !important; outline-offset:3px; }
html body :is(.menu-btn,.pause-btn,.tut-ok) { min-height:44px; }
html body .tut-box { color:var(--window-text) !important; }
html body .tut-body :is(b,p) { color:var(--window-text) !important; }

/* All five offers remain available; only the board scrolls, never the exit. */
html body #merchant { padding:max(10px,var(--sa-top)) max(10px,var(--sa-right)) max(10px,var(--sa-bottom)) max(10px,var(--sa-left)); align-items:center; }
html body #merchant .merchant-panel {
 width:min(1000px,100%) !important; height:min(740px,calc(var(--visible-height,100dvh) - 20px));
 max-height:100%; padding:14px !important; display:flex !important; flex-direction:column !important;
 justify-content:flex-start !important; gap:10px; overflow:hidden;
}
html body #merchant .merchant-head { flex:none; margin:0; min-height:36px; }
html body #merchant .merchant-head b { font:900 20px/1.2 'Nunito',sans-serif; }
html body #merchant .merchant-head small { font-size:12px; }
html body #merchant .merchant-say { flex:none; padding:0; margin:0; font-size:13px; line-height:1.4; }
html body #merchant .merchant-say small { display:none; }
html body #merchant .shop-board { flex:1; min-height:0; padding:2px; background:none !important; border:0 !important; box-shadow:none !important; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#87a660 #18241a; }
html body #merchant .shop-cards.merchant-list { display:grid !important; grid-template-columns:minmax(0,1fr) !important; align-items:stretch !important; gap:10px !important; margin:0 !important; padding:0 !important; }
html body #merchant .shop-item { position:relative !important; display:grid !important; grid-template-columns:minmax(0,1fr) 96px; align-items:center; gap:10px; padding:12px !important; width:auto !important; height:auto !important; min-height:128px !important; border:1px solid #78915655; border-radius:12px; background:var(--window-raised); }
html body #merchant .shop-item>.card { display:none !important; }
html body #merchant .shop-row { grid-column:1; grid-row:1; display:flex !important; align-items:center; gap:10px; min-width:0; width:auto !important; margin:0; padding:0 !important; border:0 !important; border-image:none !important; box-shadow:none !important; border-radius:0; background:none !important; text-align:left; }
html body #merchant .shop-row img { flex:none; width:46px; height:56px; object-fit:contain; }
html body #merchant .shop-row span { display:grid; gap:6px; min-width:0; }
html body #merchant .shop-row span>b { font:900 15px/1.25 'Nunito',sans-serif !important; color:var(--window-text); white-space:normal !important; overflow:visible !important; text-overflow:clip !important; overflow-wrap:anywhere; }
html body #merchant .shop-row small { display:block !important; font:700 13px/1.4 'Nunito',sans-serif !important; color:var(--window-muted); white-space:normal !important; overflow:visible !important; -webkit-line-clamp:unset !important; }
html body #merchant .shop-item .shop-price { grid-column:2; grid-row:1; position:static !important; width:96px !important; min-height:48px; height:auto !important; margin:0 !important; padding:9px 6px !important; border:1px solid #91bd62 !important; border-image:none !important; border-radius:10px !important; background:#324d22 !important; box-shadow:none !important; color:#f0f9df; font:900 13px/1.4 'Nunito',sans-serif !important; white-space:normal; transform:none !important; translate:none !important; }
html body #merchant .shop-item .shop-price s { display:block; color:#c8d0bc; font-size:12px; }
html body #merchant .shop-item .shop-price:disabled { background:#273026 !important; color:#bac5ad; border-color:#66745a !important; opacity:.7; }
html body #merchant .shop-item .shop-sale { top:2px !important; left:8px !important; right:auto !important; padding:1px 5px !important; font-size:11px !important; transform:none !important; rotate:0deg !important; }
html body #merchant .shop-evo { display:none !important; }
html body #merchant #merchant-close { flex:none; width:100%; margin:0; min-height:46px; }
@media (orientation:landscape) {
 html body #merchant .shop-cards.merchant-list { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
 html body #merchant .merchant-panel { padding:10px 14px !important; gap:6px; }
 html body #merchant .merchant-say { display:none; }
 html body #merchant .shop-item { min-height:120px !important; }
}

/* A route to the next form precedes the archive. Branches open on demand. */
html body #forms .menu-panel { width:min(900px,calc(100vw - 20px)); max-height:calc(var(--visible-height,100dvh) - 20px); display:flex; flex-direction:column; overflow:hidden; padding:16px; gap:10px; }
html body #forms :is(.screen-head,.sheet-note,.menu-btn) { flex:none; margin:0; }
html body #forms .sheet-note { font-size:13px; line-height:1.4; color:var(--window-muted); }
html body #forms .forms-grid { min-height:0; overflow:auto; gap:12px; padding:2px 3px 8px; overscroll-behavior:contain; scrollbar-width:thin; }
html body #forms .forms-next { padding:12px; border-radius:12px; background:#273b20; }
html body #forms .forms-next h3 { margin:0 0 5px; font-size:17px; }
html body #forms .forms-next p { margin:0 0 10px; font-size:13px; color:#cadab9; line-height:1.4; }
html body #forms .forms-next-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
html body #forms .form-next { padding:9px 5px; display:flex; flex-direction:column; align-items:center; justify-content:start; gap:5px; border:1px solid #9abf6855; border-radius:10px; background:#101d12; color:var(--window-text); font:900 13px/1.3 'Nunito',sans-serif; }
html body #forms .form-next img { width:76px; height:76px; object-fit:contain; }
html body #forms .form-next small { font-size:12px; font-weight:700; color:var(--window-accent); margin-top:auto; }
html body #forms .forms-filters { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
html body #forms .forms-filters label { display:grid; gap:5px; font-size:12px; color:var(--window-muted); }
html body #forms select { width:100%; min-height:44px; border:1px solid #667e4c; border-radius:9px; padding:7px; color:var(--window-text); background:#1d2d1b; font:800 14px 'Nunito',sans-serif; }
html body #forms .forms-branch { margin:0; padding:0; }
html body #forms details.forms-branch { border:1px solid #52683e; border-radius:10px; overflow:clip; background:#172519; }
html body #forms .forms-branch>summary { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:52px; padding:12px; cursor:pointer; font-size:15px; }
html body #forms .forms-branch>summary::after { content:'+'; color:var(--window-accent); font-size:20px; }
html body #forms .forms-branch[open]>summary::after { content:'−'; }
html body #forms .forms-branch>summary span { margin-left:auto; font-size:12px; color:var(--window-muted); }
html body #forms .forms-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); padding:10px; gap:8px; }
html body #forms .form-cell { padding:10px 8px; min-height:150px; border:1px solid #6f85533d; border-radius:10px; background:#20301d; text-align:center; gap:7px; color:var(--window-text); }
html body #forms .form-cell img { width:78px; height:78px; border-radius:0; object-fit:contain; background:none; }
html body #forms .form-cell.locked img { filter:brightness(.12) sepia(1) saturate(.3) drop-shadow(0 0 2px #c5df9d); }
html body #forms .form-cell b { font-size:14px; line-height:1.3; }
html body #forms .form-cell small { font-size:12px; line-height:1.4; color:#bacbad; }
html body #forms .form-cell.discovered small { color:var(--window-accent); }
html body #forms .forms-empty { font-size:14px; color:var(--window-muted); padding:12px; }

/* Backpack art stays in item illustrations; the container follows its content. */
html body #backpack { display:grid; place-items:center; padding:12px; background:#030906e8 !important; }
html body #backpack[hidden] { display:none !important; }
html body #backpack .bp-panel { position:relative !important; inset:auto !important; width:min(800px,100%); max-height:calc(var(--visible-height,100dvh) - 24px); height:auto; padding:16px; gap:12px; }
html body #backpack .bp-head { padding:0; margin:0; background:none; box-shadow:none; display:grid; grid-template-columns:1fr 44px; gap:7px 12px; }
html body #backpack .bp-head h2 { font:900 23px/1.2 'Nunito',sans-serif !important; color:var(--window-text); }
html body #backpack .bp-head small { grid-column:1; font-size:13px; line-height:1.5; color:var(--window-muted); text-shadow:none; }
html body #backpack-close { grid-column:2; grid-row:1/3; align-self:start; }
html body #backpack .bp-grid { flex:0 1 auto; min-height:110px; max-height:60dvh; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:10px; padding:3px; }
html body #backpack .bp-item { min-height:124px; padding:10px 7px; border-radius:10px; background:radial-gradient(circle at 50% 25%,var(--tint),#122015) !important; }
html body #backpack .bp-item img { width:62px; height:62px; }
html body #backpack .bp-item small { display:block; overflow:visible; font-size:13px; line-height:1.3; -webkit-line-clamp:unset; }
html body #backpack .bp-item b { font-size:12px; }

/* Keep the existing compact evolution composition, improve decision text only. */
html body #essence-evolution .essence-shell { width:min(900px,100%); }
html body #essence-evolution .essence-current { font-size:12px; }
html body #essence-evolution .essence-option>b { font-size:14px; line-height:1.25; }
html body #essence-evolution :is(.essence-role,.essence-option-benefit) { font-size:12px; line-height:1.4; }
html body #essence-evolution .essence-selection-details { font-size:13px; }
html body #essence-evolution .essence-selection-details>summary { min-height:44px; padding:11px 0; }
html body #essence-evolution .essence-selection-full { max-height:min(35dvh,260px); }
html body #essence-evolution :is(.essence-math p,.essence-math summary,.essence-compare small) { font-size:12px; line-height:1.4; }
html body #essence-evolution .essence-option>strong { font-size:20px; }

/* One persistent readiness cue. Notifications no longer occupy the arena centre. */
html body #slime.evolution-ready, html body #hero-card.evolution-ready .portrait { filter:none; }
html body #toast { position:fixed !important; top:calc(92px + var(--sa-top)) !important; bottom:auto !important; left:50% !important; right:auto !important; transform:translateX(-50%) !important; width:max-content !important; max-width:min(360px,calc(100vw - 32px)); padding:10px 14px !important; border:1px solid #7c9756 !important; border-image:none !important; border-radius:12px !important; background:#142317f2 !important; box-shadow:0 6px 22px #0006 !important; font:800 14px/1.4 'Nunito',sans-serif !important; text-align:center; pointer-events:none; }
html body #toast::before,html body #toast::after { display:none !important; }
@media (orientation:landscape) and (max-height:560px) {
 html body #toast { top:calc(70px + var(--sa-top)) !important; }
 html body #forms .forms-next-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
 html body #forms .menu-panel { padding:12px; gap:6px; }
 html body #forms .sheet-note,html body #forms .forms-next p { display:none; }
 html body #forms .forms-next { padding:8px; }
 html body #forms .forms-next h3 { margin-bottom:6px; font-size:15px; }
 html body #forms .form-next { display:grid; grid-template-columns:40px 1fr; text-align:left; padding:5px; }
 html body #forms .form-next img { grid-row:1/3; width:40px; height:40px; }
 html body #essence-evolution .essence-option-art,html body #essence-evolution .essence-option img { height:58px; }
 html body #essence-evolution .essence-option-benefit { min-height:0; }
}

/* эволюция за уровень (body.evo-level): эссенции нет — прячем кошельки */
html body.evo-level .evolution-wallet, html body.evo-level .essence-wallet { display: none !important; }
html body .essence-option strong.essence-level { font-size: 13px; letter-spacing: 0; white-space: nowrap; }
/* сундук, который нельзя взять (нет золота / после босса / лимит мира): серый, как недоступная эволюция, и не прыгает и не сжимается */
html body :is(#pp, #dock) :is(#pp-chest, #dock-chest):not(.ready),
html body :is(#pp, #dock) :is(#pp-chest, #dock-chest):not(.ready):is(:hover, :active, :focus, :focus-visible) { opacity: .8; transform: none !important; scale: none !important; translate: none !important; animation: none !important; }
html body :is(#pp, #dock) :is(#pp-chest, #dock-chest):not(.ready) :is(img, .dock-chest-ic) { filter: grayscale(.85) brightness(.65) !important; animation: none !important; transform: none !important; scale: none !important; translate: none !important; }
html body :is(#pp, #dock) :is(#pp-chest, #dock-chest):not(.ready)::before { animation: none !important; transform: none !important; }
/* главный экран на низких телефонах: блок «Цель забега» не сжимается под «В БОЙ» (min-height: 44px отключал автоминимум ряда сетки) */
html body #f2.f2 > .f2-bag { min-height: auto !important; }
@media (orientation: portrait) and (max-height: 799px) {
  html body #f2.f2 .f2-bag.goal .f2-forms { display: none !important; }   /* облики — в «Формах»; на низком экране важнее кнопка */
  html body #f2.f2 { grid-template-rows: auto minmax(150px, 1fr) auto auto auto auto !important; }
}
@media (orientation: portrait) and (max-height: 700px) {
  html body #f2.f2 { grid-template-rows: auto minmax(120px, 1fr) auto auto auto auto !important; }
}
/* статусы в один слой (эффекты v2): горящий монстр медленно мигает красным, остальное — значок над головой (fx-v2-world.js) */
@property --burn { syntax: '<number>'; inherits: false; initial-value: 0; }
@keyframes burn-blink { 0%, 100% { --burn: 0; } 50% { --burn: 1; } }
html body.fx2 .mon.burning:not(.dying) {
  animation: burn-blink 1.6s ease-in-out infinite;
  filter: sepia(calc(var(--burn) * .6)) saturate(calc(1 + var(--burn) * 2.2)) hue-rotate(calc(var(--burn) * -28deg)) brightness(calc(1 - var(--burn) * .08)) !important;
}
@media (prefers-reduced-motion: reduce) { html body.fx2 .mon.burning:not(.dying) { animation: none; --burn: .5; } }
/* помощники Жиробулка и Мёртвый Бобик — пиксельные иконки предметов вместо эмодзи */
html body .minion img { display: block; width: 34px; height: 34px; image-rendering: pixelated; }

/* Approved HUD reference: the round portrait/XP ring overhangs a smaller
   square backing. Reserve its full width so health/name never overlap it. */
html body #arena #hero-card .portrait {
  width:64px !important; height:52px !important; flex:0 0 64px;
  margin-block:5px; overflow:visible; isolation:isolate;
  border:0; border-radius:0; background:none; box-shadow:none;
}
html body #arena #hero-card .portrait::before {
  content:''; position:absolute; left:5px; top:-1px; width:54px; height:54px;
  box-sizing:border-box; z-index:0; pointer-events:none; border-radius:5px;
  border:2px solid #927345; background:linear-gradient(135deg,#443b2d,#141815 55%,#30291e);
  box-shadow:inset 0 0 0 2px #101613,0 0 0 1px #080c09,0 2px 2px #0009;
}
html body #arena #hero-card .portrait #portrait-img {
  inset:auto !important; left:6px; top:0; width:52px !important; height:52px !important;
  z-index:1; border-radius:50%; clip-path:circle(50%); transform:none; translate:none !important;
  background:radial-gradient(circle at 50% 40%,#29472b,#0b160e 75%);
  box-shadow:0 0 0 3px #111b15; object-fit:contain;
}
html body #arena #hero-card .portrait svg {
  display:block !important; inset:auto; left:0; top:-6px; width:64px; height:64px;
  z-index:2; pointer-events:none; overflow:visible;
}
html body #arena #hero-card .portrait :is(.pf-frame,.ring-hp,.ring-shield,.ring-track) { display:none !important; }
html body #arena #hero-card .portrait .ring-xp-track { display:inline; stroke:#5d5033; stroke-width:4.5; }
html body #arena #hero-card .portrait .ring-xp { display:inline; stroke:#efc45b; stroke-width:3.6; }
html body #arena #hero-card .portrait-lvl {
  left:auto; right:0; bottom:-7px; translate:none; z-index:3;
  min-width:24px; padding:1px 5px; border:2px solid #927345; border-radius:7px;
  background:#101812; color:#fff6d8; font-size:15px; line-height:20px;
}

/* ===== HUD v2 (2026-10-23): по Figma «Экран боя v2» (uie2pNHdstLlJEERPCq1cy, 25:3271). Картинки рамок — assets/ui/hud2 (выгружены из макета).
   Размеры и координаты — в пикселях макета × --u: портрет 853×1844, ландшафт телефона 1844×853, ПК 1672×941. Включается body.hud2 (game.js) ===== */
html body.hud2 :is(.arena .hud, #dock, #pp, #edge-left, #edge-right-btn, #passive-bar, #loot-strip, .scene-top .world, #sym-bar, #hud-chest, #road-chest) { display: none !important; }
html body.hud2 .arena .scene-top { top: var(--h2-top-h, 120px) !important; }
html body.hud2 #toast { top: calc(var(--h2-top-h, 120px) + 4px) !important; }
.h2 { position: absolute; inset: 0; z-index: 28; pointer-events: none; --u: calc(100vw / 853); font-family: 'Rubik', 'Nunito', sans-serif; font-weight: 800; }
.h2[hidden] { display: none !important; }
:where(.h2) :where(button) { font: inherit; color: inherit; border: 0; padding: 0; margin: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.h2 :is(button, .h2-hp, .h2-res, .h2-wave-plate) { pointer-events: auto; }
.h2 img { -webkit-user-drag: none; user-select: none; }
/* текст макета: кремовый, тёмная обводка снаружи, тень вниз */
html body .h2 .h2-t { font-family: 'Rubik', 'Nunito', sans-serif !important; font-weight: 800 !important; font-style: normal; color: #fdf1d0; -webkit-text-stroke: calc(5 * var(--u)) #030606; paint-order: stroke fill; text-shadow: 0 calc(3 * var(--u)) 0 rgba(0, 0, 0, .9); white-space: nowrap; line-height: 1; letter-spacing: 0; }
.h2-top, .h2-bot { position: absolute; left: 0; right: 0; pointer-events: none; }
.h2-top { top: var(--sa-top, 0px); }
.h2-bot { bottom: var(--sa-bottom, 0px); }
.h2-top > *, .h2-bot > * { position: absolute; }

/* аватар: квадратная рамка + круг, дуга опыта, стекло, значок уровня */
.h2-av { width: calc(185 * var(--u)); height: calc(185 * var(--u)); }
.h2-av > * { position: absolute; }
.h2-av-back, .h2-av-glass, .h2-av-xp { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.h2-av-img { left: 19.2%; top: 20.5%; width: 61.5%; height: 57.7%; object-fit: contain; image-rendering: pixelated; }
.h2-av-xp { overflow: visible; }
.h2-av-xp circle { fill: none; stroke: url(#h2-xp-grad); stroke-width: 9.8; stroke-dasharray: var(--xp, 0) 100; transform: rotate(171deg); transform-origin: 78px 78px; filter: drop-shadow(0 0 2px rgba(255, 190, 40, .55)); transition: stroke-dasharray .35s ease-out; }
.h2-lvl { right: 0; bottom: 0; width: 33.3%; height: 35.3%; background: url('assets/ui/hud2/lvl.png') center / 100% 100% no-repeat; display: grid; place-items: center; padding-bottom: 4%; }
.h2-lvl .h2-t { font-size: calc(24 / 156 * 185 * var(--u)); }

/* ХП: рамка (9 частей), полоса заполнения со скошенными концами, сердце, текст */
.h2-hp { border: calc(30 * var(--u)) solid transparent; border-image: url('assets/ui/hud2/hp-frame.png') 30 fill / calc(30 * var(--u)) stretch; box-sizing: border-box; display: grid; place-items: center; }
.h2-hp-fill, .h2-hp-shield { position: absolute; left: calc(-8 * var(--u)); top: calc(-8 * var(--u)); bottom: calc(-8 * var(--u)); width: calc((100% + 16 * var(--u)) * var(--hp, 1)); min-width: calc(20 * var(--u));
  border: calc(10 * var(--u)) solid transparent; border-image: url('assets/ui/hud2/hp-fill.png') 10 fill / calc(10 * var(--u)) stretch; box-sizing: border-box; transition: width .25s ease-out; }
.h2-hp-shield { width: calc((100% + 16 * var(--u)) * var(--sh, 0)); min-width: 0; border-image: none; border: 0; background: linear-gradient(180deg, rgba(160, 230, 255, .55), rgba(80, 170, 230, .35)); clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px), 0 8px); }
.h2-heart { position: absolute; left: calc(4 * var(--u)); top: 50%; width: calc(44 * var(--u)); height: calc(44 * var(--u)); translate: 0 -50%; }
.h2-hp .h2-t { position: relative; font-size: calc(36 * var(--u)); }
.h2-hp.low .h2-hp-fill { filter: hue-rotate(-95deg) saturate(1.3); }

/* плашка золото · мощь · мир (одна рамка, одинарные разделители) */
.h2-res, .h2-wave-plate { border: calc(22 * var(--u)) solid transparent; border-image: url('assets/ui/hud2/slab.png') 22 fill / calc(22 * var(--u)) stretch; box-sizing: border-box; display: flex; align-items: center; }
.h2-cell { display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); padding: 0 calc(6 * var(--u)); flex: 0 0 auto; }
.h2-cell img, .h2-wave-plate img { height: calc(42 * var(--u)); width: auto; }
.h2-cell .h2-t, .h2-wave-plate .h2-t { font-size: calc(32 * var(--u)); }
.h2-wave-cell { flex: 1 1 auto; min-width: 0; }
.h2-wave-cell .h2-t { font-size: calc(26 * var(--u)); overflow: hidden; text-overflow: ellipsis; }
.h2-sep { align-self: stretch; width: calc(6 * var(--u)); margin: calc(-12 * var(--u)) calc(8 * var(--u)); flex: 0 0 auto; background: linear-gradient(90deg, #0b0906 0 33%, #8a6a3e 33% 67%, #0b0906 67%); }
.h2-wave-plate { gap: calc(10 * var(--u)); padding: 0 calc(4 * var(--u)); }
.h2-wave-plate .h2-t { font-size: calc(28 * var(--u)); }

/* квадратные кнопки справа */
.h2-ic { background: url('assets/ui/hud2/iron.png') center / 100% 100% no-repeat; display: grid; place-items: center; }
.h2-home { background-image: url('assets/ui/hud2/btn-home.png'); }
.h2-set { background-image: url('assets/ui/hud2/btn-settings.png'); }
.h2-speed .h2-t { font-size: calc(40 * var(--u)); }
.h2-ic:active, .h2-btn:active, .h2-items:active, .h2-slot:active, .h2-av:active { translate: 0 calc(2 * var(--u)); filter: brightness(.92); }

/* нижний блок: две панели с рейками; панель предметов наезжает на панель кнопок — одна общая рейка */
.h2-panel { border: calc(30 * var(--u)) solid transparent; border-image: url('assets/ui/hud2/panel.png') 30 fill / calc(30 * var(--u)) round; box-sizing: border-box; display: flex; align-items: center; }
.h2-panel > * { margin-top: calc(-30 * var(--u)); margin-bottom: calc(-30 * var(--u)); }
.h2-actions { gap: calc(12 * var(--u)); }
/* подложка верхнего блока — та же панель, что и снизу: тёмный фон и неброская рама */
.h2-top-back { border: calc(30 * var(--u)) solid transparent; border-image: url('assets/ui/hud2/panel.png') 30 fill / calc(30 * var(--u)) round; box-sizing: border-box; pointer-events: none; }
.h2-actions > :first-child { margin-left: calc(-16 * var(--u)); }
.h2-actions > :last-child { margin-right: calc(-16 * var(--u)); }
.h2-btn { position: relative; flex: 0 0 auto; border: calc(24 * var(--u)) solid transparent; border-image: url('assets/ui/hud2/green.png') 24 fill / calc(24 * var(--u)) stretch; box-sizing: border-box; display: flex; align-items: center; }
.h2-chest { border-image-source: url('assets/ui/hud2/gold.png'); }
.h2-btn > * { margin-top: calc(-24 * var(--u)); margin-bottom: calc(-24 * var(--u)); }
.h2-btn-art { flex: 0 0 auto; display: grid; place-items: center; }
.h2-btn-art img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.h2-evo .h2-btn-art img { filter: drop-shadow(0 calc(4 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, .45)); }
.h2-btn-text { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(6 * var(--u)); min-width: 0; }
.h2-btn-text > .h2-t { font-size: calc(30 * var(--u)); }
.h2-cap { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(7 * var(--u)) calc(16 * var(--u)); border-radius: calc(23 * var(--u)); background: linear-gradient(180deg, #0b240a, #000); box-shadow: inset 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .08); font-style: normal; }
.h2-chest .h2-cap { background: linear-gradient(180deg, #2a1d08, #000); }
.h2-cap img { height: calc(30 * var(--u)); }
.h2-cap .h2-t { font-size: calc(22 * var(--u)); }
/* рейки панели в картинке: 8–15 от края и 9–16 от противоположного — панели наложены на 24, рейка на стыке одна */
.h2-chest.off, .h2-evo.off { filter: grayscale(.85) brightness(.7); }
.h2-evo .h2-btn-art img { translate: 0 -10%; }   /* у картинки слайма пустое поле сверху — поднимаем к центру кнопки */
.h2-chest.off:active { translate: none; filter: grayscale(.85) brightness(.7); }
/* готово (эволюция «Выбор!», сундук по карману): пульсирующее свечение сзади кнопки — ::before под рамкой (isolation),
   но над панелью; раньше была тонкая тень, на телефоне её не было видно */
.h2-evo.ready, .h2-chest.ready { isolation: isolate; }
.h2-evo.ready::before, .h2-chest.ready::before { content: ''; position: absolute; z-index: -1; inset: calc(-14 * var(--u)); border-radius: calc(26 * var(--u)); pointer-events: none;
  background: rgba(150, 255, 80, .55);
  box-shadow: 0 0 calc(26 * var(--u)) calc(14 * var(--u)) rgba(140, 255, 70, .85), 0 0 calc(60 * var(--u)) calc(20 * var(--u)) rgba(110, 230, 60, .45); animation: h2-glow 1.4s ease-in-out infinite; }
.h2-chest.ready::before { background: rgba(255, 215, 90, .55); box-shadow: 0 0 calc(26 * var(--u)) calc(14 * var(--u)) rgba(255, 205, 80, .85), 0 0 calc(60 * var(--u)) calc(20 * var(--u)) rgba(255, 170, 40, .45); }
@keyframes h2-glow { 0%, 100% { opacity: .45; scale: .97; } 50% { opacity: 1; scale: 1.04; } }
@media (prefers-reduced-motion: reduce) { .h2-evo.ready::before, .h2-chest.ready::before { animation: none; } }
.h2-inv { justify-content: space-between; }
.h2-inv > :first-child { margin-left: calc(-16 * var(--u)); }
.h2-inv > :last-child { margin-right: calc(-16 * var(--u)); }
.h2-items { flex: 0 0 auto; border: calc(24 * var(--u)) solid transparent; border-image: url('assets/ui/hud2/items-btn.png') 24 fill / calc(24 * var(--u)) stretch; box-sizing: border-box; display: grid; place-items: center; }
.h2-items .h2-t { margin: calc(-24 * var(--u)) 0; font-size: calc(30 * var(--u)); }
.h2-slots { display: contents; }
.h2-slot { position: relative; flex: 0 0 auto; background: url('assets/ui/hud2/slot-dark.png') center / 100% 100% no-repeat; display: grid; place-items: center; }
.h2-slot.r-common, .h2-slot.r-uncommon { background-image: url('assets/ui/hud2/slot-common.png'); }
.h2-slot.r-rare { background-image: url('assets/ui/hud2/slot-rare.png'); }
.h2-slot.r-epic, .h2-slot.r-legendary, .h2-slot.r-lunar { background-image: url('assets/ui/hud2/slot-epic.png'); }
.h2-slot img { width: 74%; height: 74%; object-fit: contain; image-rendering: pixelated; }
.h2-slot .h2-n { position: absolute; right: -9%; top: -9%; min-width: 38%; height: 38%; padding: 0 6%; box-sizing: border-box; border-radius: 999px; display: grid; place-items: center; background: #101411; box-shadow: 0 0 0 calc(4 * var(--u)) #c9c9c9, 0 calc(3 * var(--u)) 0 calc(4 * var(--u)) rgba(0, 0, 0, .6); font-size: calc(22 * var(--u)); }
.h2-slot.r-rare .h2-n { box-shadow: 0 0 0 calc(4 * var(--u)) #3f8dff, 0 calc(3 * var(--u)) 0 calc(4 * var(--u)) rgba(0, 0, 0, .6); }
.h2-slot:is(.r-epic, .r-legendary, .r-lunar) .h2-n { box-shadow: 0 0 0 calc(4 * var(--u)) #ff5a2a, 0 calc(3 * var(--u)) 0 calc(4 * var(--u)) rgba(0, 0, 0, .6); }
.h2-slot.empty { opacity: .55; }
.h2-slot.bag img { width: 82%; height: 82%; }

/* ---------- портрет 853×1844 ---------- */
@media (orientation: portrait) {
  .h2 { --u: calc(100vw / 853); }
  .h2-av { left: calc(20 * var(--u)); top: calc(26 * var(--u)); z-index: 2; }
  .h2-hp { left: calc(204 * var(--u)); top: calc(58 * var(--u)); width: calc(522 * var(--u)); height: calc(99 * var(--u)); }
  .h2-home { right: calc(20 * var(--u)); top: calc(58 * var(--u)); }
  .h2-res { left: calc(29.5 * var(--u)); top: calc(194 * var(--u)); right: calc(258 * var(--u)); height: calc(99 * var(--u)); }   /* от видимого края аватарки (рамка в картинке с отступом 8/156) */
  .h2-speed { right: calc(139 * var(--u)); top: calc(194 * var(--u)); }
  .h2-set { right: calc(20 * var(--u)); top: calc(194 * var(--u)); }
  .h2-ic { width: calc(99 * var(--u)); height: calc(99 * var(--u)); }
  .h2-wave-plate { display: none; }
  .h2-res .h2-cell:first-child { padding-left: calc(10 * var(--u)); }
  .h2-res { border-width: calc(16 * var(--u)); border-image-width: calc(16 * var(--u)); }
  .h2-res .h2-cell { padding: 0 calc(2 * var(--u)); gap: calc(7 * var(--u)); }
  .h2-res .h2-cell img { height: calc(38 * var(--u)); }
  .h2-res .h2-sep { margin: calc(-8 * var(--u)) calc(7 * var(--u)); }
  .h2-res .h2-wave-cell .h2-t { font-size: calc(23 * var(--u)); }
  .h2-actions { left: calc(8 * var(--u)); right: calc(8 * var(--u)); bottom: calc(142 * var(--u)); height: calc(167 * var(--u)); }
  .h2-top-back { left: calc(8 * var(--u)); right: calc(8 * var(--u)); top: calc(8 * var(--u)); height: calc(301 * var(--u)); }
  .h2-inv { left: calc(8 * var(--u)); right: calc(8 * var(--u)); bottom: calc(1 * var(--u)); height: calc(165 * var(--u)); }
  /* под нижней панелью — тёмная подложка до края экрана: в зоне «полоски» iPhone (--sa-bottom) не просвечивает сцена */
  .h2-bot::before { content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: calc(-24 * var(--u)); height: calc(24 * var(--u) + var(--sa-bottom, 0px) + 120px);
    background: linear-gradient(rgba(8, 11, 10, 0), #080b0a calc(24 * var(--u))); pointer-events: none; }
  .h2-btn { width: calc(398 * var(--u)); height: calc(130 * var(--u)); }
  .h2-btn-art { width: calc(110 * var(--u)); height: calc(110 * var(--u)); margin-left: calc(-6 * var(--u)); }
  .h2-evo .h2-btn-art { width: calc(134 * var(--u)); height: calc(134 * var(--u)); }
  .h2-items { width: calc(224 * var(--u)); height: calc(93 * var(--u)); }
  .h2-slot { width: calc(101 * var(--u)); height: calc(101 * var(--u)); }
}
/* ---------- ландшафт телефона 1844×853 ---------- */
@media (orientation: landscape) and (max-height: 600px) {
  .h2 { --u: min(calc(100vw / 1844), calc(100vh / 853)); }
  .h2-top, .h2-bot { left: var(--sa-left, 0px); right: var(--sa-right, 0px); }
  .h2-av { left: calc(26 * var(--u)); top: calc(8 * var(--u)); width: calc(136 * var(--u)); height: calc(136 * var(--u)); z-index: 2; }
  .h2-lvl .h2-t { font-size: calc(24 / 156 * 136 * var(--u)); }
  .h2-hp { left: calc(163 * var(--u)); top: calc(22 * var(--u)); width: calc(570 * var(--u)); height: calc(108 * var(--u)); }
  .h2-res { left: calc(745 * var(--u)); right: calc(402 * var(--u)); top: calc(22 * var(--u)); height: calc(108 * var(--u)); }
  .h2-speed { right: calc(282 * var(--u)); top: calc(22 * var(--u)); }
  .h2-home { right: calc(163 * var(--u)); top: calc(22 * var(--u)); }
  .h2-set { right: calc(43 * var(--u)); top: calc(22 * var(--u)); }
  .h2-ic { width: calc(108 * var(--u)); height: calc(108 * var(--u)); }
  .h2-wave-plate { display: none; }
  .h2-actions { left: calc(20 * var(--u)); right: calc(688 * var(--u)); bottom: calc(9 * var(--u)); height: calc(156 * var(--u)); }
  .h2-top-back { left: calc(12 * var(--u)); right: calc(12 * var(--u)); top: calc(-4 * var(--u)); height: calc(150 * var(--u)); }
  .h2-actions > :last-child { margin-right: calc(-4 * var(--u)); }
  .h2-inv { right: calc(20 * var(--u)); width: calc(692 * var(--u)); bottom: calc(9 * var(--u)); height: calc(155 * var(--u)); }
  .h2-inv > :first-child { margin-left: calc(-10 * var(--u)); }
  .h2-inv > :last-child { margin-right: calc(-10 * var(--u)); }
  .h2-btn { flex: 1 1 0; height: calc(101 * var(--u)); }
  .h2-btn-text { flex-direction: row; gap: calc(14 * var(--u)); }
  .h2-btn-art { width: calc(80 * var(--u)); height: calc(80 * var(--u)); margin-left: calc(12 * var(--u)); }
  .h2-btn-text > .h2-t { font-size: calc(32 * var(--u)); }
  .h2-cap .h2-t { font-size: calc(24 * var(--u)); }
  .h2-items { width: calc(196 * var(--u)); height: calc(101 * var(--u)); }
  .h2-items .h2-t { font-size: calc(26 * var(--u)); }
  .h2-slot { width: calc(101 * var(--u)); height: calc(101 * var(--u)); }
}
/* ---------- ПК и планшет в ландшафте 1672×941 ---------- */
@media (orientation: landscape) and (min-height: 601px) {
  .h2 { --u: min(calc(100vw / 1672), calc(100vh / 941)); }
  .h2-av { left: calc(34 * var(--u)); top: calc(3 * var(--u)); width: calc(135 * var(--u)); height: calc(135 * var(--u)); z-index: 2; }
  .h2-lvl .h2-t { font-size: calc(24 / 156 * 135 * var(--u)); }
  .h2-hp { left: calc(170 * var(--u)); top: calc(13 * var(--u)); width: calc(421 * var(--u)); height: calc(84 * var(--u)); z-index: 1; }
  .h2-hp .h2-t { font-size: calc(30 * var(--u)); }
  .h2-res { left: calc(170 * var(--u)); top: calc(92 * var(--u)); height: calc(56 * var(--u)); border-width: calc(16 * var(--u)); border-image-width: calc(16 * var(--u)); }
  .h2-res .h2-cell img { height: calc(30 * var(--u)); }
  .h2-res .h2-cell .h2-t { font-size: calc(26 * var(--u)); }
  .h2-res .h2-sep { margin: calc(-8 * var(--u)) calc(10 * var(--u)); }
  .h2-res :is(.h2-sep-wave, .h2-wave-cell) { display: none; }
  .h2-wave-plate { left: 50%; translate: -50% 0; top: calc(17 * var(--u)); height: calc(67 * var(--u)); border-width: calc(18 * var(--u)); border-image-width: calc(18 * var(--u)); }
  .h2-wave-plate .h2-t { font-size: calc(24 * var(--u)); }
  .h2-wave-plate img { height: calc(32 * var(--u)); }
  .h2-speed { right: calc(205 * var(--u)); top: calc(13 * var(--u)); }
  .h2-home { right: calc(117 * var(--u)); top: calc(13 * var(--u)); }
  .h2-set { right: calc(30 * var(--u)); top: calc(13 * var(--u)); }
  .h2-ic { width: calc(76 * var(--u)); height: calc(76 * var(--u)); }
  .h2-speed .h2-t { font-size: calc(32 * var(--u)); }
  .h2-actions, .h2-inv { left: 50%; width: calc(702 * var(--u)); translate: -50% 0; }
  .h2-actions { bottom: calc(111 * var(--u)); height: calc(144 * var(--u)); }
  .h2-top-back { left: calc(16 * var(--u)); right: calc(16 * var(--u)); top: calc(-14 * var(--u)); height: calc(180 * var(--u)); }
  .h2-inv { bottom: calc(14 * var(--u)); height: calc(121 * var(--u)); }
  .h2-btn { width: calc(331 * var(--u)); height: calc(112 * var(--u)); }
  .h2-btn-art { width: calc(92 * var(--u)); height: calc(92 * var(--u)); margin-left: calc(-6 * var(--u)); }
  .h2-evo .h2-btn-art { width: calc(112 * var(--u)); height: calc(112 * var(--u)); }
  .h2-btn-text > .h2-t { font-size: calc(26 * var(--u)); }
  .h2-cap .h2-t { font-size: calc(19 * var(--u)); }
  .h2-cap img { height: calc(24 * var(--u)); }
  .h2-items { width: calc(174 * var(--u)); height: calc(84 * var(--u)); }
  .h2-items .h2-t { font-size: calc(24 * var(--u)); }
  .h2-slot { width: calc(84 * var(--u)); height: calc(84 * var(--u)); }
}

/* ===== Окно сундука v2 (Figma «Окно сундука v2»: портрет 83:5540, ландшафт 83:5773, ПК 83:5985).
   Размеры — пиксели макета × --cu: портрет 862×1824, ландшафт телефона 1844×853, ПК 1672×941.
   Включается классом chest2 на #cards (game.js renderC2); рамки карт и кнопок — 9-slice из assets/ui/chest2 ===== */
html body #cards.chest2 { padding: 0 !important; display: block !important; background: rgba(3, 6, 6, .82) !important; }
html body #cards#cards.chest2 > :not(.c2) { display: none !important; }   /* два id: старые правила вида #cards:has(.ch-card)… .cards-box сильнее одного */
html body #cards.chest2 #bag-satchel { display: none !important; }   /* в окне v2 карта берётся сразу (bagPick не находит #cards-list .card) */
#cards .c2[hidden], #cards .c2 [hidden] { display: none !important; }
html body #cards.chest2 .c2 {
  --cu: min(calc(100vw / 862), calc(var(--modal-h) / 1824));
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fdf1d0; font-weight: 800; line-height: 1.2; text-align: left;
}
html body #cards .c2, html body #cards .c2 * { font-family: 'Rubik', 'Nunito', sans-serif !important; box-sizing: border-box; }
:where(#cards .c2) :where(button) { font: inherit; color: inherit; border: 0; padding: 0; margin: 0; background: none; box-shadow: none; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
#cards .c2 img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
/* обводка текста макета: тёмная снаружи, тень вниз */
#cards .c2 :is(.c2-title, .c2-sub, .c2-btn b, .c2-n) { -webkit-text-stroke: calc(3 * var(--cu)) #030606; paint-order: stroke fill; text-shadow: 0 calc(3 * var(--cu)) 0 rgba(0, 0, 0, .9); }

/* --- шапка: сундук со свечением открытия, вид сундука, подсказка --- */
#cards .c2-head { position: relative; width: calc(842 * var(--cu)); display: flex; flex-direction: column; align-items: center; }
#cards .c2-chest { position: relative; width: calc(270 * var(--cu)); height: calc(265 * var(--cu)); margin-bottom: calc(-14 * var(--cu)); }
#cards .c2-chest img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 0 calc(24 * var(--cu)) rgba(255, 191, 77, .45)) drop-shadow(0 calc(6 * var(--cu)) calc(10 * var(--cu)) rgba(0, 0, 0, .7)); animation: c2-chest-in .45s cubic-bezier(.2, 1.4, .4, 1) both; }
#cards .c2-glow, #cards .c2-rays { position: absolute; left: 50%; top: 45%; width: 230%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; }
#cards .c2-glow { background: radial-gradient(circle, rgba(255, 199, 82, .75) 0, rgba(255, 158, 46, .35) 18%, rgba(255, 128, 26, 0) 50%); animation: c2-pulse 2.6s ease-in-out infinite; }
#cards .c2-rays { background: repeating-conic-gradient(from 7deg, rgba(255, 209, 102, .42) 0 5deg, rgba(255, 209, 102, 0) 9deg 22.5deg);
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .55) 28%, transparent 62%); mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .55) 28%, transparent 62%);
  filter: blur(calc(3 * var(--cu))); animation: c2-spin 40s linear infinite; }
#cards .c2-titles { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
#cards .c2-title { font-size: calc(56 * var(--cu)); font-weight: 600; letter-spacing: .01em; text-transform: uppercase; color: #ffcb45; line-height: 1.15; white-space: nowrap; }
#cards .c2-sep { display: none; }
#cards .c2-sub { font-size: calc(28 * var(--cu)); font-weight: 600; color: #fdf1d0; text-align: center; }
#cards .c2-sub .chain-stop { font-size: calc(22 * var(--cu)); padding: calc(4 * var(--cu)) calc(12 * var(--cu)); -webkit-text-stroke: 0; }
#cards .c2-skip { position: absolute; right: 0; top: 0; z-index: 3; padding: calc(10 * var(--cu)) calc(18 * var(--cu)); border-radius: calc(10 * var(--cu)); background: rgba(0, 0, 0, .45); color: #c9c4b3; font-size: calc(22 * var(--cu)); font-weight: 600; white-space: nowrap; }

/* --- окно: рама Panel из HUD v2; карты; три кнопки --- */
#cards .c2-win { width: calc(842 * var(--cu)); margin-top: calc(36 * var(--cu)); padding: calc(30 * var(--cu)) calc(18 * var(--cu)) calc(34 * var(--cu));
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: calc(30 * var(--cu)); filter: drop-shadow(0 calc(12 * var(--cu)) calc(30 * var(--cu)) rgba(0, 0, 0, .75)); }
#cards .c2-win::before { content: ''; position: absolute; z-index: -1; inset: calc(-6 * var(--cu)); background: url(assets/ui/chest2/cwin-p.webp) center / 100% 100% no-repeat; pointer-events: none; }
#cards .c2-list { display: flex; flex-direction: column; gap: calc(28 * var(--cu)); }
#cards.arming .c2-list { pointer-events: none; opacity: .8; }
/* взятая карта улетает вниз (game.js c2Fly): поверх кнопок окна, остальные карты гаснут, повторный тап не проходит */
#cards .c2-list.c2-sent { pointer-events: none; }
#cards .c2-list.c2-sent .c2-card:not(.c2-going) { opacity: .35; transition: opacity .25s; }
#cards .c2-card.c2-going { z-index: 10; }

/* карта: рама — ::before (9-slice рамки редкости с накладками на углах), содержимое — поверх */
#cards .c2-card { --rg: rgba(255, 159, 64, .22); --re: #8d8f8a; --rt: #ecebe4;
  position: relative; flex: 0 0 auto; width: calc(806 * var(--cu)); height: calc(372 * var(--cu)); transition: transform .12s; animation: c2-card-in .35s ease-out both; }
#cards .c2-card:nth-child(2) { animation-delay: .06s; } #cards .c2-card:nth-child(3) { animation-delay: .12s; } #cards .c2-card:nth-child(4) { animation-delay: .18s; }
#cards .c2-card::before { content: ''; position: absolute; inset: calc(-8 * var(--cu)); z-index: 0; pointer-events: none;
  border: solid transparent; border-width: calc(48 * var(--cu)); border-image: url(assets/ui/chest2/card-common.png) 96 fill / calc(48 * var(--cu)) stretch; }
#cards .c2-card > * { position: absolute; z-index: 1; }
#cards .c2-card:active { transform: scale(.985); }
#cards .c2-card.r-rare { --rg: rgba(47, 127, 255, .55); --re: #3a9bff; --rt: #79d4ff; }
#cards .c2-card.r-uncommon { --rg: rgba(80, 210, 90, .4); --re: #4fcf5a; --rt: #a6f0a0; }
#cards .c2-card.r-epic { --rg: rgba(178, 91, 255, .5); --re: #b25bff; --rt: #e0b5ff; }
#cards .c2-card.r-legendary { --rg: rgba(255, 174, 52, .55); --re: #ffae34; --rt: #ffd890; }
#cards .c2-card.r-lunar { --rg: rgba(111, 214, 255, .45); --re: #6fd6ff; --rt: #bdefff; }
/* цветные рамки — одна синяя картинка, перекрашенная поворотом оттенка (вместе со свечением) */
/* цветные рамки — одна синяя картинка, перекрашенная поворотом оттенка (вместе со свечением); сила свечения — --gl/--ga (наведение на ПК усиливает) */
#cards .c2-card { --gl: 14; --ga: .55; --hue: 0deg; --fx: saturate(1); transition: transform .15s ease-out; }
#cards .c2-card.r-uncommon { --gl: 10; --ga: .4; --hue: -95deg; }
#cards .c2-card.r-epic { --hue: 60deg; }
#cards .c2-card.r-legendary { --gl: 16; --ga: .6; --hue: 185deg; --fx: saturate(1.3); }
#cards .c2-card.r-lunar { --hue: -20deg; --fx: brightness(1.15); }
#cards .c2-card:is(.r-rare, .r-uncommon, .r-epic, .r-legendary, .r-lunar)::before { border-image-source: url(assets/ui/chest2/card-rare.png);
  filter: drop-shadow(0 0 calc(var(--gl) * var(--cu)) rgba(47, 139, 255, var(--ga))) hue-rotate(var(--hue)) var(--fx); transition: filter .2s; }
/* ПК (мышь): при наведении — мягкое свечение рамки, фон карты в цвет рамки, карта чуть приподнимается */
@media (hover: hover) and (pointer: fine) {
  #cards .c2-card:hover { transform: translateY(calc(-4 * var(--cu))); }
  #cards .c2-card:hover:is(.r-rare, .r-uncommon, .r-epic, .r-legendary, .r-lunar) { --gl: 28; --ga: .85; }
  #cards .c2-card:not(.r-rare, .r-uncommon, .r-epic, .r-legendary, .r-lunar)::before { transition: filter .2s; }
  #cards .c2-card:hover:not(.r-rare, .r-uncommon, .r-epic, .r-legendary, .r-lunar)::before { filter: drop-shadow(0 0 calc(22 * var(--cu)) rgba(225, 222, 210, .4)); }
  #cards .c2-card:hover:not(.holding)::after { content: ''; position: absolute; z-index: 0; inset: calc(12 * var(--cu)); pointer-events: none;
    clip-path: polygon(calc(9 * var(--cu)) 0, calc(100% - 9 * var(--cu)) 0, 100% calc(9 * var(--cu)), 100% calc(100% - 9 * var(--cu)), calc(100% - 9 * var(--cu)) 100%, calc(9 * var(--cu)) 100%, 0 calc(100% - 9 * var(--cu)), 0 calc(9 * var(--cu)));
    background: radial-gradient(120% 90% at 50% 40%, color-mix(in srgb, var(--re) 30%, transparent), color-mix(in srgb, var(--re) 14%, transparent)); animation: c2-tint .2s ease-out; }
  #cards .c2-btn:hover:not(:disabled):not(.locked)::before { filter: brightness(1.18) drop-shadow(0 0 calc(10 * var(--cu)) rgba(255, 214, 140, .35)); }
}
@keyframes c2-tint { from { opacity: 0; } }
#cards.banish-mode .c2-card::before { filter: drop-shadow(0 0 calc(12 * var(--cu)) rgba(255, 60, 60, .85)) !important; }

#cards .c2-art { left: calc(24 * var(--cu)); top: 50%; width: calc(200 * var(--cu)); height: calc(200 * var(--cu)); translate: 0 -50%; }
#cards .c2-art::before { content: ''; position: absolute; inset: calc(-38 * var(--cu)); border-radius: 50%; background: radial-gradient(circle, var(--rg) 0, transparent 68%); }
#cards .c2-img { position: absolute; inset: 0; display: grid; place-items: center; clip-path: inset(calc(-74 * var(--cu)) calc(-30 * var(--cu)) calc(-74 * var(--cu)) calc(-12 * var(--cu))); }   /* крупная иконка не залезает на рамку и текст */
#cards .c2-img img { width: 100%; height: 100%; object-fit: contain; scale: 1.3; }   /* иконка крупнее места под неё: у артов прозрачные поля */
#cards .c2-img .emoji { font-size: calc(120 * var(--cu)); }
#cards .c2-tags { left: calc(256 * var(--cu)); top: calc(32 * var(--cu)); display: flex; gap: calc(10 * var(--cu)); }
#cards .c2-tags > span { display: inline-flex; align-items: center; height: calc(36 * var(--cu)); padding: 0 calc(14 * var(--cu)); border: calc(2 * var(--cu)) solid var(--re); border-radius: calc(5 * var(--cu));
  background: #0a1316; color: var(--rt); font-size: calc(19 * var(--cu)); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
#cards .c2-tags > .c2-badge { border-color: #c99a3c; color: #ffd36b; }
#cards .c2-tags > .c2-badge.new { border-color: #5fd35f; color: #b8ff9c; }
#cards .c2-info { right: calc(24 * var(--cu)); top: calc(22 * var(--cu)); width: calc(56 * var(--cu)); height: calc(56 * var(--cu)); background: url(assets/ui/chest2/info.png) center / 100% 100% no-repeat; cursor: pointer; }
#cards .c2-text { left: calc(256 * var(--cu)); right: calc(48 * var(--cu)); top: calc(106 * var(--cu)); bottom: calc(26 * var(--cu)); display: flex; flex-direction: column; overflow: hidden; }
#cards .c2-name { font-size: calc(38 * var(--cu)); font-weight: 800; color: #fff6e0; line-height: 1.15; text-shadow: 0 calc(3 * var(--cu)) 0 rgba(0, 0, 0, .9); }
#cards .c2-line { display: none; }
#cards .c2-desc { margin-top: calc(26 * var(--cu)); font-size: calc(28 * var(--cu)); line-height: calc(40 * var(--cu)); font-weight: 600; color: #e6e1d2; text-shadow: 0 calc(2 * var(--cu)) 0 rgba(0, 0, 0, .9); }
#cards .c2-desc :is(b, .num, .kw) { color: #ffd23f; font-weight: 800; }
#cards .c2-desc .minus { color: #ff7a6b; font-weight: 800; }
#cards .c2-text .ch-sym { margin-top: calc(12 * var(--cu)); align-self: flex-start; font-size: calc(19 * var(--cu)); }
/* удержание: полоса заполняется снизу карты */
#cards .c2-card.holding::after { content: ''; position: absolute; z-index: 2; left: calc(30 * var(--cu)); right: calc(30 * var(--cu)); bottom: calc(14 * var(--cu)); height: calc(6 * var(--cu));
  border-radius: calc(3 * var(--cu)); background: #ffd25e; box-shadow: 0 0 calc(10 * var(--cu)) #ffb02e; transform-origin: left; animation: c2-hold var(--hold, .5s) linear forwards; }

/* кнопки: рама slab со скосами; иконка + подпись по центру */
#cards .c2-tools { display: flex; justify-content: center; gap: calc(22 * var(--cu)); }
/* «Ты получил» (game.js renderG2): одна большая зелёная «Забрать» — рамка кнопки HUD v2 */
#cards .c2-take { position: relative; align-self: stretch; height: calc(108 * var(--cu)); display: grid; place-items: center; transition: transform .1s, filter .15s;
  border: calc(24 * var(--cu)) solid transparent; border-image: url(assets/ui/hud2/green.png) 24 fill / calc(24 * var(--cu)) stretch; box-sizing: border-box;
  filter: drop-shadow(0 0 calc(14 * var(--cu)) rgba(120, 230, 70, .45)); }
#cards .c2-take b { margin: calc(-24 * var(--cu)) 0; font-size: calc(40 * var(--cu)); font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: #fdf1d0; white-space: nowrap;
  -webkit-text-stroke: calc(4 * var(--cu)) #0b2005; paint-order: stroke fill; text-shadow: 0 calc(3 * var(--cu)) 0 rgba(0, 0, 0, .8); }
#cards .c2-take:hover { filter: brightness(1.1) drop-shadow(0 0 calc(18 * var(--cu)) rgba(120, 230, 70, .6)); }
#cards .c2-take:active { transform: translateY(calc(3 * var(--cu))); }
/* портрет: карты подарка ниже (--gh по числу предметов), иконка и текст плотнее — 4 предмета влезают целиком */
@media (orientation: portrait) {
  #cards .c2.gift .c2-win { gap: calc(24 * var(--cu)); }
  #cards .c2.gift .c2-list { gap: calc(20 * var(--cu)); }
  #cards .c2.gift .c2-card { height: calc(var(--gh, 300) * var(--cu)); }
  #cards .c2.gift .c2-art { width: calc(var(--gh, 300) * .68 * var(--cu)); height: calc(var(--gh, 300) * .68 * var(--cu)); left: calc(30 * var(--cu)); }
  #cards .c2.gift .c2-tags { top: calc(24 * var(--cu)); }
  #cards .c2.gift .c2-text { top: calc(74 * var(--cu)); bottom: calc(18 * var(--cu)); justify-content: flex-start; }
  #cards .c2.gift .c2-name { font-size: calc(36 * var(--cu)); }
  #cards .c2.gift .c2-desc { margin-top: calc(10 * var(--cu)); line-height: calc(37 * var(--cu)); }
}
#cards .c2-tools.only-auto :is(.reroll, .ban) { display: none; }
#cards .c2-btn { position: relative; width: calc(248 * var(--cu)); height: calc(100 * var(--cu)); display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--cu)); transition: transform .1s; }
#cards .c2-btn::before { content: ''; position: absolute; inset: 0; z-index: 0; border: solid transparent; border-width: calc(30 * var(--cu)); border-image: url(assets/ui/chest2/btn.png) 60 fill / calc(30 * var(--cu)) stretch; }
#cards .c2-btn > * { position: relative; z-index: 1; }
#cards .c2-btn img { height: calc(56 * var(--cu)); width: auto; }
#cards .c2-btn b { font-size: calc(24 * var(--cu)); font-weight: 800; color: #fdf1d0; white-space: nowrap; }
#cards .c2-btn:active:not(:disabled) { transform: translateY(calc(2 * var(--cu))); }
#cards .c2-btn:is(:disabled, .locked) { cursor: default; }
#cards .c2-btn:is(:disabled, .locked)::before { opacity: .75; }
#cards .c2-btn:is(:disabled, .locked) img { opacity: .6; filter: grayscale(1); }
#cards .c2-btn:is(:disabled, .locked) b { color: #8f918a; -webkit-text-stroke: 0; }
#cards .c2-btn.ban .c2-n { display: none; }
#cards .c2-btn.ban.on::before { filter: drop-shadow(0 0 calc(10 * var(--cu)) rgba(255, 80, 80, .85)); }
#cards .c2-btn.skip img { height: calc(46 * var(--cu)); }
/* счётчик переброса — синий ромб у правого верхнего угла */
#cards .c2-n { position: absolute; z-index: 2; right: calc(-16 * var(--cu)); top: calc(-22 * var(--cu)); width: calc(46 * var(--cu)); height: calc(46 * var(--cu));
  display: grid; place-items: center; isolation: isolate; font-style: normal; font-size: calc(21 * var(--cu)); color: #fff; }
#cards .c2-n::before { content: ''; position: absolute; inset: calc(7 * var(--cu)); z-index: -1; rotate: 45deg; border-radius: calc(3 * var(--cu));
  background: linear-gradient(135deg, #b4d8ff, #3a8bf0 55%, #1f4f92); box-shadow: 0 0 0 calc(3 * var(--cu)) #04121f, 0 calc(3 * var(--cu)) 0 calc(3 * var(--cu)) rgba(0, 0, 0, .8); }
#cards .c2-pro { position: absolute; z-index: 2; right: calc(14 * var(--cu)); top: calc(-18 * var(--cu)); padding: calc(2 * var(--cu)) calc(11 * var(--cu)); border-radius: calc(40 * var(--cu));
  background: linear-gradient(#ffe9a0, #fbbf34 55%, #c98a1a); box-shadow: 0 0 0 calc(3 * var(--cu)) #2a1606; color: #3a1f05; font-size: calc(19 * var(--cu)); font-style: normal; font-weight: 800; }

@keyframes c2-spin { to { rotate: 360deg; } }
@keyframes c2-pulse { 50% { opacity: .78; scale: .94; } }
@keyframes c2-hold { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes c2-chest-in { from { scale: .6; opacity: 0; } }
@keyframes c2-card-in { from { opacity: 0; translate: 0 calc(24 * var(--cu)); } }
@media (prefers-reduced-motion: reduce) { #cards .c2 :is(.c2-rays, .c2-glow, .c2-card, .c2-chest img) { animation: none; } }

/* --- ландшафт телефона 1844×853: шапка в ряд над окном, три карты в ряд --- */
@media (orientation: landscape) and (max-height: 600px) {
  html body #cards.chest2 .c2 { --cu: min(calc(100vw / 1844), calc(var(--modal-h) / 853)); }
  #cards .c2-head { width: calc(1550 * var(--cu)); flex-direction: row; align-items: center; gap: calc(22 * var(--cu)); margin-bottom: calc(22 * var(--cu)); }
  #cards .c2-chest { width: calc(112 * var(--cu)); height: calc(110 * var(--cu)); margin: 0; flex: none; }
  #cards .c2-titles { flex-direction: row; align-items: center; gap: calc(28 * var(--cu)); }
  #cards .c2-title { font-size: calc(52 * var(--cu)); }
  #cards .c2-sep { display: block; width: calc(3 * var(--cu)); height: calc(50 * var(--cu)); background: rgba(169, 164, 143, .28); }
  #cards .c2-sub { font-size: calc(30 * var(--cu)); text-align: left; }
  #cards .c2-skip { position: static; margin-left: auto; }
  #cards .c2-win::before { background-image: url(assets/ui/chest2/cwin-l.webp); }
  #cards .c2-win { width: calc(1620 * var(--cu)); margin-top: 0; padding: calc(16 * var(--cu)) calc(35 * var(--cu)) calc(36 * var(--cu)); gap: calc(27 * var(--cu)); }
  #cards .c2-list { flex-direction: row; gap: calc(20 * var(--cu)); }
  #cards .c2-card { width: calc(503 * var(--cu)); height: calc(447 * var(--cu)); }
  #cards .c2-tags { left: calc(46 * var(--cu)); top: calc(28 * var(--cu)); }
  #cards .c2-tags > span { height: calc(38 * var(--cu)); }
  #cards .c2-info { width: calc(50 * var(--cu)); height: calc(50 * var(--cu)); top: calc(22 * var(--cu)); }
  #cards .c2-art { left: calc(38 * var(--cu)); top: calc(66 * var(--cu)); width: calc(190 * var(--cu)); height: calc(190 * var(--cu)); translate: none; }
  #cards .c2-text { inset: 0; display: block; }
  #cards .c2-text > * { position: absolute; }
  #cards .c2-img { clip-path: inset(calc(-40 * var(--cu)) calc(-14 * var(--cu)) calc(-6 * var(--cu)) calc(-26 * var(--cu))); }
  #cards .c2-name { left: calc(238 * var(--cu)); top: calc(160 * var(--cu)); width: calc(237 * var(--cu)); translate: 0 -50%; font-size: calc(40 * var(--cu)); line-height: calc(44 * var(--cu)); }
  #cards .c2-line { display: block; left: calc(36 * var(--cu)); right: calc(36 * var(--cu)); top: calc(244 * var(--cu)); height: calc(2 * var(--cu)); background: rgba(169, 164, 143, .28); }
  #cards .c2-desc { left: calc(36 * var(--cu)); right: calc(44 * var(--cu)); top: calc(262 * var(--cu)); margin: 0; font-size: calc(29 * var(--cu)); line-height: calc(40 * var(--cu)); }
  #cards .c2-text .ch-sym { left: calc(36 * var(--cu)); bottom: calc(26 * var(--cu)); margin: 0; }
  #cards .c2-tools { gap: calc(20 * var(--cu)); }
  #cards .c2-btn { width: calc(503 * var(--cu)); height: calc(80 * var(--cu)); gap: calc(22 * var(--cu)); }
  #cards .c2-btn img { height: calc(66 * var(--cu)); }
  #cards .c2-btn b { font-size: calc(30 * var(--cu)); }
}
/* --- ПК 1672×941: шапка по центру над окном, три карты в ряд, предмет сверху --- */
@media (orientation: landscape) and (min-height: 601px) {
  html body #cards.chest2 .c2 { --cu: min(calc(100vw / 1672), calc(var(--modal-h) / 941)); }
  #cards .c2-head { width: calc(1263 * var(--cu)); }
  #cards .c2-chest { width: calc(116 * var(--cu)); height: calc(114 * var(--cu)); margin-bottom: calc(-10 * var(--cu)); }
  #cards .c2-title { font-size: calc(52 * var(--cu)); }
  #cards .c2-sub { font-size: calc(30 * var(--cu)); }
  #cards .c2-win::before { background-image: url(assets/ui/chest2/cwin-d.webp); }
  #cards .c2-win { width: calc(1263 * var(--cu)); margin-top: calc(30 * var(--cu)); padding: calc(22 * var(--cu)) calc(27 * var(--cu)) calc(32 * var(--cu)); gap: calc(29 * var(--cu)); }
  #cards .c2-list { flex-direction: row; gap: calc(12 * var(--cu)); }
  #cards .c2-card { width: calc(395 * var(--cu)); height: calc(458 * var(--cu)); }
  #cards .c2-tags { left: calc(40 * var(--cu)); top: calc(24 * var(--cu)); }
  #cards .c2-tags > span { height: calc(34 * var(--cu)); font-size: calc(17 * var(--cu)); padding: 0 calc(12 * var(--cu)); }
  #cards .c2-info { width: calc(44 * var(--cu)); height: calc(44 * var(--cu)); top: calc(19 * var(--cu)); }
  #cards .c2-art { left: 50%; top: calc(54 * var(--cu)); width: calc(150 * var(--cu)); height: calc(150 * var(--cu)); translate: -50% 0; }
  #cards .c2-text { left: calc(30 * var(--cu)); right: calc(30 * var(--cu)); top: calc(214 * var(--cu)); bottom: calc(22 * var(--cu)); }
  #cards .c2-img { clip-path: inset(calc(-30 * var(--cu)) calc(-22 * var(--cu)) calc(-8 * var(--cu)) calc(-22 * var(--cu))); }
  #cards .c2-name { text-align: center; font-size: calc(36 * var(--cu)); line-height: calc(38 * var(--cu)); }
  #cards .c2-desc { margin-top: calc(14 * var(--cu)); padding: 0 calc(8 * var(--cu)); font-size: calc(24 * var(--cu)); line-height: calc(33 * var(--cu)); }
  #cards .c2-tools { gap: calc(34 * var(--cu)); }
  #cards .c2-btn { width: calc(330 * var(--cu)); height: calc(84 * var(--cu)); gap: calc(20 * var(--cu)); }
  #cards .c2-btn img { height: calc(64 * var(--cu)); }
  #cards .c2-btn b { font-size: calc(27 * var(--cu)); }
}

/* ===== Окно эволюции v2 (Figma «Окно эволюции v2»: портрет 112:5864, ландшафт 112:6813, ПК 112:7762).
   Сцена .e2-stage — кадр макета (863×1823 / 1846×852 / 1672×941), все координаты — пиксели макета × --eu.
   Включается классом v2 на #essence-evolution (game.js renderE2); рамки — 9-slice из assets/ui/evo2 ===== */
html body #essence-evolution.v2:not([hidden]) { background: rgba(3, 6, 6, .86) !important; padding: 0 !important; display: block !important; }
html body #essence-evolution.v2 > :not(.e2) { display: none !important; }
#essence-evolution .e2[hidden] { display: none !important; }
#essence-evolution .e2 { position: absolute; inset: 0; overflow: hidden; color: #fdf1d0; }
html body #essence-evolution .e2, html body #essence-evolution .e2 * { font-family: 'Rubik', 'Nunito', sans-serif !important; box-sizing: border-box; }
:where(#essence-evolution .e2) :where(button) { font: inherit; color: inherit; border: 0; padding: 0; margin: 0; background: none; box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#essence-evolution .e2 img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
#essence-evolution .e2-stage { --sw: 863; --eu: min(calc(100vw / 863), calc(var(--modal-h) / 1823)); --bar: 30; --row: 0;
  position: absolute; left: 50%; top: 50%; width: calc(863 * var(--eu)); height: calc(1823 * var(--eu)); translate: -50% -50%; }
#essence-evolution .e2-stage > * { position: absolute; }
/* заголовок и подсказка */
#essence-evolution .e2-title { left: 0; right: 0; top: calc(286 * var(--eu)); text-align: center; font-size: calc(62 * var(--eu)); font-weight: 600; line-height: 1.2; text-transform: uppercase; color: #ffcb45;
  -webkit-text-stroke: calc(3.5 * var(--eu)) #030606; paint-order: stroke fill; text-shadow: 0 calc(4 * var(--eu)) 0 rgba(0, 0, 0, .9); white-space: nowrap; }
#essence-evolution .e2-hint { left: 0; right: 0; top: calc(366 * var(--eu)); text-align: center; font-size: calc(26 * var(--eu)); font-weight: 500; color: #a8c79a; text-shadow: 0 calc(2 * var(--eu)) 0 rgba(0, 0, 0, .9); }
#essence-evolution .e2-close { z-index: 3; left: calc(733 * var(--eu)); top: calc(280 * var(--eu)); width: calc(80 * var(--eu)); height: calc(80 * var(--eu));
  background: url(assets/ui/evo2/close.png) center / calc(100% * 88 / 80) no-repeat; }
#essence-evolution .e2-close:active { transform: translateY(calc(2 * var(--eu))); }
/* рама окна */
#essence-evolution .e2-win { left: calc(30 * var(--eu)); top: calc(262 * var(--eu)); width: calc(803 * var(--eu)); height: calc(1398 * var(--eu));
  border: solid transparent; border-width: calc(30 * var(--eu)); border-image: url(assets/ui/evo2/win-p.webp) 60 fill / calc(30 * var(--eu)) / calc(6 * var(--eu)) stretch;
  filter: drop-shadow(0 calc(12 * var(--eu)) calc(30 * var(--eu)) rgba(0, 0, 0, .75)); }
/* рейка под шапкой: заголовок, подсказка и крестик — внутри рамки окна */
#essence-evolution .e2-sep { left: calc(42 * var(--eu)); top: calc(410 * var(--eu)); width: calc(779 * var(--eu)); height: calc(12 * var(--eu)); border: calc(2 * var(--eu)) solid #070605; border-radius: calc(2 * var(--eu));
  background: linear-gradient(#9b7541 0 12%, #674b30 12% 38%, #3e2c18 38% 80%, #1c1309 80%); box-shadow: 0 calc(3 * var(--eu)) calc(4 * var(--eu)) rgba(0, 0, 0, .6); }
#essence-evolution :is(.e2-title, .e2-hint) { z-index: 3; }
/* линии дерева */
#essence-evolution .e2-lines { left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#essence-evolution .e2-lines line { stroke-linecap: round; fill: none; }
#essence-evolution .e2-l-back line { stroke: #1a1006; stroke-width: 8; }
#essence-evolution .e2-l-bronze line { stroke: #a37838; stroke-width: 5; }
#essence-evolution .e2-l-green line { stroke: #86e43e; stroke-width: 5; }
#essence-evolution .e2-l-green { filter: drop-shadow(0 0 4px rgba(130, 255, 80, .7)); }
#essence-evolution .e2-node { fill: #120d07; stroke: #b98a42; stroke-width: 4; }
#essence-evolution .e2-node.g { fill: #0f1a08; stroke: #9cf05a; filter: drop-shadow(0 0 4px rgba(130, 255, 80, .7)); }
/* круг формы: обод из макета, картинка, стекло поверх */
#essence-evolution .e2-slot { --s: 210; position: relative; display: block; width: calc(var(--s) * var(--eu)); height: calc(var(--s) * var(--eu)); }
#essence-evolution .e2-slot::before { content: ''; position: absolute; inset: calc(var(--s) * -6 / 210 * var(--eu)); background: url(assets/ui/evo2/slot.webp) center / 100% 100% no-repeat; }
#essence-evolution .e2-slot img { position: absolute; left: 4.5%; top: 4.5%; width: 91%; height: 91%; object-fit: contain; z-index: 1; clip-path: circle(47.3% at 50% 50%); }   /* форма в 1.3 раза крупнее, обрезана по колодцу */
#essence-evolution .e2-slot::after { content: ''; position: absolute; z-index: 2; left: 50%; top: 50%; width: 86%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse 58% 30% at 44% 20%, rgba(255, 255, 255, .5), rgba(255, 255, 255, .08) 70%, transparent 72%), radial-gradient(circle at 50% 50%, transparent 66%, rgba(0, 0, 0, .35) 100%); }   /* стекло — блик сверху и затемнение к краю */
#essence-evolution .e2-check { display: none; position: absolute; z-index: 3; left: 50%; top: 5%; width: calc(var(--s) * 86 / 210 * var(--eu)); aspect-ratio: 1; translate: -50% -50%; background: url(assets/ui/evo2/check.png) center / 100% 100% no-repeat; }
#essence-evolution .e2-opt.sel .e2-slot::before { inset: calc(var(--s) * -30 / 210 * var(--eu)); background-image: url(assets/ui/evo2/slot-sel.webp); }
#essence-evolution .e2-opt.sel .e2-check { display: block; }
#essence-evolution .e2-opts:has(.sel) .e2-opt:not(.sel) .e2-slot img { filter: grayscale(.75) brightness(.7); }
#essence-evolution .e2-opts .e2-opt.sel .e2-slot img { filter: none !important; animation: e2-pop .35s ease-out; }   /* выбранная — всегда в цвете, даже если ещё закрыта уровнем */
#essence-evolution .e2-opt .e2-slot > .e2-aura { position: absolute; inset: -18%; border-radius: 50%; z-index: -1; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(140, 255, 90, .55) 0, rgba(110, 230, 60, .25) 45%, transparent 70%); transition: opacity .3s, scale .3s; scale: .8; }
#essence-evolution .e2-opt.sel .e2-slot > .e2-aura { opacity: 1; scale: 1; animation: e2-aura 1.8s ease-in-out infinite; }
@keyframes e2-aura { 50% { opacity: .55; scale: 1.08; } }
@keyframes e2-pop { 40% { scale: 1.1; } }
#essence-evolution .e2-opt.locked .e2-slot img { filter: grayscale(.7) brightness(.6); }
#essence-evolution .e2-now { left: calc(281.5 * var(--eu)); top: calc(425 * var(--eu)); }
#essence-evolution .e2-now .e2-slot { --s: 300; }
/* таблички: «Сейчас» и имена форм */
#essence-evolution .e2-plate { display: flex; align-items: center; justify-content: center; text-align: center; border: solid transparent; border-width: calc(22 * var(--eu));
  border-image: url(assets/ui/evo2/plate.webp) 44 fill / calc(22 * var(--eu)) / calc(4 * var(--eu)) stretch; }
#essence-evolution .e2-plate > * { margin: calc(-22 * var(--eu)); }
#essence-evolution .e2-now-plate { left: calc(286.5 * var(--eu)); top: calc(692 * var(--eu)); width: calc(290 * var(--eu)); height: calc(60 * var(--eu)); font-size: calc(28 * var(--eu)); font-weight: 500; color: #e6e1d2; white-space: nowrap; text-shadow: 0 calc(2 * var(--eu)) 0 #000; }
#essence-evolution .e2-now-plate b { font-size: calc(30 * var(--eu)); font-weight: 800; color: #fff6e0; }
/* варианты */
#essence-evolution .e2-opts { --col: 240; --ct: 237; --ch: 230; --ph: 66; left: 0; right: 0; top: calc(825 * var(--eu)); display: flex; justify-content: center; gap: calc(16.5 * var(--eu)); }
#essence-evolution .e2-opt { position: relative; width: calc(var(--col) * var(--eu)); height: calc((var(--ct) + var(--ch)) * var(--eu)); display: flex; flex-direction: column; align-items: center; transition: transform .15s; }
#essence-evolution .e2-opt .e2-slot { z-index: 2; }
#essence-evolution .e2-card { position: absolute; left: 0; right: 0; top: calc(var(--ct) * var(--eu)); height: calc(var(--ch) * var(--eu)); display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--cy, 72) * var(--eu)) calc(14 * var(--eu)) 0; text-align: center; isolation: isolate; }
#essence-evolution .e2-card::before { content: ''; position: absolute; inset: calc(-10 * var(--eu)); z-index: -1; border: solid transparent; border-width: calc(44 * var(--eu));
  border-image: url(assets/ui/evo2/card.webp) 88 fill / calc(44 * var(--eu)) stretch; }
#essence-evolution .e2-opt.sel .e2-card::before { inset: calc(-24 * var(--eu)); border-width: calc(58 * var(--eu)); border-image-source: url(assets/ui/evo2/card-sel.webp); border-image-slice: 116 fill; }
#essence-evolution .e2-card .e2-plate { position: absolute; left: calc(12 * var(--eu)); right: calc(12 * var(--eu)); top: calc(var(--ph) * -.35 * var(--eu)); height: calc(var(--ph) * var(--eu)); }
#essence-evolution .e2-card .e2-plate b { font-size: calc(var(--pn, 23) * var(--eu)); font-weight: 800; line-height: 1.02; color: #fff6e0; -webkit-text-stroke: calc(2.5 * var(--eu)) #030606; paint-order: stroke fill; text-shadow: 0 calc(2 * var(--eu)) 0 #000; }
#essence-evolution .e2-cls, #essence-evolution .e2-ab { position: relative; font-size: calc(var(--cf, 23) * var(--eu)); font-weight: 500; line-height: 1.25; text-shadow: 0 calc(2 * var(--eu)) 0 #000; }
#essence-evolution .e2-cls { color: #e6e1d2; }
#essence-evolution .e2-ab { color: #cfe8b0; margin-top: calc(var(--cf, 23) * .2 * var(--eu)); }
#essence-evolution .e2-opt.locked .e2-ab { color: #ffb86a; }
@media (hover: hover) and (pointer: fine) {
  #essence-evolution .e2-opt:hover { transform: translateY(calc(-4 * var(--eu))); }
  #essence-evolution .e2-opt:not(.sel):hover .e2-slot::before { filter: brightness(1.2) drop-shadow(0 0 calc(10 * var(--eu)) rgba(160, 255, 110, .35)); }
  #essence-evolution .e2-buy:hover:not(:disabled)::before { filter: brightness(1.12); }
  #essence-evolution .e2-close { transition: filter .15s, transform .15s; }
  #essence-evolution .e2-close:hover { filter: brightness(1.25) drop-shadow(0 0 calc(8 * var(--eu)) rgba(255, 214, 140, .55)); transform: scale(1.06); }
}
/* панель выбранной формы */
#essence-evolution .e2-detail { left: calc(60 * var(--eu)); top: calc(1310 * var(--eu)); width: calc(743 * var(--eu)); height: calc(210 * var(--eu)); }
#essence-evolution .e2-detail::before { content: ''; position: absolute; inset: calc(-24 * var(--eu)); border: solid transparent; border-width: calc(64 * var(--eu)); border-image: url(assets/ui/evo2/detail.webp) 128 fill / calc(64 * var(--eu)) stretch; }
#essence-evolution .e2-detail:not(.sel)::before { filter: grayscale(1) brightness(.85); }
#essence-evolution .e2-detail > * { position: absolute; }
#essence-evolution .e2-art { left: calc(20 * var(--eu)); top: calc(40 * var(--eu)); width: calc(140 * var(--eu)); height: calc(120 * var(--eu)); object-fit: contain; }
#essence-evolution .e2-div { left: calc(172 * var(--eu)); top: calc(40 * var(--eu)); width: calc(2 * var(--eu)); height: calc(130 * var(--eu)); background: rgba(169, 164, 143, .28); }
#essence-evolution .e2-stats { left: calc(192 * var(--eu)); top: calc(22 * var(--eu)); right: calc(14 * var(--eu)); display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: calc(14 * var(--eu)); row-gap: calc(12 * var(--eu)); }
#essence-evolution .e2-st { display: flex; align-items: center; gap: calc(8 * var(--eu)); }
#essence-evolution .e2-st img { width: calc(36 * var(--eu)); height: calc(36 * var(--eu)); object-fit: contain; flex: none; }
#essence-evolution .e2-st span { display: flex; flex-direction: column; line-height: 1.15; }
#essence-evolution .e2-st small { font-size: calc(17 * var(--eu)); font-weight: 500; color: #a9ae9f; text-shadow: 0 calc(2 * var(--eu)) 0 #000; white-space: nowrap; }
#essence-evolution .e2-st b { font-size: calc(23 * var(--eu)); font-weight: 700; color: #d8d2c2; text-shadow: 0 calc(2 * var(--eu)) 0 #000; white-space: nowrap; }
#essence-evolution .e2-st b i { font-style: normal; color: #8a8f82; }
#essence-evolution .e2-st b em { font-style: normal; font-weight: 800; color: #fff6e0; }
#essence-evolution .e2-st b em.up { color: #9cff6a; }
#essence-evolution .e2-abl { left: calc(192 * var(--eu)); bottom: calc(16 * var(--eu)); margin: 0; font-size: calc(22 * var(--eu)); font-weight: 500; color: #cfe8b0; text-shadow: 0 calc(2 * var(--eu)) 0 #000; white-space: nowrap; }
#essence-evolution .e2-empty { left: 0; right: 0; top: 50%; translate: 0 -50%; margin: 0; text-align: center; font-size: calc(24 * var(--eu)); font-weight: 500; color: #a8c79a; }
/* кнопка */
#essence-evolution .e2-buy { left: calc(70 * var(--eu)); top: calc(1545 * var(--eu)); width: calc(723 * var(--eu)); height: calc(100 * var(--eu)); display: grid; place-items: center; }
#essence-evolution .e2-buy::before { content: ''; position: absolute; inset: calc(-20 * var(--eu)); border: solid transparent; border-width: calc(64 * var(--eu)); border-image: url(assets/ui/evo2/btn-red.webp) 128 fill / calc(64 * var(--eu)) stretch; }
#essence-evolution .e2-buy span { position: relative; font-size: calc(48 * var(--eu)); font-weight: 800; text-transform: uppercase; color: #fdf1d0; white-space: nowrap;
  -webkit-text-stroke: calc(2.6 * var(--eu)) rgba(31, 10, 5, .85); paint-order: stroke fill; text-shadow: 0 calc(3 * var(--eu)) calc(7 * var(--eu)) rgba(0, 0, 0, .45); }
#essence-evolution .e2-buy:disabled { cursor: default; }
#essence-evolution .e2-buy:disabled::before { filter: grayscale(.85) brightness(.65); }
#essence-evolution .e2-buy:disabled span { font-size: calc(36 * var(--eu)); color: #c9c4b3; }
#essence-evolution .e2-buy:active:not(:disabled) { transform: translateY(calc(2 * var(--eu))); }
/* портрет (просьба автора): окно выше — сверху было пусто; кнопка во всю ширину окна и выше, стоит на месте нижнего края рамки
   (край у рамки убран), так она заметнее */
@media (orientation: portrait) {
  /* вверх на 110 единиц, но верх рамки (50dvh − 649.5 единиц до сдвига) — не выше статус-бара + 16 px */
  #essence-evolution .e2-stage { translate: -50% calc(-50% + max(-110 * var(--eu), var(--sa-top, 0px) + 16px - (50dvh - 649.5 * var(--eu)))); }
  #essence-evolution .e2-win { height: calc(1353 * var(--eu)); border-bottom-width: 0; border-image-width: calc(30 * var(--eu)) calc(30 * var(--eu)) 0 calc(30 * var(--eu)); }
  #essence-evolution .e2-buy { left: calc(30 * var(--eu)); top: calc(1545 * var(--eu)); width: calc(803 * var(--eu)); height: calc(136 * var(--eu)); }
  #essence-evolution .e2-buy span { font-size: calc(54 * var(--eu)); }
}
@media (prefers-reduced-motion: reduce) { #essence-evolution .e2-opt { transition: none; } #essence-evolution .e2-opt .e2-slot :is(img, .e2-aura) { animation: none !important; } }

/* --- ландшафт телефона 1846×852 --- */
@media (orientation: landscape) and (max-height: 600px) {
  #essence-evolution .e2-stage { --sw: 1846; --eu: min(calc(100vw / 1846), calc(var(--modal-h) / 852)); --row: 1; --bar: 45; width: calc(1846 * var(--eu)); height: calc(852 * var(--eu)); }
  #essence-evolution .e2-title { left: calc(150 * var(--eu)); right: auto; top: calc(28 * var(--eu)); font-size: calc(74 * var(--eu)); text-align: left; }
  #essence-evolution .e2-hint { left: calc(154 * var(--eu)); right: auto; top: calc(124 * var(--eu)); text-align: left; }
  #essence-evolution .e2-close { left: calc(1620 * var(--eu)); top: calc(40 * var(--eu)); }
  #essence-evolution .e2-sep { left: calc(124 * var(--eu)); top: calc(190 * var(--eu)); width: calc(1598 * var(--eu)); }
  #essence-evolution .e2-win { left: calc(112 * var(--eu)); top: calc(8 * var(--eu)); width: calc(1622 * var(--eu)); height: calc(807 * var(--eu)); border-image-source: url(assets/ui/evo2/win-l.webp); }
  #essence-evolution .e2-now { left: calc(172 * var(--eu)); top: calc(245 * var(--eu)); }
  #essence-evolution .e2-now-plate { left: calc(197 * var(--eu)); top: calc(521 * var(--eu)); width: calc(250 * var(--eu)); height: calc(58 * var(--eu)); }
  #essence-evolution .e2-opts { --col: 300; --ct: 277; --ch: 125; --ph: 62; --pn: 26; --cf: 21; --cy: 34; left: calc(499.5 * var(--eu)); right: auto; width: calc(1200 * var(--eu)); top: calc(280 * var(--eu)); gap: calc(87.5 * var(--eu)); }
  #essence-evolution .e2-opt .e2-slot { --s: 240; }
  #essence-evolution .e2-detail { left: calc(160 * var(--eu)); top: calc(700 * var(--eu)); width: calc(880 * var(--eu)); height: calc(92 * var(--eu)); }
  #essence-evolution .e2-detail::before { border-width: calc(46 * var(--eu)); border-image-width: calc(46 * var(--eu)); }
  #essence-evolution :is(.e2-art, .e2-div, .e2-abl) { display: none; }
  #essence-evolution .e2-stats { left: calc(44 * var(--eu)); top: calc(10 * var(--eu)); right: auto; grid-template-columns: repeat(3, calc(280 * var(--eu))); column-gap: 0; row-gap: calc(4 * var(--eu)); }
  #essence-evolution .e2-st img { width: calc(30 * var(--eu)); height: calc(30 * var(--eu)); }
  #essence-evolution .e2-st span { flex-direction: row; align-items: baseline; gap: calc(8 * var(--eu)); }
  #essence-evolution .e2-st small { font-size: calc(20 * var(--eu)); }
  #essence-evolution .e2-st b { font-size: calc(24 * var(--eu)); }
  #essence-evolution .e2-buy { left: calc(1070 * var(--eu)); top: calc(696 * var(--eu)); width: calc(630 * var(--eu)); height: calc(100 * var(--eu)); }
  #essence-evolution .e2-buy span { font-size: calc(50 * var(--eu)); }
}
/* --- ПК 1672×941 --- */
@media (orientation: landscape) and (min-height: 601px) {
  #essence-evolution .e2-stage { --sw: 1672; --eu: min(calc(100vw / 1672), calc(var(--modal-h) / 941)); --bar: 8; width: calc(1672 * var(--eu)); height: calc(941 * var(--eu)); }
  #essence-evolution .e2-title { top: calc(22 * var(--eu)); font-size: calc(64 * var(--eu)); }
  #essence-evolution .e2-hint { top: calc(106 * var(--eu)); font-size: calc(22 * var(--eu)); }
  #essence-evolution .e2-sep { left: calc(317 * var(--eu)); top: calc(145 * var(--eu)); width: calc(1038 * var(--eu)); }
  #essence-evolution .e2-close { left: calc(1268 * var(--eu)); top: calc(30 * var(--eu)); width: calc(66 * var(--eu)); height: calc(66 * var(--eu)); }
  #essence-evolution .e2-win { left: calc(305 * var(--eu)); top: 0; width: calc(1062 * var(--eu)); height: calc(905 * var(--eu)); border-image-source: url(assets/ui/evo2/win-d.webp); }
  #essence-evolution .e2-now { left: calc(716 * var(--eu)); top: calc(142 * var(--eu)); }
  #essence-evolution .e2-now .e2-slot { --s: 240; }
  #essence-evolution .e2-now-plate { left: calc(721 * var(--eu)); top: calc(362 * var(--eu)); width: calc(230 * var(--eu)); height: calc(52 * var(--eu)); font-size: calc(25 * var(--eu)); }
  #essence-evolution .e2-now-plate b { font-size: calc(27 * var(--eu)); }
  #essence-evolution .e2-opts { --col: 250; --ct: 190; --ch: 112; --ph: 56; --pn: 22; --cf: 19; --cy: 30; top: calc(440 * var(--eu)); gap: calc(45 * var(--eu)); }
  #essence-evolution .e2-opt .e2-slot { --s: 170; }
  #essence-evolution .e2-detail { left: calc(335 * var(--eu)); top: calc(752 * var(--eu)); width: calc(1002 * var(--eu)); height: calc(126 * var(--eu)); }
  #essence-evolution .e2-detail::before { border-width: calc(56 * var(--eu)); border-image-width: calc(56 * var(--eu)); }
  #essence-evolution .e2-art { left: calc(18 * var(--eu)); top: calc(16 * var(--eu)); width: calc(104 * var(--eu)); height: calc(92 * var(--eu)); }
  #essence-evolution .e2-div { left: calc(136 * var(--eu)); top: calc(22 * var(--eu)); height: calc(82 * var(--eu)); }
  #essence-evolution .e2-abl { display: none; }
  #essence-evolution .e2-stats { left: calc(154 * var(--eu)); top: calc(14 * var(--eu)); right: auto; column-gap: calc(12 * var(--eu)); row-gap: calc(6 * var(--eu)); }
  #essence-evolution .e2-st img { width: calc(28 * var(--eu)); height: calc(28 * var(--eu)); }
  #essence-evolution .e2-st small { font-size: calc(14 * var(--eu)); }
  #essence-evolution .e2-st b { font-size: calc(18 * var(--eu)); }
  #essence-evolution .e2-empty { right: calc(420 * var(--eu)); }
  #essence-evolution .e2-buy { left: calc(910 * var(--eu)); top: calc(774 * var(--eu)); width: calc(400 * var(--eu)); height: calc(82 * var(--eu)); }
  #essence-evolution .e2-buy span { font-size: calc(40 * var(--eu)); }
  #essence-evolution .e2-buy:disabled span { font-size: calc(28 * var(--eu)); }
}
/* HUD v2 на телефоне: плашка босса (имя и полоса) — сразу под верхними плашками, отступ 36px; и пока босс идёт, и в бою.
   .scene-top стоит на --h2-top-h = низ плашек + 6px, поэтому сдвиг 30px */
@media (orientation: portrait), (orientation: landscape) and (max-height: 600px) {
  html body.hud2 #arena .scene-top .boss-bar { position: absolute !important; left: 50% !important; top: 30px !important; margin: 0 !important; transform: translateX(-50%) !important; translate: none !important; }
}

/* ===== «Эволюция свершилась» v2 и «Таланты» v2 (Figma 162:6296 и 162:7925) — только портрет.
   Сцена — кадр макета 863×1823, координаты — пиксели макета × --eu; рамки и неизменные части — картинки assets/ui/rv2 ===== */
#essence-evolution .rv2[hidden] { display: none !important; }
#meta .t2 { display: none; }
@media (orientation: portrait) {
  html body #essence-evolution.rv2-on:not([hidden]) { background: rgba(3, 6, 6, .9) !important; padding: 0 !important; display: block !important; }
  html body #essence-evolution.rv2-on > :not(.rv2) { display: none !important; }
  html body.hud2 #meta.meta-screen { padding: 0 !important; background: #0d1311 !important; }
  html body.hud2 #meta.meta-screen > :not(.t2):not(.meta-bg) { display: none !important; }
  html body.hud2 #meta .t2 { display: block; }
}
#essence-evolution .rv2, #meta .t2 { position: absolute; inset: 0; overflow: hidden; color: #fdf1d0; z-index: 2; }
html body :is(#essence-evolution .rv2, #meta .t2), html body :is(#essence-evolution .rv2, #meta .t2) * { font-family: 'Rubik', 'Nunito', sans-serif !important; box-sizing: border-box; }
:where(#essence-evolution .rv2, #meta .t2) :where(button) { font: inherit; color: inherit; border: 0; padding: 0; margin: 0; background: none; box-shadow: none; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
:is(#essence-evolution .rv2, #meta .t2) img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
:is(.rv2-stage, .t2-stage) { --eu: min(calc(100vw / 863), calc(var(--modal-h) / 1823)); position: absolute; left: 50%; top: 50%; width: calc(863 * var(--eu)); height: calc(1823 * var(--eu)); translate: -50% -50%; }
:is(.rv2-stage, .t2-stage) > * { position: absolute; }
:is(.rv2-chrome, .t2-chrome) { inset: 0; background: center / 100% 100% no-repeat; pointer-events: none; }
.rv2-chrome { background-image: url(assets/ui/rv2/rv-chrome.webp); }
.t2-chrome { background-image: url(assets/ui/rv2/tl-chrome.webp); }
.rv2-stage :is(b, span, small, em) , .t2-stage :is(b, span, small, em) { text-shadow: 0 calc(2 * var(--eu)) 0 rgba(0, 0, 0, .9); }
/* --- итог эволюции --- */
.rv2-close { left: calc(725 * var(--eu)); top: calc(98 * var(--eu)); width: calc(80 * var(--eu)); height: calc(80 * var(--eu)); border-radius: calc(12 * var(--eu)); }
.rv2-art { left: calc(287 * var(--eu)); top: calc(244 * var(--eu)); width: calc(290 * var(--eu)); height: calc(256 * var(--eu)); object-fit: contain; animation: rv2-in .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.rv2-eyebrow, .rv2-name, .rv2-cls { left: 0; right: 0; text-align: center; white-space: nowrap; }
.rv2-eyebrow { top: calc(507 * var(--eu)); font-size: calc(22 * var(--eu)); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #9fd88a; }
.rv2-name { top: calc(530 * var(--eu)); font-size: calc(64 * var(--eu)); font-weight: 800; line-height: 1.2; color: #fff6e0; -webkit-text-stroke: calc(3 * var(--eu)) #030606; paint-order: stroke fill; }
.rv2-cls { top: calc(608 * var(--eu)); font-size: calc(28 * var(--eu)); font-weight: 500; color: #cfe8b0; }
.rv2-stats { left: calc(60 * var(--eu)); top: calc(736 * var(--eu)); width: calc(743 * var(--eu)); display: grid; grid-template-columns: repeat(2, calc(363 * var(--eu))); column-gap: calc(17 * var(--eu)); row-gap: calc(12 * var(--eu)); }
.rv2-st { position: relative; height: calc(80 * var(--eu)); display: flex; align-items: center; padding: 0 calc(18 * var(--eu)); gap: calc(14 * var(--eu)); }
.rv2-st img { width: calc(48 * var(--eu)); height: calc(48 * var(--eu)); object-fit: contain; flex: none; }
.rv2-st small { flex: 1; font-size: calc(21 * var(--eu)); line-height: 1.1; font-weight: 500; color: #c9cbbf; }
.rv2-st b { font-size: calc(30 * var(--eu)); font-weight: 700; color: #d8d2c2; white-space: nowrap; }
.rv2-st b i { font-style: normal; color: #8fd86a; }
.rv2-st b em { font-style: normal; font-weight: 800; color: #9cff6a; }
/* путь */
.rv2-path { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.rv2-path > * { position: absolute; }
.rv2-node { display: flex; flex-direction: column; align-items: center; }
.rv2-node b { margin-top: calc(6 * var(--eu)); font-size: calc(24 * var(--eu)); font-weight: 700; color: #fdf1d0; white-space: nowrap; }
.rv2-node em { margin-top: calc(6 * var(--eu)); padding: calc(4 * var(--eu)) calc(14 * var(--eu)); border-radius: calc(8 * var(--eu)); background: #5fbf2a; box-shadow: 0 0 0 calc(2 * var(--eu)) #163b08; font-size: calc(20 * var(--eu)); font-weight: 800; font-style: normal; color: #0d2205; text-shadow: none !important; }
.rv2-node.prev { left: calc(185 * var(--eu)); top: calc(1095 * var(--eu)); width: calc(130 * var(--eu)); }
#essence-evolution .rv2-node.prev .e2-slot { --s: 130; }
.rv2-node.cur { left: calc(395 * var(--eu)); top: calc(1081 * var(--eu)); width: calc(150 * var(--eu)); }
#essence-evolution .rv2-node.cur .e2-slot { --s: 150; filter: drop-shadow(0 0 calc(18 * var(--eu)) rgba(140, 255, 80, .55)); }
.rv2-ok { position: absolute; width: calc(48 * var(--eu)); height: calc(48 * var(--eu)); background: url(assets/ui/evo2/check.png) center / 100% 100% no-repeat; right: calc(-14 * var(--eu)); top: calc(var(--s, 130) * .66 * var(--eu)); z-index: 3; }
.rv2-node.prev .rv2-ok { top: calc(86 * var(--eu)); } .rv2-node.cur .rv2-ok { top: calc(100 * var(--eu)); }
.rv2-link { left: calc(315 * var(--eu)); top: calc(1157 * var(--eu)); width: calc(80 * var(--eu)); height: calc(5 * var(--eu)); background: #86e43e; box-shadow: 0 0 calc(6 * var(--eu)) rgba(130, 255, 80, .7); }
.rv2-tree { left: calc(190 * var(--eu)); top: calc(1300 * var(--eu)); width: calc(482 * var(--eu)); height: calc(40 * var(--eu));
  background: linear-gradient(#a37838, #a37838) calc(280 * var(--eu)) 0 / calc(5 * var(--eu)) calc(22 * var(--eu)) no-repeat, linear-gradient(#a37838, #a37838) 0 calc(20 * var(--eu)) / 100% calc(5 * var(--eu)) no-repeat,
  linear-gradient(#a37838, #a37838) 0 calc(20 * var(--eu)) / calc(5 * var(--eu)) 100% no-repeat, linear-gradient(#a37838, #a37838) 50% calc(20 * var(--eu)) / calc(5 * var(--eu)) 100% no-repeat, linear-gradient(#a37838, #a37838) 100% calc(20 * var(--eu)) / calc(5 * var(--eu)) 100% no-repeat; }
.rv2-tree.n1 { width: calc(5 * var(--eu)); left: calc(470 * var(--eu)); background: #a37838; }
.rv2-tree.n2 { left: calc(310 * var(--eu)); width: calc(241 * var(--eu)); background: linear-gradient(#a37838, #a37838) 0 calc(20 * var(--eu)) / 100% calc(5 * var(--eu)) no-repeat, linear-gradient(#a37838, #a37838) 0 calc(20 * var(--eu)) / calc(5 * var(--eu)) 100% no-repeat, linear-gradient(#a37838, #a37838) 100% calc(20 * var(--eu)) / calc(5 * var(--eu)) 100% no-repeat, linear-gradient(#a37838, #a37838) calc(160 * var(--eu)) 0 / calc(5 * var(--eu)) calc(22 * var(--eu)) no-repeat; }
.rv2-future { left: 0; right: 0; top: calc(1335 * var(--eu)); display: flex; justify-content: center; column-gap: calc(111 * var(--eu)); row-gap: 0; flex-wrap: wrap; }
.rv2-future.n2 { column-gap: calc(111 * var(--eu)); }
.rv2-future small { flex-basis: 100%; text-align: center; margin-top: calc(6 * var(--eu)); font-size: calc(22 * var(--eu)); font-weight: 500; color: #c9cbbf; }
.rv2-future.n0 { top: calc(1360 * var(--eu)); }
.rv2-node.fut { position: relative; width: calc(130 * var(--eu)); }
#essence-evolution .rv2-node.fut .e2-slot { --s: 130; }
.rv2-q { position: absolute; z-index: 3; left: 0; right: 0; top: calc(32 * var(--eu)); margin: 0 !important; text-align: center; font-size: calc(52 * var(--eu)) !important; font-weight: 800; color: #e6e1d2 !important; }
.rv2-lock { position: absolute; z-index: 3; left: 50%; top: calc(104 * var(--eu)); width: calc(36 * var(--eu)); height: calc(42 * var(--eu)); translate: -50% 0; background: url(assets/ui/chest2/lock.png) center / contain no-repeat; }
.rv2-next { left: 0; right: 0; top: calc(1548 * var(--eu)); text-align: center; font-size: calc(26 * var(--eu)); font-weight: 500; color: #a9ae9f; white-space: nowrap; }
.rv2-next i { font-style: normal; color: #6fb24a; } .rv2-next b { color: #d8b04a; font-weight: 800; }
.rv2-go { left: calc(46 * var(--eu)); top: calc(1628 * var(--eu)); width: calc(771 * var(--eu)); height: calc(112 * var(--eu)); border-radius: calc(20 * var(--eu)); }
.rv2-go:active, .rv2-close:active { background: rgba(255, 255, 255, .06) !important; }
@keyframes rv2-in { from { scale: .5; opacity: 0; } }
/* --- таланты --- */
.t2-back { left: calc(30 * var(--eu)); top: calc(40 * var(--eu)); width: calc(96 * var(--eu)); height: calc(96 * var(--eu)); border-radius: calc(16 * var(--eu)); }
.t2-gems { left: calc(742 * var(--eu)); top: calc(62 * var(--eu)); font-size: calc(44 * var(--eu)); font-weight: 800; line-height: 1.2; color: #fdf1d0; -webkit-text-stroke: calc(3 * var(--eu)) #030606; paint-order: stroke fill; }
.t2-tabs { left: calc(30 * var(--eu)); top: calc(160 * var(--eu)); display: flex; gap: calc(14 * var(--eu)); }
.t2-tab { position: relative; width: calc(258 * var(--eu)); height: calc(150 * var(--eu)); display: flex; flex-direction: column; align-items: center; padding-top: calc(12 * var(--eu)); isolation: isolate; }
.t2-tab::before { content: ''; position: absolute; inset: calc(-6 * var(--eu)); z-index: -1; background: url(assets/ui/rv2/tab.webp) center / 100% 100% no-repeat; }
.t2-tab.on::before { inset: calc(-24 * var(--eu)); background-image: url(assets/ui/rv2/tab-gold.webp); }
.t2-tab img { width: calc(88 * var(--eu)); height: calc(88 * var(--eu)); object-fit: contain; filter: drop-shadow(0 calc(4 * var(--eu)) calc(5 * var(--eu)) rgba(0, 0, 0, .45)); }
.t2-tab b { margin-top: calc(10 * var(--eu)); font-size: calc(24 * var(--eu)); font-weight: 800; text-transform: uppercase; color: #e6e1d2; }
.t2-tab.on b { color: #3a1f05; text-shadow: 0 1px 0 rgba(255, 240, 180, .6) !important; }
.t2-tab .menu-badge { position: absolute; right: calc(10 * var(--eu)); top: calc(8 * var(--eu)); }
.t2-count { left: 0; right: 0; top: calc(345 * var(--eu)); text-align: center; font-size: calc(30 * var(--eu)); font-weight: 700; color: #fdf1d0; }
.t2-count b { color: #ffcb45; font-weight: 800; }
.t2-rows { left: 0; top: 0; width: 100%; }
.t2-row { position: absolute; left: calc(62 * var(--eu)); width: calc(771 * var(--eu)); height: calc(189 * var(--eu)); }
.t2-row:nth-child(1) { top: calc(430 * var(--eu)); } .t2-row:nth-child(2) { top: calc(648 * var(--eu)); } .t2-row:nth-child(3) { top: calc(866 * var(--eu)); } .t2-row:nth-child(4) { top: calc(1084 * var(--eu)); }
.t2-slot { position: absolute; z-index: 2; left: 0; top: calc(6 * var(--eu)); width: calc(176 * var(--eu)); height: calc(176 * var(--eu)); }
.t2-slot::before { content: ''; position: absolute; inset: calc(-6 * var(--eu)); background: url(assets/ui/rv2/tslot.webp) center / 100% 100% no-repeat; }
.t2-row.sel .t2-slot::before, .t2-slot.big::before { inset: calc(-40 * var(--eu)); background-image: url(assets/ui/rv2/tslot-gold.webp); }
.t2-slot img { position: absolute; z-index: 1; left: 13%; top: 13%; width: 74%; height: 74%; object-fit: contain; }
.t2-slot::after { content: ''; position: absolute; z-index: 2; left: 50%; top: 50%; width: 84%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse 58% 30% at 44% 20%, rgba(255, 255, 255, .42), rgba(255, 255, 255, .06) 70%, transparent 72%), radial-gradient(circle, transparent 66%, rgba(0, 0, 0, .35) 100%); }
.t2-row.locked .t2-slot img { filter: grayscale(1) brightness(.75); }
.t2-lock { position: absolute; z-index: 3; left: 50%; bottom: calc(-22 * var(--eu)); width: calc(48 * var(--eu)); height: calc(48 * var(--eu)); translate: -50% 0; background: url(assets/ui/chest2/lock.png) center / 55% no-repeat, url(assets/ui/rv2/lockplate.webp) center / calc(56 * var(--eu)) no-repeat; }
.t2-card { position: absolute; left: calc(153 * var(--eu)); top: 0; width: calc(618 * var(--eu)); height: calc(183 * var(--eu)); isolation: isolate; }
.t2-card::before { content: ''; position: absolute; inset: calc(-6 * var(--eu)); z-index: -1; background: url(assets/ui/rv2/tcard.webp) center / 100% 100% no-repeat; }
.t2-row.sel .t2-card::before { inset: calc(-34 * var(--eu)); background-image: url(assets/ui/rv2/tcard-gold.webp); }
.t2-card > * { position: absolute; }
.t2-name { left: calc(55 * var(--eu)); top: calc(22 * var(--eu)); font-size: calc(32 * var(--eu)); font-weight: 800; color: #fff6e0; white-space: nowrap; }
.t2-row.sel .t2-name { color: #ffcb45; }
.t2-rank { right: calc(23 * var(--eu)); top: calc(20 * var(--eu)); width: calc(110 * var(--eu)); height: calc(52 * var(--eu)); display: flex; align-items: center; justify-content: center; white-space: nowrap; font-size: calc(24 * var(--eu)); font-weight: 800; color: #fdf1d0;
  border: solid transparent; border-width: calc(14 * var(--eu)); border-image: url(assets/ui/evo2/plate.webp) 44 fill / calc(14 * var(--eu)) / calc(3 * var(--eu)) stretch; }
.t2-desc { left: calc(55 * var(--eu)); top: calc(83 * var(--eu)); right: calc(20 * var(--eu)); font-size: calc(24 * var(--eu)); font-weight: 500; color: #c9cbbf; }
.t2-desc em, .t2-eff em { font-style: normal; font-weight: 800; color: #7fe07a; }
.t2-req { left: calc(55 * var(--eu)); top: calc(126 * var(--eu)); display: grid; grid-template-columns: auto 1fr; column-gap: calc(10 * var(--eu)); align-items: center; }
.t2-req i { grid-row: span 2; width: calc(22 * var(--eu)); height: calc(26 * var(--eu)); background: url(assets/ui/chest2/lock.png) center / contain no-repeat; }
.t2-req small { font-size: calc(18 * var(--eu)); font-weight: 500; color: #a9ae9f; }
.t2-req b { font-size: calc(20 * var(--eu)); font-weight: 700; color: #ffcb45; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .t2-row:not(.sel):hover .t2-card::before { filter: brightness(1.25); } .t2-tab:not(.on):hover::before { filter: brightness(1.2); } }
/* выбранный талант */
.t2-sel { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.t2-sel > * { position: absolute; }
.t2-slot.big { left: calc(75 * var(--eu)); top: calc(1360 * var(--eu)); width: calc(200 * var(--eu)); height: calc(200 * var(--eu)); }
.t2-sname { left: calc(300 * var(--eu)); top: calc(1356 * var(--eu)); font-size: calc(38 * var(--eu)); font-weight: 800; color: #ffcb45; white-space: nowrap; }
.t2-srank { left: calc(608 * var(--eu)); top: calc(1350 * var(--eu)); width: calc(200 * var(--eu)); height: calc(56 * var(--eu)); display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--eu)); font-size: calc(26 * var(--eu)); font-weight: 700; color: #d8d2c2; white-space: nowrap;
  border: solid transparent; border-width: calc(14 * var(--eu)); border-image: url(assets/ui/evo2/plate.webp) 44 fill / calc(14 * var(--eu)) / calc(3 * var(--eu)) stretch; }
.t2-srank i { font-style: normal; color: #8fd86a; } .t2-srank em { font-style: normal; font-weight: 800; color: #9cff6a; }
.t2-eff { left: calc(300 * var(--eu)); top: calc(1426 * var(--eu)); right: calc(50 * var(--eu)); font-size: calc(30 * var(--eu)); font-weight: 500; color: #d8d2c2; }
.t2-eff i { font-style: normal; color: #8fd86a; }
.t2-opens { left: calc(300 * var(--eu)); top: calc(1500 * var(--eu)); display: flex; align-items: center; gap: calc(10 * var(--eu)); font-size: calc(22 * var(--eu)); }
.t2-opens img { width: calc(40 * var(--eu)); height: calc(40 * var(--eu)); object-fit: contain; }
.t2-opens small { font-size: inherit; color: #a9ae9f; font-weight: 500; } .t2-opens b { color: #ffcb45; font-weight: 700; }
.t2-buy { left: calc(64 * var(--eu)); top: calc(1600 * var(--eu)); width: calc(735 * var(--eu)); height: calc(160 * var(--eu)); display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: calc(26 * var(--eu)); }
.t2-buy-t { display: flex; align-items: center; gap: calc(10 * var(--eu)); font-size: calc(52 * var(--eu)); font-weight: 800; text-transform: uppercase; color: #fdf1d0; -webkit-text-stroke: calc(2.6 * var(--eu)) rgba(11, 26, 4, .85); paint-order: stroke fill; }
.t2-buy-t img { width: calc(56 * var(--eu)); height: calc(56 * var(--eu)); }
.t2-buy-sub { display: flex; align-items: center; gap: calc(6 * var(--eu)); margin-top: calc(4 * var(--eu)); font-size: calc(26 * var(--eu)); font-weight: 700; color: #e9ffd8; }
.t2-buy-sub img { width: calc(34 * var(--eu)); height: calc(34 * var(--eu)); }
.t2-buy:active:not(:disabled) { transform: translateY(calc(2 * var(--eu))); }
.t2-buy:is(:disabled, .poor) { filter: grayscale(.8) brightness(.7); background: rgba(13, 19, 17, .35) !important; }
.t2-buy:disabled { cursor: default; }
/* HUD v2: снизу поля — чёрный градиент в прозрачный. Слои: фон карты → градиент (::after дальнего слоя) → дорога → нижняя плашка */
html body.hud2 #bg .layer.far::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 72%; pointer-events: none;
  background: linear-gradient(to top, #000 0, rgba(0, 0, 0, .9) 30%, rgba(0, 0, 0, .55) 52%, rgba(0, 0, 0, .2) 75%, transparent 100%); }   /* от низа поля, за дорогой; над дорогой виден переход */
html body.hud2 #bg .layer.far { position: absolute; }
/* окна v2 (сундук, эволюция, итог, таланты): высота без «островка» iPhone и нижней полосы; содержимое — ниже выреза */
:root { --modal-h: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
@supports (height: 100dvh) { :root { --modal-h: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); } }
html body #cards.chest2 .c2 { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
#essence-evolution .e2-stage, .rv2-stage, .t2-stage { top: calc(50% + (env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) / 2) !important; }

/* ===== Главное меню v2 (Figma «Главное меню v2»: портрет 191:6332, ПК 194:6332, ландшафт телефона 194:7321).
   Раскладка — game.js m2Fit: каждый элемент [data-k] ставится по прямоугольнику макета; --u — пиксель макета на экране.
   Рамки, иконки и кнопка «В бой» — картинки из Figma (assets/ui/menu2), текст и цифры — живые ===== */
html body #menu.m2-on[hidden] { display: none !important; }   /* display:block ниже не должен перебивать закрытое меню */
html body #menu.m2-on:not([hidden]) { padding: 0 !important; background: #0d1311 !important; overflow: hidden !important; display: block !important; }
html body #menu.m2-on > :not(#m2) { display: none !important; }
#m2 { position: absolute; inset: 0; overflow: hidden; padding: var(--sa-top, 0px) 0 var(--sa-bottom, 0px);   /* во встроенном окне вырез приходит от подложки, env() там пуст */ box-sizing: border-box;
  color: #fdf1d0; font-weight: 800; line-height: 1.15; text-align: left; --u: 1px; }
#m2[hidden], #m2 [hidden], #m2 .m2-off { display: none !important; }
#m2, #m2 * { font-family: 'Rubik', 'Nunito', sans-serif !important; box-sizing: border-box; }
#m2 :where(button) { font: inherit; color: inherit; border: 0; padding: 0; margin: 0; background: none; box-shadow: none; cursor: pointer; text-align: inherit; -webkit-tap-highlight-color: transparent; }
#m2 img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
#m2 > * { position: absolute; }
/* размеры шрифтов макета по раскладкам */
#m2.m2-p { --fcr: 44; --fwn: 30; --fws: 22; --fsect: 37; --fname: 34; --fsub: 18; --fnum: 40; --flab: 22; --fb1: 26; --fb2: 22; --fgo: 76; --fgos: 28; }
#m2.m2-d { --fcr: 40; --fwn: 34; --fws: 22; --fsect: 32; --fname: 32; --fsub: 18; --fnum: 34; --flab: 18; --fb1: 24; --fb2: 18; --fgo: 72; --fgos: 28; }
#m2.m2-l { --fcr: 44; --fwn: 38; --fws: 24; --fsect: 35; --fname: 34; --fsub: 20; --fnum: 36; --flab: 17; --fb1: 21; --fb2: 20; --fgo: 76; --fgos: 30; }
/* слои: фон и тени → сцена → рамки из Figma → текст → нажимаемые места */
#m2 .m2-bg { z-index: 0; max-width: none; }
#m2 .m2-shade-t { z-index: 1; left: 0; right: 0; top: 0; height: 22%; background: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); pointer-events: none; }
#m2 .m2-shade-b { z-index: 1; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .55) 40%, rgba(0, 0, 0, .9)); pointer-events: none; }
#m2 :is(.m2-sect, .m2-glow, .m2-hero, .m2-label) { z-index: 2; }
#m2 .m2-chrome { z-index: 3; }
#m2 :is(.m2-cr, .m2-world, .m2-dots, .m2-cell, .m2-b1, .m2-b2, .m2-arrow, .m2-quit) { z-index: 4; }
#m2 :is(.m2-set, .m2-boss, .m2-go) { z-index: 5; }
#m2 :is(.m2-cr, .m2-world, .m2-dots, .m2-cell, .m2-b1, .m2-b2, .m2-arrow, .m2-label) { pointer-events: none; }
/* обводка текста макета */
#m2 :is(.m2-cr b, .m2-world b, .m2-sect b, .m2-label b, .m2-cell b, .m2-go b, .m2-go small) {
  -webkit-text-stroke: calc(var(--sw, 2.5) * var(--u)) var(--sc, #030606); paint-order: stroke fill; text-shadow: 0 calc(3 * var(--u)) 0 rgba(0, 0, 0, .9); }
/* верх: кристаллы, мир с точками миров, настройки */
#m2 .m2-cr { display: flex; align-items: center; }
#m2 .m2-cr b { --sw: 3; font-size: calc(var(--fcr) * var(--u)); }
#m2 .m2-world { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(4 * var(--u)); white-space: nowrap; }
#m2 .m2-world b { font-size: calc(var(--fwn) * var(--u) * var(--k, 1)); }
#m2 .m2-world small { font-size: calc(var(--fws) * var(--u) * var(--k, 1)); font-weight: 600; color: #c9cbbf; text-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, .9); }
#m2.m2-l .m2-world { flex-direction: row; gap: calc(14 * var(--u)); }
#m2.m2-l .m2-world small::before { content: '· '; }
#m2 .m2-dots { display: flex; align-items: center; justify-content: center; gap: calc(5 * var(--u)); }
#m2.m2-p .m2-dots { gap: calc(4 * var(--u)); }
#m2 .m2-dots i { flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; background: #2a302d; border: calc(2 * var(--u)) solid #0a0d0c; }
#m2 .m2-dots i.done { background: #8a7838; }
#m2 .m2-dots i.now { background: #ffcb45; border-color: #5a3a08; box-shadow: 0 0 calc(8 * var(--u)) rgba(255, 203, 69, .6); }
#m2 .m2-set { border-radius: calc(18 * var(--u)); transition: background .15s; }
#m2 .m2-set:hover { background: rgba(255, 230, 170, .1); }
#m2 .m2-set:active { background: rgba(255, 230, 170, .18); }
/* разделы у зданий: рамка — картинка с полями 24 px под тень */
#m2 .m2-sect { display: flex; align-items: center; justify-content: center; transition: transform .12s; isolation: isolate; }
#m2 .m2-sect::before { content: ''; position: absolute; inset: calc(-24 * var(--u)); z-index: -1; background: url(assets/ui/menu2/p-sect.webp) center / 100% 100% no-repeat; transition: filter .15s; }   /* золотая потёртая рамка со скошенными углами (Figma «m2-*-sect»); тёмная «*-sect2» — запасная */
#m2.m2-d .m2-sect::before { background-image: url(assets/ui/menu2/d-sect.webp); }
#m2.m2-l .m2-sect::before { background-image: url(assets/ui/menu2/l-sect.webp); }
/* «Таланты» с доступной прокачкой (game.js .ready): рамка ярче и золотее, сзади пульсирует золотое свечение */
#m2 .m2-sect.ready::before { filter: sepia(.35) saturate(2.2) brightness(1.45) drop-shadow(0 0 calc(2 * var(--u)) #ffe27a) drop-shadow(0 0 calc(2 * var(--u)) #ffc83a) drop-shadow(0 0 calc(8 * var(--u)) rgba(255, 210, 90, .9)); }   /* drop-shadow повторяет скошенную форму — яркий золотой контур */
#m2 .m2-sect.ready::after { content: ''; position: absolute; inset: calc(-6 * var(--u)) calc(-2 * var(--u)); z-index: -2; border-radius: calc(20 * var(--u)); pointer-events: none;
  background: rgba(255, 200, 70, .35); box-shadow: 0 0 calc(30 * var(--u)) calc(14 * var(--u)) rgba(255, 196, 60, .75), 0 0 calc(70 * var(--u)) calc(24 * var(--u)) rgba(255, 160, 30, .4);
  animation: m2-ready 1.5s ease-in-out infinite; }
@keyframes m2-ready { 0%, 100% { opacity: .4; scale: .97; } 50% { opacity: 1; scale: 1.05; } }
@media (prefers-reduced-motion: reduce) { #m2 .m2-sect.ready::after { animation: none; } }
#m2 .m2-sect b { font-size: calc(var(--fsect) * var(--u) * var(--k, 1)); white-space: nowrap; }
#m2 .m2-sect:hover::before { filter: brightness(1.3) drop-shadow(0 0 calc(10 * var(--u)) rgba(255, 214, 140, .25)); }
#m2 .m2-sect:active { transform: scale(.97); }
#m2 .m2-badge { position: absolute; right: calc(-8 * var(--u)); top: calc(-12 * var(--u)); min-width: calc(40 * var(--u)); height: calc(40 * var(--u)); padding: 0 calc(8 * var(--u));
  display: flex; align-items: center; justify-content: center; border-radius: calc(20 * var(--u)); background: #e2402c; border: calc(3 * var(--u)) solid #2a0805;
  color: #fff; font-size: calc(24 * var(--u)); font-style: normal; font-weight: 800; box-shadow: 0 calc(3 * var(--u)) 0 rgba(0, 0, 0, .6); }
/* слайм на пьедестале */
#m2 .m2-glow { pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(140, 255, 77, .42), rgba(140, 255, 77, 0)); mix-blend-mode: screen; }
#m2 .m2-hero img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 calc(10 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .5)); transform-origin: 50% 90%; animation: m2-bob 2.6s ease-in-out infinite;
  scale: var(--m2grow, 1); }   /* --m2grow — ступень формы (game.js renderM2), растёт вверх от ног */
#m2 .m2-sect { z-index: 3; }   /* крупная форма заходит под плашки разделов — подписи остаются поверх */
#m2 .m2-hero img.f2-poke { animation: f2-poke .35s ease-out !important; }
@keyframes m2-bob { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, .975); } }
#m2 .m2-hero.evolution-ready img { filter: drop-shadow(0 0 calc(18 * var(--u)) rgba(255, 203, 69, .85)) drop-shadow(0 calc(10 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .5)); }
#m2 .m2-say { position: absolute; left: 50%; bottom: 96%; translate: -50% 0; padding: calc(8 * var(--u)) calc(16 * var(--u)); border-radius: calc(14 * var(--u)); background: #f6f0dc; color: #2a2014;
  font-size: calc(24 * var(--u)); font-weight: 800; white-space: nowrap; opacity: 0; pointer-events: none; }
#m2 .m2-say.on { animation: f2-say 1.8s ease-out both; }
#m2 .m2-label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(4 * var(--u)); white-space: nowrap; }
#m2 .m2-label b { font-size: calc(var(--fname) * var(--u)); text-shadow: 0 calc(3 * var(--u)) 0 #000, 0 calc(2 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, .95), 0 0 calc(24 * var(--u)) rgba(0, 0, 0, .7); }
#m2 .m2-label small { font-size: calc(var(--fsub) * var(--u)); font-weight: 600; color: #c4e8b2; -webkit-text-stroke: calc(2 * var(--u)) #030606; paint-order: stroke fill;
  text-shadow: 0 calc(2 * var(--u)) 0 #000, 0 calc(2 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, .95); }
#m2 .m2-label .m2-ready { color: #ffcb45; }
/* низ: счётчики, цель, «В бой» */
#m2 .m2-cell { display: flex; flex-direction: column; justify-content: center; gap: calc(2 * var(--u)); white-space: nowrap; }
#m2 .m2-cell b { --sw: 2; font-size: calc(var(--fnum) * var(--u) * var(--k, 1)); }
#m2 .m2-cell b em { font-style: normal; font-size: .62em; color: #a9ae9f; }
#m2 .m2-cell small { font-size: calc(var(--flab) * var(--u) * var(--k, 1)); font-weight: 500; color: #c9cbbf; }
#m2 .m2-b1, #m2 .m2-b2 { display: flex; align-items: center; white-space: nowrap; text-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, .9); }
#m2 .m2-b1 { font-size: calc(var(--fb1) * var(--u) * var(--k, 1)); font-weight: 700; }
#m2 .m2-b1 b { margin-left: .3em; color: #ffcb45; font-weight: 800; }
#m2 .m2-b2 { font-size: calc(var(--fb2) * var(--u) * var(--k, 1)); font-weight: 500; color: #a9ae9f; }
#m2 .m2-b2 b { margin: 0 .25em; color: #9fd88a; font-weight: 700; }
#m2 .m2-arrow { display: flex; align-items: center; justify-content: center; font-style: normal; font-size: calc(var(--fb1) * 2 * var(--u)); color: #c9cbbf; }
#m2 .m2-boss { border-radius: calc(12 * var(--u)); transition: background .15s; }
#m2 .m2-boss:hover { background: rgba(255, 255, 255, .05); }
#m2 .m2-go { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2 * var(--u)); text-align: center; transition: filter .15s, transform .1s; }
#m2 .m2-go::after { content: ''; position: absolute; inset: calc(9 * var(--u)); background: rgba(255, 255, 255, .16); opacity: 0; transition: opacity .15s; pointer-events: none;
  clip-path: polygon(calc(30 * var(--u)) 0, calc(100% - 30 * var(--u)) 0, 100% calc(30 * var(--u)), 100% calc(100% - 30 * var(--u)), calc(100% - 30 * var(--u)) 100%, calc(30 * var(--u)) 100%, 0 calc(100% - 30 * var(--u)), 0 calc(30 * var(--u))); }
#m2 .m2-go:hover::after { opacity: 1; }
#m2 .m2-go:active { transform: translateY(calc(3 * var(--u))); }
#m2 .m2-go b { --sw: 4; --sc: #0b1a04; font-size: calc(var(--fgo) * var(--u) * var(--k, 1)); text-transform: uppercase; line-height: 1.1; text-shadow: 0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .45); }
#m2 .m2-go small { --sw: 2; --sc: #0b1a04; font-size: calc(var(--fgos) * var(--u) * var(--k, 1)); font-weight: 700; color: #e9ffd8; }
#m2 .m2-quit { display: flex; align-items: center; justify-content: center; border-radius: calc(12 * var(--u)); background: rgba(0, 0, 0, .6); color: #e7c9b5;
  font-size: calc(22 * var(--u)); font-weight: 600; white-space: nowrap; }
#m2 .m2-quit:hover { background: rgba(60, 10, 5, .75); color: #fff; }

/* ===== Договор v2 (Figma «Договор v2 / P» 214:6332) и «Ещё сундук?» v2 (214:7219).
   Блоки #p2 / #n2 внутри #cards, классы pact2 / more2 (game.js renderP2 / renderN2). Рамки — 9-slice из assets/ui/pact2 (поля 24 px под тень) ===== */
html body #cards#cards.pact2, html body #cards#cards.more2 { padding: 0 !important; display: block !important; }
html body #cards#cards.pact2 { background: #0b1110 !important; }
html body #cards#cards.more2 { background: rgba(3, 6, 6, .62) !important; }
html body #cards#cards.pact2 > :not(#p2), html body #cards#cards.more2 > :not(#n2) { display: none !important; }
#cards :is(.p2, .n2)[hidden], #cards :is(.p2, .n2) [hidden] { display: none !important; }
#cards :is(.p2, .n2), #cards :is(.p2, .n2) * { font-family: 'Rubik', 'Nunito', sans-serif !important; box-sizing: border-box; }
#cards :is(.p2, .n2) :where(button) { font: inherit; color: inherit; border: 0; padding: 0; margin: 0; background: none; box-shadow: none; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
#cards :is(.p2, .n2) img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
#cards :is(.p2-title, .p2-name, .p2-leave b, .n2-head b, .n2-gold b, .n2-open b, .n2-later b) {
  -webkit-text-stroke: calc(var(--sw, 3) * var(--pu, var(--nu))) var(--sc, #030606); paint-order: stroke fill; text-shadow: 0 calc(3 * var(--pu, var(--nu))) 0 rgba(0, 0, 0, .9); }

/* --- договор --- */
#cards .p2 {
  --pu: min(calc(100vw / 864), calc(var(--modal-h) / 1821));
  --p2y: calc(var(--sa-top, 0px) + max(0px, (var(--modal-h) - 1821 * var(--pu)) / 2));
  position: absolute; inset: 0; overflow: hidden auto; display: flex; flex-direction: column; align-items: center;
  padding-top: calc(var(--p2y) + 512 * var(--pu)); padding-bottom: calc(24 * var(--pu) + var(--sa-bottom, 0px)); color: #fdf1d0; font-weight: 800; line-height: 1.18; }
#cards .p2-scene { position: absolute; left: 50%; top: calc(var(--p2y) - 40 * var(--pu)); width: calc(864 * var(--pu)); height: calc(1286 * var(--pu)); translate: -50% 0;
  object-fit: cover; object-position: 50% 0; -webkit-mask-image: linear-gradient(#000 52%, transparent 72%); mask-image: linear-gradient(#000 52%, transparent 72%); }
#cards .p2-say { position: absolute; left: calc(50% + 98 * var(--pu)); top: calc(var(--p2y) + 128 * var(--pu)); width: calc(300 * var(--pu)); min-height: calc(132 * var(--pu));
  display: flex; align-items: center; padding: calc(16 * var(--pu)) calc(22 * var(--pu)); border-radius: calc(18 * var(--pu)); background: rgba(14, 21, 20, .94);
  border: calc(2.5 * var(--pu)) solid #d9c79a; box-shadow: 0 calc(6 * var(--pu)) calc(12 * var(--pu)) rgba(0, 0, 0, .6); font-size: calc(25 * var(--pu)); font-weight: 600; color: #f3ecd6; line-height: 1.25; }
#cards .p2-say::after { content: ''; position: absolute; left: calc(26 * var(--pu)); bottom: calc(-34 * var(--pu)); width: calc(34 * var(--pu)); height: calc(34 * var(--pu));
  background: rgba(14, 21, 20, .94); clip-path: polygon(0 0, 100% 0, 18% 100%); border-left: calc(2.5 * var(--pu)) solid #d9c79a; }
#cards .p2-say:empty { display: none; }
#cards .p2-win { position: relative; flex: none; width: calc(828 * var(--pu)); min-height: calc(1084 * var(--pu)); padding: calc(26 * var(--pu)) calc(20 * var(--pu)) calc(22 * var(--pu));
  display: flex; flex-direction: column; align-items: center;
  --bi: url(assets/ui/pact2/panel.webp); --bs: 88; --bw: calc(88 * var(--pu)); --bo: calc(24 * var(--pu)); }
#cards .p2-title { --sw: 4; display: flex; align-items: center; gap: calc(28 * var(--pu)); font-size: calc(66 * var(--pu)); text-transform: uppercase; line-height: 1.08; }
#cards .p2-title i { width: calc(18 * var(--pu)); height: calc(18 * var(--pu)); rotate: 45deg; background: linear-gradient(135deg, #ffe08a, #b07a1c); border: calc(2 * var(--pu)) solid #2a1a04; }
#cards .p2-sub { margin-top: calc(8 * var(--pu)); font-size: calc(28 * var(--pu)); font-weight: 600; color: #e3dcc6; }
#cards .p2-list { display: flex; flex-direction: column; gap: calc(28 * var(--pu)); margin-top: calc(28 * var(--pu)); }   /* «воздушнее» (просьба автора): пустое место окна ушло в отступы карточек */
#cards .p2-card { --acc: #d4a23c; --tag: #f0b84a; --s1: #332a15; --frame: url(assets/ui/pact2/card-deal.webp);
  position: relative; width: calc(788 * var(--pu)); min-height: calc(250 * var(--pu)); display: flex; align-items: stretch; gap: calc(32 * var(--pu));
  padding: calc(40 * var(--pu)) calc(36 * var(--pu)) calc(38 * var(--pu)) calc(30 * var(--pu)); transition: transform .12s, filter .15s;
  --bi: var(--frame); --bs: 60; --bw: calc(60 * var(--pu)); --bo: calc(24 * var(--pu)); }
#cards .p2-card.gift { --acc: #45b64a; --tag: #7fe07a; --s1: #173a22; --frame: url(assets/ui/pact2/card-gift.webp); }
#cards .p2-card.vow { --acc: #e0476e; --tag: #ff7d98; --s1: #3a1520; --frame: url(assets/ui/pact2/card-vow.webp); }
#cards .p2-card:hover { filter: brightness(1.08); }
#cards .p2-card:active { transform: scale(.985); }
#cards .p2-card.holding::after { content: ''; position: absolute; inset: calc(10 * var(--pu)); border-radius: calc(8 * var(--pu)); background: rgba(255, 240, 200, .14);
  transform-origin: 0 50%; animation: p2-hold var(--hold, .5s) linear both; pointer-events: none; }
@keyframes p2-hold { from { transform: scaleX(0); } to { transform: scaleX(1); } }
#cards .p2-slot { flex: none; width: calc(160 * var(--pu)); min-height: calc(168 * var(--pu)); align-self: center; display: flex; align-items: center; justify-content: center; overflow: hidden;
  border: calc(5 * var(--pu)) solid var(--acc); border-radius: calc(18 * var(--pu)); background: linear-gradient(var(--s1), #050806);
  box-shadow: inset 0 calc(4 * var(--pu)) calc(10 * var(--pu)) rgba(0, 0, 0, .7); }
#cards .p2-slot img { width: 62%; image-rendering: pixelated; filter: drop-shadow(0 calc(4 * var(--pu)) calc(4 * var(--pu)) rgba(0, 0, 0, .6)); }
#cards .p2-card.art .p2-slot img { width: 88%; image-rendering: auto; }
#cards .p2-card.art.deal .p2-slot img { width: 132%; height: 132%; object-fit: cover; filter: none; }   /* рой: у картинки своя рамка — уходит за край ячейки */
#cards .p2-text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
#cards .p2-tag { position: absolute; top: calc(30 * var(--pu)); right: calc(34 * var(--pu)); height: calc(36 * var(--pu)); padding: 0 calc(18 * var(--pu)); display: flex; align-items: center;
  border-radius: calc(18 * var(--pu)); background: var(--tag); border: calc(2.5 * var(--pu)) solid #0a0606; color: #14100a; font-size: calc(21 * var(--pu)); font-style: normal; font-weight: 800; text-transform: uppercase; }
#cards .p2-card .p2-name { --sw: 3; padding-right: calc(150 * var(--pu)); font-size: calc(46 * var(--pu)); color: #ffcf4a; line-height: 1.1; }
#cards .p2-plus, #cards .p2-cost { margin-top: calc(20 * var(--pu)); font-size: calc(28 * var(--pu)); line-height: 1.3; font-weight: 500; color: #e8e4d4; text-shadow: 0 calc(2 * var(--pu)) 0 rgba(0, 0, 0, .8); }
#cards .p2-cost { margin-top: calc(10 * var(--pu)); color: #ff7b8c; }
#cards .p2-card :is(.minus) { color: #ff7b8c; }
#cards :is(.p2-plus, .p2-cost) b { font-weight: 700; color: #62d4ff; }
#cards .p2-cost b { color: inherit; }
#cards .p2-card :is(.plus, .num, em) { color: #62d4ff; font-style: normal; }
#cards .p2-term { display: inline-flex; align-items: center; gap: calc(8 * var(--pu)); margin-top: calc(22 * var(--pu)); height: calc(44 * var(--pu)); padding: 0 calc(18 * var(--pu)) 0 calc(10 * var(--pu));
  border-radius: calc(12 * var(--pu)); background: rgba(15, 26, 26, .9); border: calc(2 * var(--pu)) solid #3d5853; font-size: calc(23 * var(--pu)); font-weight: 500; color: #c9d6d0; }
#cards .p2-term img { width: calc(28 * var(--pu)); height: calc(32 * var(--pu)); object-fit: contain; }
#cards .p2-leave { flex: none; margin-top: calc(44 * var(--pu)); width: calc(788 * var(--pu)); height: calc(150 * var(--pu)); display: flex; align-items: center; padding-left: calc(60 * var(--pu));
  --bi: url(assets/ui/pact2/slab.webp); --bs: 60; --bw: calc(60 * var(--pu)); --bo: calc(24 * var(--pu)); transition: filter .15s, transform .1s; }
#cards .p2-leave:hover { filter: brightness(1.15); }
#cards .p2-leave:active { transform: scale(.985); }
#cards .p2-leave img { width: calc(112 * var(--pu)); height: calc(110 * var(--pu)); object-fit: contain; }
#cards .p2-leave span { display: flex; flex-direction: column; gap: calc(6 * var(--pu)); margin-left: calc(66 * var(--pu)); }
#cards .p2-leave b { font-size: calc(42 * var(--pu)); text-transform: uppercase; }
#cards .p2-leave small { font-size: calc(28 * var(--pu)); font-weight: 500; color: #c9cbbf; }
/* высокий экран (iPhone): --pu берётся по высоте и макет уже экрана — сцена тянется на всю ширину, окно, карточки и кнопка
   (рамки 9-slice) — почти до краёв, иначе по бокам видна тёмная подложка */
@media (orientation: portrait) {
  #cards .p2-scene { width: max(calc(864 * var(--pu)), 100vw); }
  #cards .p2-win { width: max(calc(828 * var(--pu)), calc(100vw - 36 * var(--pu))); }
  #cards .p2-list { align-self: stretch; }
  #cards .p2-card { width: auto; }
  #cards .p2-leave { width: max(calc(788 * var(--pu)), calc(100vw - 76 * var(--pu))); }
}

/* --- «Ещё сундук?» --- */
#cards .n2 { --nu: min(calc(100vw / 700), calc(var(--modal-h) / 960)); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: var(--sa-top, 0px) 0 var(--sa-bottom, 0px); color: #fdf1d0; font-weight: 800; line-height: 1.18; }
#cards .n2-win { position: relative; width: calc(608 * var(--nu)); padding-top: calc(50 * var(--nu)); }
#cards .n2-head { position: absolute; z-index: 2; left: calc(36 * var(--nu)); top: 0; width: calc(536 * var(--nu)); height: calc(100 * var(--nu)); display: flex; align-items: center;
  --bi: url(assets/ui/pact2/slab.webp); --bs: 60; --bw: calc(40 * var(--nu)); --bo: calc(16 * var(--nu)); filter: drop-shadow(0 calc(6 * var(--nu)) calc(8 * var(--nu)) rgba(0, 0, 0, .6)); }
#cards .n2-head img { position: absolute; left: calc(20 * var(--nu)); top: calc(7 * var(--nu)); width: calc(108 * var(--nu)); height: calc(86 * var(--nu)); object-fit: contain; }
#cards .n2-head b { flex: 1; padding-left: calc(130 * var(--nu)); text-align: center; font-size: calc(52 * var(--nu)); white-space: nowrap; }
#cards .n2-body { position: relative; display: flex; flex-direction: column; align-items: center; padding: calc(62 * var(--nu)) calc(36 * var(--nu)) calc(26 * var(--nu));
  --bi: url(assets/ui/pact2/panel.webp); --bs: 88; --bw: calc(88 * var(--nu)); --bo: calc(24 * var(--nu)); }
#cards .n2-gold { width: calc(536 * var(--nu)); height: calc(98 * var(--nu)); display: flex; align-items: center; padding: 0 calc(40 * var(--nu)) 0 calc(70 * var(--nu)); gap: calc(12 * var(--nu));
  background: linear-gradient(rgba(18, 22, 20, .92), rgba(10, 13, 12, .92)); box-shadow: inset 0 0 0 calc(1.5 * var(--nu)) rgba(140, 128, 107, .28), inset 0 calc(2 * var(--nu)) calc(6 * var(--nu)) rgba(0, 0, 0, .5);
  clip-path: polygon(calc(12 * var(--nu)) 0, calc(100% - 12 * var(--nu)) 0, 100% calc(12 * var(--nu)), 100% calc(100% - 12 * var(--nu)), calc(100% - 12 * var(--nu)) 100%, calc(12 * var(--nu)) 100%, 0 calc(100% - 12 * var(--nu)), 0 calc(12 * var(--nu))); }
#cards .n2-gold span { flex: 1; font-size: calc(26 * var(--nu)); font-weight: 600; color: #dcd5c0; }
#cards .n2-gold img { width: calc(54 * var(--nu)); height: calc(56 * var(--nu)); }
#cards .n2-gold b { font-size: calc(50 * var(--nu)); }
#cards .n2-chest { position: relative; width: calc(285 * var(--nu)); height: calc(275 * var(--nu)); margin: calc(14 * var(--nu)) 0 calc(6 * var(--nu)); }
#cards .n2-chest img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 calc(10 * var(--nu)) calc(16 * var(--nu)) rgba(0, 0, 0, .55)); }
#cards .n2-glow { position: absolute; left: -24%; top: 4%; width: 148%; height: 92%; border-radius: 50%; background: radial-gradient(closest-side, rgba(215, 240, 80, .5), rgba(215, 240, 80, 0)); animation: n2-glow 2.8s ease-in-out infinite; }
@keyframes n2-glow { 50% { opacity: .65; transform: scale(.94); } }
#cards .n2-open, #cards .n2-later { width: calc(504 * var(--nu)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: filter .15s, transform .1s; }
#cards .n2-open { height: calc(120 * var(--nu)); gap: calc(4 * var(--nu)); --bi: url(assets/ui/pact2/green.webp); --bs: 56; --bw: calc(56 * var(--nu)); --bo: calc(24 * var(--nu)); }
#cards .n2-open b { --sc: #0b1a04; display: flex; align-items: center; gap: calc(10 * var(--nu)); font-size: calc(40 * var(--nu)); text-transform: uppercase; }
#cards .n2-open b img { width: calc(44 * var(--nu)); height: calc(44 * var(--nu)); }
#cards .n2-open small { display: flex; align-items: center; gap: calc(4 * var(--nu)); font-size: calc(22 * var(--nu)); font-weight: 600; color: #d9f2c6; text-shadow: 0 calc(2 * var(--nu)) 0 rgba(0, 0, 0, .6); }
#cards .n2-open small:empty { display: none; }
#cards .n2-open small img { width: calc(24 * var(--nu)); height: calc(24 * var(--nu)); }
#cards .n2-open.poor { filter: grayscale(.7) brightness(.75); }
#cards .n2-all { margin-top: calc(12 * var(--nu)); padding: calc(8 * var(--nu)) calc(22 * var(--nu)); border-radius: calc(14 * var(--nu)); background: rgba(70, 140, 40, .25); border: calc(2 * var(--nu)) solid rgba(140, 220, 90, .45);
  color: #d9f2c6; font-size: calc(24 * var(--nu)); font-weight: 700; }
#cards .n2-later { height: calc(104 * var(--nu)); margin-top: calc(22 * var(--nu)); --bi: url(assets/ui/pact2/slab.webp); --bs: 60; --bw: calc(48 * var(--nu)); --bo: calc(20 * var(--nu)); }
#cards .n2-later b { font-size: calc(38 * var(--nu)); text-transform: uppercase; }
#cards :is(.n2-open, .n2-later):hover { filter: brightness(1.12); }
#cards .n2-open.poor:hover { filter: grayscale(.7) brightness(.8); }
#cards :is(.n2-open, .n2-later):active { transform: scale(.98); }
#cards .n2-hint { margin-top: calc(22 * var(--nu)); font-size: calc(24 * var(--nu)); font-weight: 500; color: #b9b5a5; text-align: center; }

/* общая 9-slice рамка: картинка с полями под тень рисуется в ::before за содержимым */
#cards :where(.p2-win, .p2-card, .p2-leave, .n2-head, .n2-body, .n2-open, .n2-later) { position: relative; isolation: isolate; }   /* :where — не перебивает position: absolute шапки */
#cards :is(.p2-win, .p2-card, .p2-leave, .n2-head, .n2-body, .n2-open, .n2-later)::before { content: ''; position: absolute; z-index: -1; inset: calc(-1 * var(--bo)); pointer-events: none;
  border: solid transparent; border-width: var(--bw); border-image: var(--bi) var(--bs) fill / var(--bw) stretch; }
/* «Ещё сундук?»: сундук сияет — зелёное свечение, золотая аура, вращающиеся лучи и искры */
#cards .n2-rays { position: absolute; left: -30%; top: -26%; width: 160%; height: 150%; border-radius: 50%; pointer-events: none; opacity: .9;
  background: conic-gradient(from 0deg, rgba(255, 205, 80, 0) 0 8%, rgba(255, 205, 80, .55) 12%, rgba(255, 205, 80, 0) 17%, rgba(140, 255, 90, .45) 30%, rgba(140, 255, 90, 0) 36%,
    rgba(255, 205, 80, .5) 52%, rgba(255, 205, 80, 0) 58%, rgba(140, 255, 90, .4) 72%, rgba(140, 255, 90, 0) 78%, rgba(255, 205, 80, .5) 90%, rgba(255, 205, 80, 0) 95%);
  -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 100%); mask-image: radial-gradient(closest-side, #000 25%, transparent 100%); animation: n2-spin 14s linear infinite; }
#cards .n2-aura { position: absolute; left: -22%; top: -6%; width: 144%; height: 108%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 205, 80, .85), rgba(255, 170, 40, .35) 50%, rgba(255, 170, 40, 0)); animation: n2-aura 3.4s ease-in-out infinite; }
#cards .n2-sparks { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
#cards .n2-sparks i { position: absolute; left: var(--x); top: var(--y); width: calc(22 * var(--nu)); height: calc(22 * var(--nu)); translate: -50% -50%;
  background: radial-gradient(closest-side, #fff8d0, rgba(255, 220, 120, .8) 40%, rgba(255, 220, 120, 0)); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: n2-spark 2.4s ease-in-out var(--d) infinite both; }
#cards .n2-sparks i:nth-child(even) { background: radial-gradient(closest-side, #f0ffd8, rgba(150, 255, 100, .8) 40%, rgba(150, 255, 100, 0)); }
@keyframes n2-spin { to { rotate: 360deg; } }
@keyframes n2-aura { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes n2-spark { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 45% { opacity: 1; transform: scale(1.4) rotate(45deg); } 70% { opacity: 0; } }

/* ===== Заставка загрузки (index.html #boot): фон, логотип, полоса и «Загрузка…» ===== */
#boot { position: fixed; inset: 0; z-index: 9999; overflow: hidden; background: #0b1110; transition: opacity .5s ease; font-family: 'Rubik', 'Nunito', sans-serif; }
#boot.out { opacity: 0; pointer-events: none; }
html.rot-host #boot { display: none; }
#boot .boot-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
#boot::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 28%; background: linear-gradient(rgba(5, 8, 8, 0), rgba(5, 8, 8, .75) 60%, rgba(5, 8, 8, .92)); pointer-events: none; }
#boot .boot-logo { position: absolute; z-index: 1; left: 50%; top: calc(var(--sa-top, 0px) + 2.5vh); width: min(68vw, 34vh); translate: -50% 0;
  filter: drop-shadow(0 1.2vh 1.6vh rgba(0, 0, 0, .7)); animation: boot-logo 3.2s ease-in-out infinite; transform-origin: 50% 80%; }
@media (orientation: landscape) { #boot .boot-logo { top: calc(var(--sa-top, 0px) + 2vh); width: min(34vw, 44vh); } #boot .boot-bg { object-position: 50% 60%; } }
@keyframes boot-logo { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-0.6vh) scale(1.015); } }
#boot .boot-bar { position: absolute; z-index: 2; left: 50%; bottom: calc(var(--sa-bottom, 0px) + 11vh); width: min(84vw, 640px); height: clamp(24px, 4vh, 40px); translate: -50% 0;
  padding: clamp(3px, .5vh, 5px); border-radius: clamp(8px, 1.2vh, 12px); background: linear-gradient(#141816, #070908);
  border: clamp(2px, .35vh, 3px) solid #8a6a2e; box-shadow: 0 0 0 clamp(2px, .3vh, 3px) #1a1208, 0 .8vh 1.6vh rgba(0, 0, 0, .7), inset 0 .4vh .8vh rgba(0, 0, 0, .8); }
#boot .boot-bar::before, #boot .boot-bar::after { content: ''; position: absolute; top: 50%; width: clamp(14px, 2.2vh, 22px); height: clamp(14px, 2.2vh, 22px); translate: 0 -50%; rotate: 45deg;
  background: linear-gradient(135deg, #ffe08a, #9a6a1a); border: clamp(2px, .3vh, 3px) solid #2a1a04; box-shadow: inset 0 0 0 clamp(2px, .35vh, 4px) #5a3c10; }
#boot .boot-bar::before { left: clamp(-13px, -1.3vh, -9px); }
#boot .boot-bar::after { right: clamp(-13px, -1.3vh, -9px); }
#boot .boot-fill { position: relative; display: block; width: 0; height: 100%; border-radius: clamp(5px, .8vh, 8px); overflow: hidden;
  background: linear-gradient(#d4ff7a, #7fdc34 50%, #3f9c18); box-shadow: 0 0 1.2vh rgba(140, 255, 80, .55); }
#boot .boot-fill::after { content: ''; position: absolute; left: 4%; right: 4%; top: 12%; height: 30%; border-radius: 999px; background: rgba(255, 255, 255, .45); }
#boot .boot-fill::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 45%, transparent 60%); background-size: 220% 100%; animation: boot-shine 1.6s linear infinite; }
@keyframes boot-shine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
#boot .boot-text { position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(var(--sa-bottom, 0px) + 4.5vh); text-align: center; color: #fdf1d0; font-weight: 800; font-size: clamp(18px, 3vh, 30px);
  -webkit-text-stroke: clamp(2px, .3vh, 3px) #030606; paint-order: stroke fill; text-shadow: 0 .3vh 0 rgba(0, 0, 0, .9); }
#boot .boot-text span { animation: boot-dot 1.2s ease-in-out infinite; }
#boot .boot-text span:nth-child(2) { animation-delay: .2s; }
#boot .boot-text span:nth-child(3) { animation-delay: .4s; }
@keyframes boot-dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* Панель «Звуки на слух» (audio.js, кнопка 🎚 у звука в настройках или ?sfx): выбор основного/запасного файла для каждого события */
.sfx-pick-open { margin-left: 6px; }
#sfx-picker { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .6); padding: 12px; }
#sfx-picker[hidden] { display: none; }
#sfx-picker .sfxp-box { background: #1b1426; color: #f4ead6; border: 2px solid #6b4f8f; border-radius: 12px; width: min(560px, 100%); max-height: 100%; display: flex; flex-direction: column; padding: 10px 12px; font: 14px/1.3 system-ui, sans-serif; }
#sfx-picker .sfxp-head { display: flex; justify-content: space-between; align-items: center; font-size: 16px; }
#sfx-picker .sfxp-note, #sfx-picker .sfxp-sum { margin: 4px 0; font-size: 12px; opacity: .75; word-break: break-word; }
#sfx-picker .sfxp-list { overflow-y: auto; flex: 1; min-height: 0; }
#sfx-picker .sfxp-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
#sfx-picker .sfxp-row span { flex: 1; }
#sfx-picker .sfxp-row i { display: block; font-style: normal; font-size: 11px; opacity: .5; }
#sfx-picker button { background: #2e2340; color: inherit; border: 1px solid #6b4f8f; border-radius: 8px; padding: 6px 10px; min-width: 40px; font: inherit; cursor: pointer; }
#sfx-picker button.on { background: #7dd35a; color: #10200a; border-color: #b8ff8f; font-weight: 700; }
#sfx-picker .sfxp-foot { display: flex; gap: 8px; justify-content: flex-end; }

/* ===== «Эволюции» v2 (Figma «Эволюции (коллекция) v2»: портрет 236:6855, широкий 236:7412) — экран #forms при HUD v2.
   Шапка и окно — пиксели макета × --fu; рамки — 9-slice slab/panel из assets/ui/pact2; карточки, ветки и фильтр — CSS ===== */
html body #forms.fv2-on:not([hidden]) { display: block !important; padding: 0 !important; overflow: hidden !important; background: #0b1110 !important; }
html body #forms.fv2-on > :not(#fv2) { display: none !important; }
#forms #fv2[hidden], #forms .fv2 [hidden] { display: none !important; }
#forms .fv2 { position: absolute; inset: 0; overflow: hidden; color: #fdf1d0; font-weight: 800; line-height: 1.15;
  background: linear-gradient(rgba(5, 8, 8, .25), rgba(5, 8, 8, .35) 50%, rgba(5, 8, 8, .6)), url(assets/ui/forms2/bg-p.webp) center / cover no-repeat;
  --fu: min(calc(100vw / 911), calc(var(--modal-h) / 1727)); --W: 911; --H: 1727; }
@media (orientation: landscape) { #forms .fv2 { --fu: min(calc(100vw / 1672), calc(var(--modal-h) / 941)); --W: 1672; --H: 941;
  background-image: linear-gradient(rgba(5, 8, 8, .25), rgba(5, 8, 8, .35) 50%, rgba(5, 8, 8, .6)), url(assets/ui/forms2/bg-d.webp); } }
#forms .fv2, #forms .fv2 * { font-family: 'Rubik', 'Nunito', sans-serif !important; box-sizing: border-box; }
#forms .fv2 :where(button) { font: inherit; color: inherit; border: 0; padding: 0; margin: 0; background: none; box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#forms .fv2 img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
#forms .fv2-stage { position: absolute; left: 50%; top: calc(var(--sa-top, 0px) + max(0px, (var(--modal-h) - var(--H) * var(--fu)) / 2)); width: calc(var(--W) * var(--fu)); height: calc(var(--H) * var(--fu)); translate: -50% 0; }
#forms .fv2-stage > * { position: absolute; }
/* 9-slice рамки в ::before (поля под тень — наружу) */
#forms :where(.fv2-back, .fv2-title, .fv2-count, .fv2-win) { isolation: isolate; }
#forms :is(.fv2-back, .fv2-title, .fv2-count)::before, #forms .fv2-win::before { content: ''; position: absolute; z-index: -1; pointer-events: none; border: solid transparent; }
#forms :is(.fv2-back, .fv2-title, .fv2-count)::before { inset: calc(-16 * var(--fu)); border-width: calc(40 * var(--fu)); border-image: url(assets/ui/pact2/slab.webp) 60 fill / calc(40 * var(--fu)) stretch; }
#forms .fv2-win::before { inset: calc(-24 * var(--fu)); border-width: calc(88 * var(--fu)); border-image: url(assets/ui/pact2/panel.webp) 88 fill / calc(88 * var(--fu)) stretch; }
/* обводка текста */
#forms .fv2 :is(.fv2-title b, .fv2-coll, .fv2-count b, .fv2-cell b, .fv2-q) { -webkit-text-stroke: calc(var(--sw, 3) * var(--fu)) #030606; paint-order: stroke fill; text-shadow: 0 calc(3 * var(--fu)) 0 rgba(0, 0, 0, .9); }
/* ромбы у заголовков */
#forms .fv2 :is(.fv2-title, .fv2-coll) i { flex: none; width: calc(20 * var(--fu)); height: calc(20 * var(--fu)); rotate: 45deg; background: linear-gradient(135deg, #ffe08a, #b07a1c); border: calc(2.5 * var(--fu)) solid #2a1a04; }
/* --- шапка (портрет) --- */
#forms .fv2-back { left: calc(62 * var(--fu)); top: calc(70 * var(--fu)); width: calc(98 * var(--fu)); height: calc(98 * var(--fu)); display: flex; align-items: center; justify-content: center; transition: filter .15s, transform .1s; }
#forms .fv2-back i { width: 55%; height: 55%; background: linear-gradient(#ffd27a, #f08a1c); clip-path: polygon(0 50%, 46% 8%, 46% 32%, 100% 32%, 100% 68%, 46% 68%, 46% 92%); filter: drop-shadow(0 calc(3 * var(--fu)) 0 #2a1204); }
#forms .fv2-back:hover { filter: brightness(1.15); }
#forms .fv2-back:active { transform: scale(.95); }
#forms .fv2-title { left: calc(222 * var(--fu)); top: calc(70 * var(--fu)); width: calc(458 * var(--fu)); height: calc(98 * var(--fu)); display: flex; align-items: center; justify-content: center; gap: calc(18 * var(--fu)); }
#forms .fv2-title b { --sw: 4; font-size: calc(50 * var(--fu)); text-transform: uppercase; white-space: nowrap; }
#forms .fv2-sub { left: 0; right: 0; top: calc(180 * var(--fu)); text-align: center; font-size: calc(22 * var(--fu)); font-weight: 600; color: #ece2c8; text-shadow: 0 calc(2 * var(--fu)) 0 rgba(0, 0, 0, .9); }
#forms .fv2-count { left: calc(718 * var(--fu)); top: calc(70 * var(--fu)); width: calc(150 * var(--fu)); height: calc(98 * var(--fu)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(4 * var(--fu)); }
#forms .fv2-count small { font-size: calc(20 * var(--fu)); font-weight: 600; color: #e8e4d4; }
#forms .fv2-count b { --sw: 2.5; font-size: calc(30 * var(--fu)); white-space: nowrap; }
#forms .fv2-count em { font-style: normal; color: #ffcf4a; }
/* --- окно --- */
#forms .fv2-win { left: calc(52 * var(--fu)); top: calc(222 * var(--fu)); width: calc(808 * var(--fu)); height: calc(1458 * var(--fu)); display: flex; flex-direction: column; padding: calc(28 * var(--fu)) calc(28 * var(--fu)) calc(26 * var(--fu)); }
#forms .fv2-head { display: flex; flex-direction: column; gap: calc(22 * var(--fu)); }
#forms .fv2-coll { --sw: 4; display: flex; align-items: center; gap: calc(22 * var(--fu)); padding-left: calc(36 * var(--fu)); font-size: calc(56 * var(--fu)); text-transform: uppercase; }
#forms .fv2-tog { display: flex; height: calc(68 * var(--fu)); margin: 0 calc(12 * var(--fu)); padding: calc(6 * var(--fu)); border-radius: calc(34 * var(--fu)); background: #07100e; border: calc(3 * var(--fu)) solid #2e554d; }
#forms .fv2-tog button { flex: 1; border-radius: calc(28 * var(--fu)); font-size: calc(27 * var(--fu)); font-weight: 700; color: #f3ecd6; text-shadow: 0 calc(2 * var(--fu)) 0 rgba(0, 0, 0, .8); transition: background .15s; }
#forms .fv2-tog button.on { background: linear-gradient(#b6ff5a, #76d82c 50%, #3f9a16); color: #0b1a04; text-shadow: none; box-shadow: 0 0 calc(10 * var(--fu)) rgba(143, 224, 58, .45); }
#forms .fv2-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-top: calc(20 * var(--fu)); padding: calc(2 * var(--fu)) calc(2 * var(--fu)) calc(4 * var(--fu)); display: flex; flex-direction: column; gap: calc(10 * var(--fu));
  scrollbar-width: thin; scrollbar-color: rgba(201, 160, 80, .5) transparent; }
#forms .fv2-row { width: 100%; height: calc(68 * var(--fu)); flex: none; display: flex; align-items: center; gap: calc(16 * var(--fu)); padding: 0 calc(24 * var(--fu)); border-radius: calc(18 * var(--fu));
  background: linear-gradient(#15332f, #0b1c1a); border: calc(3.5 * var(--fu)) solid #d9a53a; box-shadow: 0 calc(4 * var(--fu)) calc(8 * var(--fu)) rgba(0, 0, 0, .55); text-align: left; }
#forms .fv2-row img { width: calc(70 * var(--fu)); height: calc(60 * var(--fu)); object-fit: contain; }
#forms .fv2-row b { flex: 1; font-size: calc(28 * var(--fu)); font-weight: 700; text-shadow: 0 calc(2 * var(--fu)) 0 rgba(0, 0, 0, .9); }
#forms .fv2-n { font-size: calc(28 * var(--fu)); font-weight: 700; color: #e8e4d4; }
#forms .fv2-n.has { color: #ffcf4a; }
#forms .fv2-chev { width: calc(16 * var(--fu)); height: calc(16 * var(--fu)); margin: 0 calc(6 * var(--fu)) calc(6 * var(--fu)) calc(14 * var(--fu)); border: solid #f3ecd6; border-width: 0 calc(4 * var(--fu)) calc(4 * var(--fu)) 0; rotate: 45deg; transition: rotate .2s; }
#forms .fv2-grp.open .fv2-chev { rotate: -135deg; margin-bottom: calc(-6 * var(--fu)); }
#forms .fv2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(17 * var(--fu)); padding: calc(14 * var(--fu)) calc(8 * var(--fu)) calc(6 * var(--fu)); }
#forms .fv2-cell { position: relative; height: calc(176 * var(--fu)); border-radius: calc(16 * var(--fu)); display: flex; align-items: center; justify-content: center; overflow: visible;
  background: linear-gradient(#12302d, #0a1918); border: calc(2.5 * var(--fu)) solid rgba(201, 160, 80, .6); box-shadow: 0 calc(3 * var(--fu)) calc(6 * var(--fu)) rgba(0, 0, 0, .5); transition: transform .1s, filter .15s; }
#forms .fv2-cell:hover { filter: brightness(1.12); }
#forms .fv2-cell:active { transform: scale(.97); }
#forms .fv2-cell img { width: 72%; height: 72%; object-fit: contain; }
#forms .fv2-cell.off img { filter: brightness(0) opacity(.92); }
#forms .fv2-cell.on { background: linear-gradient(#1e4a22, #0f2412); border: calc(4 * var(--fu)) solid #8fe03a; box-shadow: 0 0 calc(14 * var(--fu)) rgba(143, 224, 58, .5); }
#forms .fv2-cell.on img { position: absolute; top: 6%; height: 62%; filter: drop-shadow(0 calc(5 * var(--fu)) calc(5 * var(--fu)) rgba(0, 0, 0, .5)); }
#forms .fv2-cell b { --sw: 2.5; position: absolute; left: 4%; right: 4%; bottom: 7%; text-align: center; font-size: calc(23 * var(--fu)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#forms .fv2-q { --sw: 3; position: absolute; font-style: normal; font-size: calc(52 * var(--fu)); color: #cfcac0; }
#forms .fv2-lock { position: absolute; right: calc(10 * var(--fu)); bottom: calc(8 * var(--fu)); width: 30%; height: 30%; background: url(assets/ui/chest2/lock.png) center / contain no-repeat; }
#forms .fv2-ok { position: absolute; right: calc(-10 * var(--fu)); top: calc(-10 * var(--fu)); width: calc(46 * var(--fu)); height: calc(46 * var(--fu)); border-radius: 50%;
  background: linear-gradient(#5fd43a, #2a8a18); border: calc(3 * var(--fu)) solid #0b1a04; }
#forms .fv2-ok::after { content: ''; position: absolute; left: 30%; top: 16%; width: 24%; height: 46%; border: solid #fff; border-width: 0 calc(5 * var(--fu)) calc(5 * var(--fu)) 0; rotate: 45deg; }
#forms .fv2-empty { grid-column: 1 / -1; margin: 0; padding: calc(16 * var(--fu)); text-align: center; font-size: calc(24 * var(--fu)); font-weight: 600; color: #b9b5a5; }
/* --- широкий экран (ландшафт телефона и ПК): шапка по центру, фильтр справа от «Коллекции», 8 карточек в ряд --- */
@media (orientation: landscape) {
  #forms .fv2-back { left: calc(72 * var(--fu)); top: calc(36 * var(--fu)); width: calc(96 * var(--fu)); height: calc(96 * var(--fu)); }
  #forms .fv2-title { left: calc(585 * var(--fu)); top: calc(36 * var(--fu)); width: calc(503 * var(--fu)); height: calc(96 * var(--fu)); }
  #forms .fv2-title b { font-size: calc(56 * var(--fu)); }
  #forms .fv2-sub { top: calc(146 * var(--fu)); }
  #forms .fv2-count { left: calc(1458 * var(--fu)); top: calc(36 * var(--fu)); width: calc(144 * var(--fu)); height: calc(96 * var(--fu)); }
  #forms .fv2-win { left: calc(48 * var(--fu)); top: calc(175 * var(--fu)); width: calc(1578 * var(--fu)); height: calc(713 * var(--fu)); padding: calc(26 * var(--fu)) calc(28 * var(--fu)) calc(24 * var(--fu)); }
  #forms .fv2-head { flex-direction: row; align-items: center; justify-content: space-between; }
  #forms .fv2-tog { width: calc(470 * var(--fu)); height: calc(54 * var(--fu)); margin: 0 calc(8 * var(--fu)) 0 0; padding: calc(5 * var(--fu)); }
  #forms .fv2-tog button { font-size: calc(22 * var(--fu)); }
  #forms .fv2-list { margin-top: calc(16 * var(--fu)); }
  #forms .fv2-row { height: calc(60 * var(--fu)); }
  #forms .fv2-grid { grid-template-columns: repeat(8, 1fr); gap: calc(15 * var(--fu)); }
  #forms .fv2-cell { height: calc(136 * var(--fu)); }
}

/* ===== Цифры урона v3 (2026-10-24): один стиль поверх прежних слоёв (.float в game.js floatNumber).
   Практика: плотный шрифт с тёмной обводкой (читается на любом фоне), источник — цветом, обычный удар — «поп» и дуга вверх
   в сторону (--dx), крит — крупный золотой с наклоном (--rot) и свечением, тики яда/огня — мелкие и спокойные,
   слова (Блок!, Уклон!) — без разлёта. Размер по доле здоровья цели — --k ===== */
html body .float { --fc: #fff6e0; --fo: #1a0f08; --fs: 19px;
  font: 900 calc(var(--fs) * var(--k, 1))/1 'Rubik', system-ui, sans-serif !important; letter-spacing: -.02em; color: var(--fc) !important;
  -webkit-text-stroke: 4px var(--fo); paint-order: stroke fill; text-shadow: 0 2px 0 rgba(0, 0, 0, .55); white-space: nowrap;
  animation: dmg-pop .85s cubic-bezier(.2, .9, .3, 1) forwards; will-change: transform, opacity; }
@keyframes dmg-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.35); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.28); }
  24% { transform: translate(calc(-50% + var(--dx, 0px) * .2), calc(-50% - 8px)) scale(1); }
  72% { opacity: 1; transform: translate(calc(-50% + var(--dx, 0px) * .8), calc(-50% - 30px)) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - 40px)) scale(.8); } }
/* крит: крупнее, золото с оранжевым свечением, сильнее «поп», лёгкий наклон и встряска */
html body .float.crit { --fc: #ffd23f; --fo: #3a1a00; --fs: 27px; text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 0 10px rgba(255, 150, 30, .75);
  animation: dmg-crit 1s cubic-bezier(.2, .9, .3, 1) forwards; }
@keyframes dmg-crit {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(.3); }
  10% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.6); }
  16% { transform: translate(calc(-50% - 2px), -50%) rotate(var(--rot, 0deg)) scale(1.05); }
  20% { transform: translate(calc(-50% + 2px), -50%) rotate(var(--rot, 0deg)) scale(1.15); }
  28% { transform: translate(calc(-50% + var(--dx, 0px) * .2), calc(-50% - 10px)) rotate(var(--rot, 0deg)) scale(1.1); }
  75% { opacity: 1; transform: translate(calc(-50% + var(--dx, 0px) * .8), calc(-50% - 34px)) rotate(var(--rot, 0deg)) scale(1.05); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - 46px)) rotate(var(--rot, 0deg)) scale(.85); } }
html body .float.core { --fc: #ffb547; --fo: #3a1600; --fs: 32px; text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 0 14px rgba(255, 160, 40, .8); animation: dmg-crit 1s cubic-bezier(.2, .9, .3, 1) forwards; }
html body .float.mega { --fc: #ff4040; --fo: #2a0000; --fs: 38px; letter-spacing: -.03em; text-shadow: 0 2px 0 rgba(0, 0, 0, .6), 0 0 12px #ff2a2a, 0 0 24px rgba(255, 110, 60, .8);
  animation: dmg-crit 1.05s cubic-bezier(.2, .9, .3, 1) forwards; }
html body .float.mega::after { content: ' МЕГА'; font-size: .42em; vertical-align: super; color: #ffd25e; -webkit-text-stroke: 3px #2a0000; }
/* урон по герою: красный, уходит вниз-в сторону от героя */
html body .float.enemy { --fc: #ff5d6c; --fo: #2a0006; --fs: 18px; animation-name: dmg-hurt; }
@keyframes dmg-hurt {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  30% { transform: translate(calc(-50% + var(--dx, 0px) * .3), calc(-50% - 6px)) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + 14px)) scale(.85); } }
/* тики яда/огня/крови: мельче, без «попа», медленно вверх */
html body .float.tick { --fs: 14px; animation: dmg-tick .8s ease-out forwards; }
@keyframes dmg-tick { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.8); } 20% { opacity: 1; transform: translate(-50%, calc(-50% - 4px)) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px) * .4), calc(-50% - 24px)) scale(.9); } }
/* слова (Блок!, Уклон!, Щит!) — без разлёта в сторону */
html body .float.word { --fs: 16px; --dx: 0px; }
/* цвет источника */
html body .float.t-poison { --fc: #9dff5c; --fo: #0e2a05; }
html body .float.t-fire { --fc: #ffa040; --fo: #3a1200; }
html body .float.t-blood { --fc: #ff4d5e; --fo: #2a0008; }
html body .float.t-wisp { --fc: #c7b8ff; --fo: #1d1240; }
html body .float.t-dagger { --fc: #e09bff; --fo: #2a0a3a; }
html body .float.t-razor { --fc: #8ff07a; --fo: #0e2a08; }
html body .float.t-echo, html body .float.t-hammer { --fc: #ffe9a8; }
html body .float.t-missile, html body .float.t-bomb, html body .float.t-boom { --fc: #ffb15c; --fo: #3a1400; }
html body .float.t-exec { --fc: #ff4a4a; --fo: #2a0000; --fs: 28px; }
html body .float.t-block { --fc: #9fe2ff; --fo: #08243a; }
html body .float.t-gold { --fc: #ffd25e; --fo: #3a2600; --fs: 17px; }
html body .float.t-xp { --fc: #b6ff7a; --fo: #0b2a08; --fs: 15px; text-shadow: 0 0 8px rgba(91, 255, 58, .6); }
html body .float.t-essence { --fc: #d9ff9f; --fo: #102008; --fs: 16px; }
html body .float.t-bone { --fc: #f3e6c4; --fo: #3a2a10; --fs: 15px; }
html body .float.t-lunar { --fc: #a9b8ff; --fo: #10163a; }
@media (prefers-reduced-motion: reduce) { html body .float { animation-duration: .6s; } }
/* крит — всегда золото, какого бы источника ни был удар (кроме казни) */
html body .float.crit:not(.t-exec):not(.mega) { --fc: #ffd23f; --fo: #3a1a00; }

/* ===== Ускорение v2 (game.js openSpeed, класс speed2 на #info-modal): рама окна эволюции v2, крестик evo2, золотой заголовок
   с обводкой, медаль ×2, кнопка — зелёная плашка HUD (включить) или красная (выключить) ===== */
html body #info-modal.speed2 { background: rgba(3, 6, 6, .8); }
html body #info-modal.speed2 .info-card { width: min(92vw, 360px); padding: 22px 22px 18px; border-radius: 0; text-align: center; color: #fdf1d0; box-shadow: none;
  background: none !important; border: 30px solid transparent !important; border-image: url(assets/ui/evo2/win-p.webp) 60 fill / 30px stretch !important; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .75)); overflow: visible; }
html body #info-modal.speed2 .info-card::before, html body #info-modal.speed2 .info-card::after { display: none !important; }
html body #info-modal.speed2 :is(.info-card, .info-card *) { font-family: 'Rubik', 'Nunito', sans-serif !important; }
html body #info-modal.speed2 .info-close { top: -14px; right: -14px; width: 42px; height: 42px; border-radius: 0; background: url(assets/ui/evo2/close.png) center / 100% 100% no-repeat !important; box-shadow: none; }
html body #info-modal.speed2 .info-close .ic { display: none; }
html body #info-modal.speed2 .info-close:active { transform: translateY(2px); }
html body #info-modal.speed2 .info-speed h3 { margin: -6px 0 10px; font-size: 30px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #ffcb45;
  -webkit-text-stroke: 3px #030606; paint-order: stroke fill; text-shadow: 0 3px 0 rgba(0, 0, 0, .9); }
html body #info-modal.speed2 .sp-badge { width: 116px; height: 116px; margin: 0 auto 14px; color: #ffd23f; line-height: .9;
  background: radial-gradient(circle at 50% 38%, #3a3020, #120e08 70%); box-shadow: 0 0 0 5px #d9a43a, 0 0 0 9px #241808, 0 0 0 11px #6b4a2a, 0 6px 14px rgba(0, 0, 0, .7); }
html body #info-modal.speed2 .sp-badge.on { box-shadow: 0 0 0 5px #ffd23f, 0 0 0 9px #241808, 0 0 0 11px #6b4a2a, 0 0 34px rgba(255, 200, 60, .7); animation: sp-pulse 1.6s ease-in-out infinite; }
@keyframes sp-pulse { 50% { box-shadow: 0 0 0 5px #ffe27a, 0 0 0 9px #241808, 0 0 0 11px #6b4a2a, 0 0 50px rgba(255, 210, 80, .9); } }
html body #info-modal.speed2 .sp-badge b { font-size: 46px; font-weight: 900; -webkit-text-stroke: 3px #2a1600; paint-order: stroke fill; }
html body #info-modal.speed2 .sp-badge small { margin-top: -16px; font-size: 10px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #e6c97a; }
html body #info-modal.speed2 .info-desc { margin: 0 0 8px; font-size: 15px; line-height: 1.4; font-weight: 600; color: #e6e1d2; text-shadow: 0 2px 0 rgba(0, 0, 0, .8); }
html body #info-modal.speed2 .info-desc b { color: #ffd23f; font-weight: 800; }
html body #info-modal.speed2 .info-note { margin: 0 0 14px; font-size: 13px; line-height: 1.4; font-weight: 500; color: #a8b09a; }
html body #info-modal.speed2 .info-note.sp-free { margin: 10px 0 0; font-size: 12px; color: #7f8a77; }
html body #info-modal.speed2 .info-btn { position: relative; height: 62px; padding: 0; border-radius: 0; background: none !important; display: grid; place-items: center;
  border: 22px solid transparent; border-image: url(assets/ui/hud2/green.png) 24 fill / 22px stretch; filter: drop-shadow(0 0 10px rgba(120, 230, 70, .4)); }
html body #info-modal.speed2 .info-btn.on { border-width: 30px; border-image: url(assets/ui/evo2/btn-red.webp) 128 fill / 30px stretch; filter: none; }
html body #info-modal.speed2 .info-btn span { margin: -22px 0; font-size: 20px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; color: #fdf1d0; white-space: nowrap;
  -webkit-text-stroke: 3px #0b2005; paint-order: stroke fill; text-shadow: 0 2px 0 rgba(0, 0, 0, .8); }
html body #info-modal.speed2 .info-btn.on span { margin: -30px 0; -webkit-text-stroke-color: #3a0a04; }
html body #info-modal.speed2 .info-btn:active { transform: translateY(2px); }

/* ===== Плашка босса v2 (2026-10-24, по практике боссфайтов): без шипастой рамки — портрет, имя и эффекты строкой,
   под ними одна длинная тонкая полоса ХП с «отстающим уроном» (#boss-bar-lag догоняет с задержкой) и засечкой ярости.
   Щит, который сбивают тапами, — тонкая голубая полоса «тапай»; где тапов нет (автобой, «Оборона») — метка «Щит · урон −70%»
   и голубой налёт на полосе (game.js renderLight, класс armored) ===== */
html body.hud2 #arena #boss-bar { width: min(92vw, 440px) !important; margin: 6px auto 12px !important; padding: 0 !important; background: none !important; border: 0 !important;
  text-align: left; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); }
html body.hud2 #arena #boss-bar .boss-head { display: flex !important; align-items: center; gap: 8px; width: 100%; margin: 0 0 5px !important; padding: 0 2px !important;
  background: none !important; border: 0 !important; border-image: none !important; box-shadow: none !important; border-radius: 0 !important; }
html body.hud2 #arena #boss-bar .boss-head::before, html body.hud2 #arena #boss-bar .boss-head::after { display: none !important; }
html body.hud2 #arena #boss-bar .boss-pic { position: static !important; transform: none !important; translate: none !important; flex: none; width: 34px !important; height: 34px !important; margin: 0 !important; border-radius: 50%; border: 2px solid #c79a4a !important;
  box-shadow: 0 0 0 2px #120c06, 0 2px 4px rgba(0, 0, 0, .6) !important; background-color: #1a1410; }
html body.hud2 #arena #boss-bar .boss-head b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 !important;
  font: 800 17px/1.1 'Rubik', 'Nunito', sans-serif !important; letter-spacing: .01em; color: #fff1e0 !important; -webkit-text-stroke: 3px #030606; paint-order: stroke fill; text-shadow: 0 2px 0 rgba(0, 0, 0, .8) !important; }
html body.hud2 #arena #boss-bar .boss-phase { display: inline-flex !important; flex: none; align-items: center; height: 20px; padding: 0 8px; border-radius: 4px; font: 800 11px/1 'Rubik', sans-serif;
  font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #b3201f; box-shadow: 0 0 0 1.5px #2a0606; }
html body.hud2 #arena #boss-bar .boss-phase[hidden] { display: none !important; }
html body.hud2 #arena #boss-bar.armored .boss-phase { background: #2f6fb0; box-shadow: 0 0 0 1.5px #071a2c, 0 0 8px rgba(127, 216, 255, .6); text-transform: none; }
html body.hud2 #arena #boss-bar .boss-debuffs { margin-left: auto; gap: 3px; }
html body.hud2 #arena #boss-bar .boss-debuffs .bd { width: 22px; height: 22px; border-radius: 5px; }
/* полоса ХП */
html body.hud2 #arena #boss-bar .boss-bar-track { position: relative; box-sizing: border-box; height: 14px !important; padding: 0 !important; border: 0 !important; border-image: none !important; filter: none !important; border-radius: 3px !important; background: #1d0b0c !important; overflow: visible;
  box-shadow: 0 0 0 2px #0a0606, 0 0 0 3.5px #6b4a2a, 0 2px 4px 3px rgba(0, 0, 0, .45) !important; }
html body.hud2 #arena #boss-bar .boss-bar-track > i { position: absolute; inset: 0 auto 0 0 !important; max-width: 100% !important; border-radius: 2px !important; }
html body.hud2 #arena #boss-bar .boss-bar-track i#boss-bar-fill { position: absolute !important; height: auto !important; z-index: 1; background: linear-gradient(180deg, #ff7a6a, #d8302c 50%, #8f1414) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); transition: width .1s linear !important; }
html body.hud2 #arena #boss-bar .boss-bar-lag { z-index: 0; background: #ffe0a6 !important; transition: width .55s ease-out .35s !important; }
html body.hud2 #arena #boss-bar .boss-mark { z-index: 2; top: -4px !important; bottom: -4px !important; width: 2px !important; background: #ffd25e !important; box-shadow: 0 0 0 1px #2a1600 !important; }
html body.hud2 #arena #boss-bar .boss-bar-track span { position: absolute !important; inset: 0; z-index: 3; display: grid !important; place-items: center; line-height: 1 !important;
  font: 800 11px/1 'Rubik', sans-serif !important; color: #fff6e8; -webkit-text-stroke: 2.5px #1a0606; paint-order: stroke fill; text-shadow: none !important; }
/* ярость — полоса светится красным */
html body.hud2 #arena #boss-bar.rage .boss-bar-track { box-shadow: 0 0 0 2px #0a0606, 0 0 0 3.5px #b3201f, 0 0 12px 2px rgba(255, 50, 40, .55) !important; }
/* щит без тапов: голубой налёт поверх здоровья и голубая кайма */
html body.hud2 #arena #boss-bar.armored .boss-bar-track { box-shadow: 0 0 0 2px #0a0606, 0 0 0 3.5px #5aa8e0, 0 0 12px 2px rgba(127, 216, 255, .5) !important; }
html body.hud2 #arena #boss-bar.armored #boss-bar-fill { background: linear-gradient(180deg, #ff7a6a, #d8302c 50%, #8f1414) !important; }
html body.hud2 #arena #boss-bar.armored .boss-bar-track::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: 2px; pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(160, 220, 255, .38) 0 6px, rgba(160, 220, 255, .16) 6px 12px); }
/* щит, который сбивают тапами: тонкая голубая полоса под здоровьем */
html body.hud2 #arena #boss-bar .boss-shield { width: 100% !important; margin: 6px 0 0 !important; gap: 6px; }
html body.hud2 #arena #boss-bar .boss-shield b { width: 14px; height: 16px; font-size: 0 !important; background: url(assets/ui/evo2/ic-def.png) center / contain no-repeat; filter: drop-shadow(0 0 3px #7fd8ff); }
html body.hud2 #arena #boss-bar .boss-shield span { height: 6px !important; border-radius: 2px !important; background: #0b1a2a !important; box-shadow: 0 0 0 1.5px #050a10, 0 0 0 2.5px #3a6a90 !important; }
html body.hud2 #arena #boss-bar .boss-shield span i { border-radius: 1px !important; background: linear-gradient(180deg, #e0f6ff, #7fd8ff 50%, #3a8ad0) !important; }
html body.hud2 #arena #boss-bar .boss-shield em { font: 800 11px/1 'Rubik', sans-serif !important; font-style: normal; color: #cfeeff; -webkit-text-stroke: 2.5px #050a10; paint-order: stroke fill; white-space: nowrap; }
/* выбор скорости ×1 / ×2 / ×4 (game.js openSpeed): выбранная — зелёная плашка HUD, остальные — тёмная плашка кнопок сундука */
html body #info-modal.speed2 .sp-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 14px; }
html body #info-modal.speed2 .sp-opt { position: relative; height: 58px; padding: 0; border: 20px solid transparent; border-radius: 0; background: none; cursor: pointer;
  border-image: url(assets/ui/chest2/btn.png) 60 fill / 20px stretch; display: grid; place-items: center; transition: transform .1s, filter .15s; }
html body #info-modal.speed2 .sp-opt b { margin: -20px; font: 900 22px/1 'Rubik', sans-serif; color: #c9c4b3; -webkit-text-stroke: 3px #030606; paint-order: stroke fill; text-shadow: 0 2px 0 rgba(0, 0, 0, .8); }
html body #info-modal.speed2 .sp-opt.on { border-image: url(assets/ui/hud2/green.png) 24 fill / 20px stretch; filter: drop-shadow(0 0 10px rgba(120, 230, 70, .55)); }
html body #info-modal.speed2 .sp-opt.on b { color: #fdf1d0; -webkit-text-stroke-color: #0b2005; }
html body #info-modal.speed2 .sp-opt:active { transform: translateY(2px); }
@media (hover: hover) { html body #info-modal.speed2 .sp-opt:not(.on):hover { filter: brightness(1.15); } }

/* ===== «Новые механики»: экран «Учебная площадка» (#nm, nm-screens.js) — вкладки заданий героя и дерева мастерства (Z-015c) ===== */
#nm:not([hidden]) { display: block; padding: 0; overflow: hidden; background: #0d1311; }
#nm, #nm * { box-sizing: border-box; font-family: 'Rubik', 'Nunito', sans-serif; }
#nm button { font: inherit; color: inherit; border: 0; padding: 0; margin: 0; background: none; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
#nm .nm-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; max-width: 980px; margin: 0 auto; color: #fdf1d0;
  padding: max(10px, var(--sa-top)) max(12px, var(--sa-right)) max(10px, var(--sa-bottom)) max(12px, var(--sa-left)); }
#nm .nm-head { flex: none; display: flex; align-items: center; gap: 10px; }
#nm .nm-back { flex: none; width: 44px; height: 44px; border-radius: 12px; background: #1b2a23; border: 2px solid #3d5a4a; display: grid; place-items: center; }
#nm .nm-back img { width: 26px; height: 26px; object-fit: contain; }
#nm .nm-title { flex: 1; min-width: 0; font-size: 17px; line-height: 1.1; font-weight: 800; color: #ffcb45; -webkit-text-stroke: 3px #030606; paint-order: stroke fill; }
#nm .nm-res { flex: none; display: flex; gap: 6px; }
#nm .nm-cur { display: flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 9px 0 5px; border-radius: 17px; background: #16211b; border: 2px solid #3d5a4a; font-size: 14px; font-weight: 800; }
#nm .nm-ic { display: inline-block; width: 20px; height: 20px; background: center / contain no-repeat; flex: none; }
#nm .nm-ic.soul { background-image: url(assets/ui/v2/icons/ic-energy.png); }
#nm .nm-ic.gem { background-image: url(assets/ui-crystals.png); }
#nm .nm-tabs { flex: none; display: flex; gap: 6px; }
#nm .nm-tab { flex: 1 1 0; min-width: 0; min-height: 46px; padding: 4px 6px; border-radius: 10px; background: #16211b; border: 2px solid #2f4a3c; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
#nm .nm-tab b { font-size: 12px; line-height: 1.1; font-weight: 800; color: #cfd8c8; }
#nm .nm-tab small { font-size: 10px; color: #8d9a8f; }
#nm .nm-tab.on { background: linear-gradient(#f4c23a, #d28a12); border-color: #fff0b0; }
#nm .nm-tab.on b { color: #3a1f05; }
#nm .nm-tab.off { opacity: .55; cursor: default; }
#nm .nm-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#nm .nm-empty { margin: auto; color: #8d9a8f; font-size: 16px; }
#nm .nm-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding: 2px 2px 8px; }
#nm .nm-btn { min-height: 44px; padding: 0 14px; border-radius: 10px; background: #243a2f; border: 2px solid #4a6b58; font-size: 14px; font-weight: 800; color: #fdf1d0; text-align: center; }
#nm .nm-btn.gold { background: linear-gradient(#f4c23a, #d28a12); border-color: #fff0b0; color: #3a1f05; }
#nm .nm-btn.warn { background: linear-gradient(#e06a4a, #a8321c); border-color: #ffc2b0; }
#nm .nm-btn.ghost { background: transparent; }
#nm .nm-btn.wide { width: 100%; }
#nm .nm-btn:disabled { opacity: .4; cursor: default; filter: grayscale(.4); }
#nm .nm-row { display: flex; gap: 8px; }
#nm .nm-row > .nm-btn { flex: 1 1 0; }
#nm .nm-chip { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 800; background: #2a3a32; color: #cfd8c8; white-space: nowrap; }
#nm .nm-chip.open { background: #2d5a8a; } #nm .nm-chip.part { background: #4f7a2c; } #nm .nm-chip.max { background: #b8860b; color: #2a1802; } #nm .nm-chip.closed { background: #3a3f3c; color: #8d9a8f; }
#nm .nm-chip.r3 { background: #2d5a8a; } #nm .nm-chip.r4 { background: #7a3fa0; } #nm .nm-chip.r5 { background: #b8860b; color: #2a1802; }
/* дерево */
#nm .nm-m { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
#nm .nm-note { flex: none; text-align: center; font-size: 15px; font-weight: 800; color: #ffcb45; padding: 8px; border-radius: 10px; background: #2a2210; border: 2px solid #6b5420; }
#nm .nm-note[hidden] { display: none; }
#nm .nm-grid { --nm-row: 88px; position: relative; flex: none; height: calc(var(--rows) * var(--nm-row)); }
#nm .nm-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
#nm .nm-lines line { stroke: #4a6355; stroke-width: 3; vector-effect: non-scaling-stroke; }
#nm .nm-lines line.on { stroke: #e0b030; }
#nm .nm-cells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: var(--nm-row); }
#nm .nm-node { margin: 7px 5px; padding: 6px 7px; border-radius: 12px; background: #1b2a23; border: 2px solid #3d5a4a; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; overflow: hidden; }
#nm .nm-node b { font-size: 11px; line-height: 1.15; font-weight: 800; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#nm .nm-node span { font-size: 13px; font-weight: 800; color: #ffcb45; }
#nm .nm-node.closed { background: #151b18; border-color: #2b3631; color: #77837a; }
#nm .nm-node.closed span { color: #77837a; }
#nm .nm-node.open { border-color: #5aa0e0; box-shadow: 0 0 8px rgba(90, 160, 224, .35); }
#nm .nm-node.part { border-color: #8bd04a; background: #20361f; }
#nm .nm-node.max { border-color: #ffd34d; background: #3a3015; }
#nm .nm-node.sel { outline: 3px solid #fdf1d0; outline-offset: 1px; }
#nm .nm-shut .nm-grid { opacity: .55; }
#nm .nm-detail { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: #16211b; border: 2px solid #3d5a4a; max-height: 46%; overflow-y: auto; }
#nm .nm-d-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#nm .nm-d-head b { font-size: 16px; line-height: 1.15; }
#nm .nm-d-meta { display: flex; gap: 14px; font-size: 13px; color: #cfd8c8; } #nm .nm-d-meta b { color: #ffcb45; }
#nm .nm-fx { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.35; } #nm .nm-fx .mute, #nm .mute { color: #8d9a8f; }
#nm .nm-swap, #nm .nm-hint { margin: 0; font-size: 12px; color: #9fb0a4; }
#nm .nm-confirm p { margin: 0 0 6px; font-size: 13px; color: #ffd0b8; }
/* задания */
#nm .nm-slot { padding: 12px; border-radius: 14px; background: #16211b; border: 2px solid #3d5a4a; display: flex; flex-direction: column; gap: 10px; flex: none; }
#nm .nm-slot.shut { opacity: .6; border-style: dashed; gap: 4px; }
#nm .nm-slot.shut p { margin: 0; font-size: 13px; color: #9fb0a4; }
#nm .nm-slot-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
#nm .nm-slot-head img { width: 36px; height: 36px; object-fit: contain; image-rendering: pixelated; }
#nm .nm-slot-head b { flex: 1; font-size: 16px; } #nm .nm-slot-head span { color: #8d9a8f; font-size: 12px; }
#nm .nm-q { display: flex; flex-direction: column; gap: 8px; }
#nm .nm-q-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; } #nm .nm-q-name b { font-size: 16px; line-height: 1.2; }
#nm .nm-q-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: #cfd8c8; } #nm .nm-q-info > b { color: #fdf1d0; }
#nm .nm-rw { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: #ffcb45; }
#nm .nm-bar { height: 12px; border-radius: 6px; background: #0b100d; border: 2px solid #3d5a4a; overflow: hidden; } #nm .nm-bar i { display: block; height: 100%; background: linear-gradient(#8bd04a, #4f8a1c); }
#nm .nm-got { margin: 0; text-align: center; font-weight: 800; color: #8bd04a; }
@media (orientation: landscape) and (max-height: 520px), (min-width: 760px) {
  #nm .nm-m { flex-direction: row; }
  #nm .nm-m > .nm-scroll { flex: 1 1 0; }
  #nm .nm-detail { flex: 0 0 min(330px, 40%); max-height: none; align-self: stretch; }
  #nm .nm-wrap { gap: 6px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  #nm .nm-title { font-size: 17px; } #nm .nm-back { width: 38px; height: 38px; } #nm .nm-tab { min-height: 38px; } #nm .nm-btn { min-height: 38px; }
}

/* «Новые механики»: вкладка «Базовые улучшения» (учебная площадка) и строка золота в итогах забега (Z-016c) */
#nm [hidden] { display: none !important; }
#nm .nm-ic.coin { background-image: url(assets/ui/v2/icons/ic-coin.png); }
#nm .nm-rank { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#nm .nm-rank b { font-size: 20px; font-weight: 800; color: #ffcb45; }
#nm .nm-rank span { font-size: 13px; color: #cfd8c8; } #nm .nm-rank em { font-style: normal; font-weight: 800; color: #fdf1d0; }
#nm .nm-yard-head { padding: 12px; border-radius: 14px; background: #16211b; border: 2px solid #3d5a4a; display: flex; flex-direction: column; gap: 8px; flex: none; }
#nm .nm-yard-rows { display: flex; flex-direction: column; gap: 8px; flex: none; }
#nm .nm-y { display: flex; align-items: stretch; gap: 8px; padding: 10px; border-radius: 14px; background: #16211b; border: 2px solid #3d5a4a; }
#nm .nm-y-main { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 2px 8px; }
#nm .nm-y-main b { font-size: 16px; }
#nm .nm-y-tot { justify-self: end; font-size: 16px; font-weight: 800; color: #8bd04a; }
#nm .nm-y-gain { font-size: 12px; color: #ffcb45; font-weight: 800; }
#nm .nm-y-lim { justify-self: end; font-size: 12px; color: #9fb0a4; }
#nm .nm-y-buy { flex: none; width: 124px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 6px; }
#nm .nm-y-buy span { display: inline-flex; align-items: center; gap: 5px; font-size: 16px; }
#nm .nm-y-buy small { font-size: 10px; line-height: 1.1; font-weight: 700; }
#nm .nm-rew { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#nm .nm-rew li { display: flex; gap: 10px; font-size: 13px; line-height: 1.25; } #nm .nm-rew li b { flex: none; min-width: 52px; color: #ffcb45; } #nm .nm-rew li span { color: #e6e1d2; }
.rr-gold { background: linear-gradient(90deg, rgba(255, 203, 69, .18), rgba(255, 203, 69, .04)); }
.rr-gold[hidden] { display: none; }
.rr-gold b { color: #ffe08a; }

/* ===== «Новые механики»: меню, разделы, бой, выбор карточки, итоги (Z-019a; body.nm ставит game.js) ===== */
/* разделы nmx — общий вид с #nm */
#nmx:not([hidden]) { display: block; padding: 0; overflow: hidden; background: #0d1311; }
#nmx, #nmx * { box-sizing: border-box; font-family: 'Rubik', 'Nunito', sans-serif; }
#nmx button { font: inherit; color: inherit; border: 0; padding: 0; margin: 0; background: none; cursor: pointer; text-align: left; }
#nmx [hidden] { display: none !important; }
#nmx .nm-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; max-width: 980px; margin: 0 auto; color: #fdf1d0;
  padding: max(10px, var(--sa-top)) max(12px, var(--sa-right)) max(10px, var(--sa-bottom)) max(12px, var(--sa-left)); }
#nmx .nm-head { flex: none; display: flex; align-items: center; gap: 10px; }
#nmx .nm-back { flex: none; width: 44px; height: 44px; border-radius: 12px; background: #1b2a23; border: 2px solid #3d5a4a; display: grid; place-items: center; }
#nmx .nm-back img { width: 26px; height: 26px; object-fit: contain; }
#nmx .nm-title { flex: 1; min-width: 0; font-size: 20px; font-weight: 800; color: #ffcb45; -webkit-text-stroke: 3px #030606; paint-order: stroke fill; }
#nmx .nm-res { flex: none; display: flex; gap: 6px; }
#nmx .nm-cur { display: flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 9px 0 5px; border-radius: 17px; background: #16211b; border: 2px solid #3d5a4a; font-size: 14px; font-weight: 800; }
#nmx .nm-ic { display: inline-block; width: 20px; height: 20px; background: center / contain no-repeat; flex: none; }
#nmx .nm-ic.coin { background-image: url(assets/ui/v2/icons/ic-coin.png); } #nmx .nm-ic.gem { background-image: url(assets/ui-crystals.png); }
#nmx .nm-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#nmx .nm-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding: 2px 2px 8px; }
#nmx .nm-hint { margin: 0; font-size: 12px; color: #9fb0a4; }
#nmx .mute { color: #8d9a8f; }
#nmx .nm-chip { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 800; font-style: normal; background: #2a3a32; color: #cfd8c8; white-space: nowrap; }
#nmx .nm-chip.max { background: #b8860b; color: #2a1802; } #nmx .nm-chip.closed { background: #3a3f3c; color: #8d9a8f; }
#nmx .nm-btn { min-height: 44px; padding: 0 14px; border-radius: 10px; background: #243a2f; border: 2px solid #4a6b58; font-size: 14px; font-weight: 800; color: #fdf1d0; text-align: center; }
#nmx .nm-btn.wide { width: 100%; }
#nmx .nm-note.off { text-align: center; font-size: 14px; font-weight: 800; color: #b8b8b0; padding: 8px; border-radius: 10px; background: #262a28; border: 2px solid #3d4642; flex: none; }
#nmx .nm-slot { padding: 12px; border-radius: 14px; background: #16211b; border: 2px solid #3d5a4a; display: flex; flex-direction: column; gap: 10px; flex: none; }
#nmx .nm-slot-head { display: flex; align-items: center; gap: 8px; } #nmx .nm-slot-head img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; } #nmx .nm-slot-head b { flex: 1; font-size: 17px; }
/* снаряжение */
#nmx .nm-w { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: #16211b; border: 2px solid #3d5a4a; flex: none; opacity: .5; filter: grayscale(.8); }
#nmx .nm-w.own { opacity: 1; filter: none; border-color: #ffd34d; background: #2a2410; }
#nmx .nm-w img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; flex: none; }
#nmx .nm-w-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } #nmx .nm-w-main b { font-size: 15px; } #nmx .nm-w-main span { font-size: 12px; color: #cfd8c8; }
/* герои */
#nmx .nm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
#nmx .nm-stats div { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; color: #cfd8c8; } #nmx .nm-stats b { color: #fdf1d0; } #nmx .nm-stats em { font-style: normal; color: #8bd04a; }
#nmx .nm-heroes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; flex: none; }
#nmx .nm-roster-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; flex: none; }
#nmx .nm-roster-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:120px; padding:8px 4px; border:2px solid #3d5a4a; border-radius:12px; background:#16211b; color:#f3e5ba; }
#nmx .nm-roster-card img { width:62px; height:62px; object-fit:contain; image-rendering:pixelated; }
#nmx .nm-roster-card b { font-size:12px; line-height:1.2; overflow-wrap:anywhere; }
#nmx .nm-roster-card small { font-size:10px; color:#a8baaa; }
#nmx .nm-roster-card.preview { border-color:#ffd34d; background:#2a2818; }
#nmx .nm-roster-card.selected small { color:#a9ed73; }
#nmx .nm-hero-skill { display:flex; gap:10px; padding:10px 0; }
#nmx .nm-hero-skill img { width:42px; height:42px; object-fit:contain; }
#nmx .nm-hero-skill b, #nmx .nm-hero-skill span { display:block; font-size:12px; line-height:1.4; }
#nmx .nm-hero-skill span { color:#cfd8c8; margin-top:4px; }
#nmx .nm-hero-actions { display:flex; flex-direction:column; gap:8px; }
#nmx .nm-hero-fragments { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; font-size:12px; }
#nmx .nm-roster-progress { font-size: 10px; color: #e4ca7a; }
#nmx .nm-hero-level-label { margin: 4px 0 12px; font-size: 12px; font-weight: 700; color: #e4ca7a; }
#nmx .nm-hero-stat-next { display: block; font-size: 11px; font-weight: 700; color: #a9ed73; }
#nmx .nm-hero-progression, #nmx .nm-hero-sources { margin-top: 20px; padding-top: 4px; border-top: 1px solid #3d5a4a; }
#nmx .nm-hero-progress-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 12px 0; }
#nmx .nm-hero-upgrade { padding: 12px; border: 1px solid #3d5a4a; border-radius: 10px; background: #101b15; }
#nmx .nm-hero-meter { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin-bottom: 10px; font-size: 12px; }
#nmx .nm-hero-meter > span { color: #a8baaa; }
#nmx .nm-hero-meter strong { color: #f3e5ba; }
#nmx .nm-hero-upgrade .nm-hint { margin: 8px 0 0; }
#nmx .nm-hero-upgrade .nm-btn, #nmx .nm-hero-source .nm-btn { min-height: 44px; height: auto; white-space: normal; line-height: 1.35; padding: 10px 12px; overflow-wrap: anywhere; }
#nmx .nm-hero-detail .nm-btn:focus-visible, #nmx .nm-roster-card:focus-visible, #nmx .nm-hero-bonuses summary:focus-visible { outline: 2px solid #ffd34d; outline-offset: 3px; }
#nmx .nm-hero-bonuses { margin-top: 10px; border: 1px solid #3d5a4a; border-radius: 10px; padding: 0 10px; background: #101b15; }
#nmx .nm-hero-bonuses summary { min-height: 44px; padding: 12px 0; font-size: 12px; font-weight: 800; cursor: pointer; color: #f3e5ba; }
#nmx .nm-hero-bonuses summary > span { margin-left: 6px; color: #a8baaa; }
#nmx .nm-hero-bonus { display: grid; grid-template-columns: minmax(42px, auto) minmax(0, 1fr); align-items: start; gap: 8px; padding: 12px 0; border-top: 1px solid #2c4435; }
#nmx .nm-hero-threshold { font-size: 11px; color: #e4ca7a; padding-top: 2px; }
#nmx .nm-hero-bonus b { display: block; font-size: 12px; line-height: 1.4; }
#nmx .nm-hero-bonus p, #nmx .nm-hero-source p { margin: 5px 0 0; font-size: 12px; line-height: 1.5; color: #cfd8c8; overflow-wrap: anywhere; }
#nmx .nm-hero-bonus b > em { display: block; font-size: 10px; font-style: normal; color: #e4ca7a; }
#nmx .nm-hero-bonus-state { grid-column: 2; font-size: 10px; font-weight: 700; color: #a9ed73; }
#nmx .nm-hero-bonus.future .nm-hero-bonus-state { color: #a8baaa; }
#nmx .nm-hero-global { margin: 0 0 12px; }
#nmx .nm-hero-global > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding: 10px 0; border-top: 1px solid #2c4435; font-size: 12px; }
#nmx .nm-hero-global dt { color: #cfd8c8; }
#nmx .nm-hero-global dd { margin: 0; font-weight: 700; color: #a9ed73; }
#nmx .nm-hero-test-note { font-size: 12px; line-height: 1.5; color: #e4ca7a; }
#nmx .nm-hero-source { margin-top: 10px; padding: 12px; border: 1px solid #3d5a4a; border-radius: 10px; background: #101b15; }
#nmx .nm-hero-source-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
#nmx .nm-hero-source-head b { font-size: 13px; }
#nmx .nm-hero-source-head em { font-size: 10px; font-style: normal; color: #e4ca7a; }
#nmx .nm-hero-source .nm-btn { margin-top: 10px; }
#nmx .nm-hero-source-group { margin-top: 10px; border: 1px solid #3d5a4a; border-radius: 10px; background: #101b15; }
#nmx .nm-hero-source-group > summary { min-height: 44px; padding: 12px; font-size: 12px; font-weight: 800; color: #f3e5ba; cursor: pointer; }
#nmx .nm-hero-source-group > summary > span { display: inline-block; margin-left: 8px; color: #a8baaa; }
#nmx .nm-hero-source-group > summary:focus-visible { outline: 2px solid #ffd34d; outline-offset: 3px; }
#nmx .nm-hero-source-offers { display: grid; gap: 8px; padding: 0 10px 10px; }
#nmx .nm-hero-source-offers .nm-hero-source { margin-top: 0; }
#nmx .nm-hero-calendar { min-height: 44px; margin: 0 0 4px; }
@media(min-width:700px) { #nmx .nm-hero-progress-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(min-width:700px) { #nmx .nm-roster-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } }
#nmx .nm-hero.lock { aspect-ratio: 1 / 1.1; border-radius: 12px; background: #151b18; border: 2px dashed #2b3631; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
#nmx .nm-hero.lock img { width: 52%; filter: brightness(0) opacity(.45); } #nmx .nm-hero.lock b { font-size: 11px; color: #77837a; }
/* навыки */
#nmx .nm-gh { margin: 4px 0 0; font-size: 14px; color: #ffcb45; flex: none; } #nmx .nm-gh small { color: #8d9a8f; }
#nmx .nm-sk { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; flex: none; }
#nmx .nm-sk-c { padding: 8px 6px; border-radius: 12px; background: #151b18; border: 2px solid #2b3631; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; opacity: .55; filter: grayscale(.7); }
#nmx .nm-sk-c.on { opacity: 1; filter: none; background: #1b2a23; border-color: var(--re, #4a6b58); }
#nmx .nm-sk-c.r-legendary { --re: #ffae34; } #nmx .nm-sk-c.r-epic { --re: #b25bff; }
#nmx .nm-sk-c img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; } #nmx .nm-sk-c b { font-size: 11px; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } #nmx .nm-sk-c span { font-size: 11px; color: #ffcb45; font-weight: 800; }
/* окно «Навыки» в бою */
.nm-pop { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .6); display: grid; place-items: center; padding: 14px; }
.nm-pop[hidden] { display: none; }
.nm-pop * { box-sizing: border-box; font-family: 'Rubik', 'Nunito', sans-serif; }
.nm-pop-win { width: min(100%, 420px); max-height: 80vh; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; background: #16211b; border: 2px solid #3d5a4a; color: #fdf1d0; }
.nm-pop .nm-d-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .nm-pop .nm-d-head b { font-size: 17px; }
.nm-pop .nm-btn { min-height: 38px; padding: 0 14px; border-radius: 10px; background: #243a2f; border: 2px solid #4a6b58; font-size: 13px; font-weight: 800; color: #fdf1d0; cursor: pointer; }
.nm-pop-list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.nm-pop-r { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; background: #1b2a23; } .nm-pop-r img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; flex: none; }
.nm-pop-r b { display: block; font-size: 14px; } .nm-pop-r b em { font-style: normal; color: #ffcb45; } .nm-pop-r span { font-size: 12px; color: #cfd8c8; }
.nm-pop .nm-hint { margin: 0; color: #9fb0a4; font-size: 13px; }
/* главное меню: счётчик золота и Gem вместо кристаллов */
body.nm #m2 .m2-cr { overflow: visible; }
body.nm #m2 .m2-gold { position: absolute; left: calc(14 * var(--u)); top: 100%; margin-top: calc(10 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(4 * var(--u)) calc(18 * var(--u)) calc(4 * var(--u)) calc(8 * var(--u)); border-radius: 999px; background: rgba(8, 12, 9, .72); border: calc(2 * var(--u)) solid #3d5a4a; font: 800 calc(var(--fcr) * var(--u) * .62) 'Rubik', sans-serif; color: #ffe08a; -webkit-text-stroke: calc(2 * var(--u)) #030606; paint-order: stroke fill; }
body.nm #m2 .m2-gold::before { content: ''; width: 1.5em; height: 1.5em; background: url(assets/ui/v2/icons/ic-coin.png) center / contain no-repeat; }
body.nm #m2 .m2-badge { font-size: 0; } body.nm #m2 .m2-badge::after { content: '!'; font-size: calc(24 * var(--u)); }
/* бой: кнопка ярости на месте эволюции */
body.nm .h2-evo.nm-rage { position: relative; overflow: hidden; }
body.nm .h2-evo.nm-rage::after { content: ''; position: absolute; left: 0; bottom: 0; height: 12%; width: calc(var(--rage, 0) * 100%); background: linear-gradient(90deg, #ff7a2a, #ffd34d); border-radius: 0 3px 3px 0; pointer-events: none; }
body.nm .h2-evo.nm-rage.ready::after { background: linear-gradient(90deg, #ff3a1a, #ffae34); box-shadow: 0 0 10px #ff7a2a; }
/* итоги забега: без кристаллов и символов */
body.nm .rr-crys:not(.rr-gold), body.nm #results-syms, body.nm #results-unlocks { display: none !important; }

/* Z-022: сундука в «Новых» нет, выбор карточки обязателен (без «Пропустить»), мелкие подписи разделов */
body.nm #h2-chest, body.nm #dock-chest, body.nm #road-chest, body.nm #hud-chest { display: none !important; }
body.nm .h2-actions { grid-template-columns: 1fr; }
body.nm #c2-skip { display: none !important; }
body.nm .h2-cell:has(#h2-gold), body.nm .h2-cell:has(#h2-gold) + .h2-sep { display: none !important; }
body.nm .nm-cosmetic-active #evolved-art { opacity: 0 !important; }
body.nm .nm-cosmetic-active .slime-body { visibility: hidden; }
.nm-cosmetic-art { position: absolute; object-fit: contain; pointer-events: none; image-rendering: pixelated; transform-origin: 50% 72.65625%; z-index: 2; }
.nm-cosmetic-art[hidden], .nm-cosmetic-label[hidden] { display: none !important; }
.nm-cosmetic-label { position: absolute; top: calc(var(--h2-top-h, 115px) + 6px); left: 12px; padding: 6px 10px; min-height: 36px; border-radius: 8px; border: 1px solid #bda25d; background: #142019eb; color: #f3e5ba; font: 700 11px 'Rubik', sans-serif; pointer-events: auto; }
/* New: keep tutorial content outside the spotlight's clipped shade. */
.tut-shade { display: none; }
body.nm .tut { pointer-events: none; background: none; }
body.nm .tut-shade { display: block; position: fixed; inset: 0; background: rgba(4, 8, 4, .66); pointer-events: auto; }
/* The dedicated shade owns screen dimming. Legacy tut-glow interpolates a
   200vmax shadow and turns this small gold shadow into a full-screen flash. */
body.nm .tut-hole { animation: none; box-shadow: 0 0 14px 3px rgba(255, 224, 122, .85); }
body.nm .tut-hole.contour { box-shadow: none !important; }
body.nm .tut-target { animation: none !important; }
.nm-card-ads { display:none; }
body.nm .nm-card-ads { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; flex:none; padding:4px 12px 10px; }
body.nm .nm-card-ads[hidden] { display:none !important; }
.nm-card-ads button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:6px; border:2px solid #6e9fc0; border-radius:9px; background:#1b3b51; color:#fff0c4; font:800 12px 'Rubik',sans-serif; }
.nm-card-ads button:last-child { background:#76521b; border-color:#edc764; }
.nm-card-ads b { font:inherit; } .nm-card-ads small { display:block; font-size:10px; color:#d4dabe; margin-top:2px; }
.nm-card-ads button:disabled { opacity:.5; }
.rewarded-ad { position:fixed; inset:0; z-index:16000; display:grid; place-items:center; padding:12px; padding-top:max(12px,env(safe-area-inset-top)); padding-bottom:max(12px,env(safe-area-inset-bottom)); background:#030705ed; }
.rewarded-ad-window { display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:10px; width:min(620px,100%); height:min(760px,calc(100dvh - 32px)); padding:12px; border:2px solid #a58c4b; border-radius:14px; background:#101e16; color:#f8edce; box-shadow:0 10px 36px #000a; }
.rewarded-ad header { display:flex; align-items:center; justify-content:space-between; gap:8px; font:800 16px 'Rubik',sans-serif; }
.rewarded-ad header button { flex:none; min-width:44px; min-height:44px; border:1px solid #697c6c; border-radius:8px; background:#25352c; color:#f8edce; font-size:20px; }
.rewarded-ad-art { display:flex; align-items:center; justify-content:center; min-height:0; overflow:hidden; background:#060e09; border-radius:8px; }
.rewarded-ad-art img { display:block; max-height:100%; max-width:100%; object-fit:contain; }
.rewarded-ad footer { display:flex; flex-direction:column; gap:8px; text-align:center; font:700 13px 'Rubik',sans-serif; }
.rewarded-ad progress { width:100%; height:8px; accent-color:#9ed849; }
.rewarded-ad [data-ad-complete] { min-height:46px; border:2px solid #99d854; border-radius:8px; background:#78bc42; color:#11230d; font:800 14px 'Rubik',sans-serif; }
.rewarded-ad [data-ad-complete]:disabled { border-color:#44574b; background:#2a3a30; color:#9ba99e; }
.rewarded-ad small { font-size:10px; line-height:1.35; color:#aabcad; }
body.nm .tut-box { z-index: 1; pointer-events: auto; max-height: calc(100dvh - 16px); overflow-y: auto; }
/* New: text determines card height; the list scrolls, tools remain available. */
body.nm #cards .c2-win { min-height: 0; max-height: calc(100dvh - 190px); }
body.nm #cards .c2-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px; margin: -8px; touch-action: pan-y; }
body.nm #cards .c2-card { height: auto; min-height: calc(372 * var(--cu)); }
body.nm #cards .c2-text { position: relative; inset: auto; margin-left: calc(256 * var(--cu)); width: calc(502 * var(--cu)); padding: calc(106 * var(--cu)) 0 calc(26 * var(--cu)); overflow: visible; display: flex; flex-direction: column; }
body.nm #cards .c2-text > * { position: static; width: auto; translate: none; flex: none; }
body.nm #cards .c2-line { display: none; }
body.nm #cards .c2-desc { margin-top: calc(18 * var(--cu)); padding: 0; }
body.nm #cards .c2-tools { flex: none; }
body.nm .nm-build-count { position: absolute; left: 50%; bottom: -2px; translate: -50% 0; white-space: nowrap; font-size: 10px; color: #fff0b5; background: #142017; border: 1px solid #9a864e; border-radius: 4px; padding: 2px 4px; }
.nm-skill-receipt { position: fixed; z-index: 80; top: calc(var(--h2-top-h, 115px) + 8px); left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 24px); padding: 10px 14px; border: 2px solid #d5b254; border-radius: 10px; color: #fff3ce; background: #16251af5; pointer-events: none; box-shadow: 0 4px 12px #0008; font-size: 13px; }
.nm-skill-receipt[hidden] { display: none; }
.nm-skill-receipt img { width: 42px; height: 42px; object-fit: contain; }
.nm-skill-receipt b { display: block; margin-bottom: 3px; color: #b8ff9c; }
html body.slime-city-scene #bg .layer.far { filter: saturate(.85) brightness(.92); image-rendering: auto; }
html body.slime-city-scene #bg .layer.far::before, html body.slime-city-scene #bg .layer.far::after { display: none; }
@media (min-aspect-ratio: 1/1) {
  body.nm #cards .c2-text { margin: calc(244 * var(--cu)) calc(36 * var(--cu)) 0; width: auto; padding: calc(18 * var(--cu)) 0 calc(26 * var(--cu)); }
  body.nm #cards .c2-name { text-align: left; }
  body.nm #cards .c2-desc { margin-top: calc(14 * var(--cu)); }
  body.nm #cards .c2-win { max-height: calc(100dvh - 110px); }
}
/* Short landscape: reserve room for ads without burying effect text below oversized art. */
@media (orientation:landscape) and (max-height:600px) {
  body.nm #cards .c2-head { margin-bottom:4px; }
  body.nm #cards .c2-win { max-height:calc(100dvh - 70px); gap:7px; padding-top:6px; padding-bottom:8px; }
  body.nm #cards .c2-list { flex-direction:column; gap:6px; padding:2px; margin:0; }
  body.nm #cards .c2-card { width:100%; min-height:64px; }
  body.nm #cards .c2-text { margin:0 12px 0 clamp(70px,calc(140 * var(--cu)),96px); padding:22px 0 6px; }
  body.nm #cards .c2-name { font-size:clamp(14px,calc(32 * var(--cu)),18px); line-height:1.2; }
  body.nm #cards .c2-desc { font-size:clamp(11px,calc(24 * var(--cu)),14px); line-height:1.3; margin-top:3px; }
  body.nm #cards .c2-art { left:10px; top:50%; width:clamp(48px,calc(100 * var(--cu)),64px); height:clamp(48px,calc(100 * var(--cu)),64px); translate:0 -50%; }
  body.nm #cards .c2-img { clip-path:none; }
  body.nm #cards .c2-img img { scale:1.1; }
  body.nm #cards .c2-tags { left:auto; right:10px; top:7px; }
  body.nm #cards .c2-tags > span { height:14px; font-size:9px; padding:0 4px; }
  body.nm .nm-card-ads { padding:0; }
  body.nm .nm-card-ads button { min-height:44px; }
}
#nmx .nm-note.off small { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; color: #8d9a8f; }
#nmx .nm-hero.lock small { font-size: 9px; color: #5f6b64; }
body.nm .h2-actions > .h2-evo { flex: 1 1 auto; margin-right: calc(-16 * var(--u)); }

/* Z-021c: окно выбора главы */
#nmx .nm-ch { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: #16211b; border: 2px solid #3d5a4a; flex: none; width: 100%; }
#nmx .nm-ch.done { border-color: #4f7a2c; background: #1a2a1a; }
#nmx .nm-ch.lock { opacity: .5; background: #151b18; border: 2px dashed #2b3631; cursor: default; }
#nmx .nm-ch.sel { border-color: #ffd34d; background: #2a2410; box-shadow: 0 0 10px rgba(255, 211, 77, .3); }
#nmx .nm-ch-n { flex: none; width: 42px; height: 42px; border-radius: 12px; background: #243a2f; display: grid; place-items: center; font-size: 20px; font-weight: 800; color: #ffcb45; }
#nmx .nm-ch.lock .nm-ch-n { font-size: 16px; color: #77837a; }
#nmx .nm-ch-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#nmx .nm-ch-name { font-size: 16px; min-height: 1.2em; }
#nmx .nm-ch-boss { font-size: 12px; color: #cfd8c8; }
#nmx .nm-ch-note { font-size: 11px; color: #8d9a8f; }
#nmx .nm-ch-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
#nmx .nm-rw { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 800; color: #ffcb45; }

/* Z-019e: иконки дизайнера вместо заглушек (Gem, души, оружие, ярость) */
#nm .nm-ic.gem, #nmx .nm-ic.gem { background-image: url(assets/ui/nm/gem-48.png); }
#nm .nm-ic.soul { background-image: url(assets/ui/nm/souls-48.png); }
#nmx .nm-w img { width: 56px; height: 56px; image-rendering: pixelated; }
body.nm #m2 .m2-cr::before { content: ''; position: absolute; left: calc(-92 * var(--u)); top: calc(0 * var(--u)); width: calc(100 * var(--u)); height: calc(100 * var(--u)); background: url(assets/ui/nm/gem.png) center / contain no-repeat; image-rendering: pixelated; pointer-events: none; }
body.nm #m2 .m2-gold::before { background-image: url(assets/ui/v2/icons/ic-coin.png); }

/* Z-026: полоса опыта до следующего навыка («Новые») — тонкая плашка под верхним блоком HUD */
.h2-xpbar { position: absolute; left: 50%; top: calc(var(--h2-top-h, 120px) - 4px); translate: -50% 0; width: min(94vw, 520px); height: 20px; border-radius: 10px; background: rgba(8, 12, 9, .78); border: 2px solid #3d5a4a; overflow: hidden; z-index: 3; pointer-events: none; }
.h2-xpbar[hidden] { display: none !important; }
.h2-xpbar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--xp, 0) * 100%); background: linear-gradient(180deg, #ffe27a, #e08a00); transition: width .2s ease-out; }
.h2-xpbar .h2-t { position: absolute; inset: 0; display: grid; place-items: center; font: 800 12px/1 'Rubik', sans-serif; color: #fdf1d0; -webkit-text-stroke: 3px #030606; paint-order: stroke fill; }
body.nm.hud2 .arena .scene-top { top: calc(var(--h2-top-h, 120px) + 20px) !important; }
body.nm.hud2 #toast { top: calc(var(--h2-top-h, 120px) + 26px) !important; }

/* Z-027: кнопка «Ещё», экран разделов и заглушки (nm-hub.js) */
.m2-more { display: none; }
body.nm #m2 .m2-more { display: grid; place-items: center; z-index: 5; border-radius: calc(18 * var(--u)); background: rgba(8, 12, 9, .72); border: calc(3 * var(--u)) solid #6b5a3a; padding: 0; cursor: pointer; }
body.nm #m2 .m2-more b { font: 800 calc(30 * var(--u)) 'Rubik', sans-serif; color: #fdf1d0; -webkit-text-stroke: calc(3 * var(--u)) #030606; paint-order: stroke fill; }
#nmx .nm-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; flex: none; }
#nmx .nm-hub-c { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 12px; background: #151b18; border: 2px solid #2b3631; min-height: 96px; }
#nmx .nm-hub-c b { font-size: 14px; line-height: 1.15; color: #b8c0b6; }
#nmx .nm-hub-c small { font-size: 11px; line-height: 1.25; color: #77837a; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
#nmx .nm-hub-c.live { background: #1b2a23; border-color: #4a6b58; } #nmx .nm-hub-c.live b { color: #fdf1d0; }
#nmx .nm-st { align-self: flex-start; font-style: normal; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 9px; background: #2a3a32; color: #cfd8c8; }
#nmx .nm-st.live { background: #4f7a2c; } #nmx .nm-st.unk { background: #3a3f3c; color: #a8b0a6; } #nmx .nm-st.ok { background: #2d5a8a; }
#nmx .nm-stub-head { display: flex; gap: 6px; } #nmx .nm-stub-info { margin: 0; font-size: 14px; line-height: 1.35; } #nmx .nm-stub-l { margin: 0; padding-left: 18px; font-size: 13px; color: #cfd8c8; line-height: 1.4; }
#nmx .nm-bts { display: flex; flex-direction: column; gap: 8px; flex: none; }
/* пять типов кнопок: n — обычная, r — за ресурсы, ad — реклама, m — за деньги, l — закрыта по прогрессу */
#nmx .nm-bt { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 14px; border-radius: 10px; font-size: 14px; font-weight: 800; text-align: center; border: 2px solid #4a6b58; background: #243a2f; color: #fdf1d0; width: 100%; flex: none; }
#nmx .nm-bt em { font-style: normal; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; gap: 4px; }
#nmx .nm-bt .nm-bt-ico { font-style: normal; font-size: 15px; }
#nmx .nm-bt.r { background: linear-gradient(#f4c23a, #d28a12); border-color: #fff0b0; color: #3a1f05; }
#nmx .nm-bt.ad { background: #1d3550; border-color: #4a7fb8; } #nmx .nm-bt.ad em { color: #9fd0ff; }
#nmx .nm-bt.m { background: #2a2230; border-color: #5a4a6a; color: #cbbfd6; } #nmx .nm-bt.m em { color: #9a8aaa; }
#nmx .nm-bt.l { background: #1a1f1c; border-color: #3a443f; color: #8d9a8f; } #nmx .nm-bt.l em { color: #77837a; }
#nmx .nm-bt:disabled { opacity: .55; cursor: default; filter: grayscale(.35); }
#nmx .nm-title { font-size: 17px; line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#nm .nm-shutq { opacity: .5; pointer-events: none; display: flex; flex-direction: column; gap: 10px; }
#nm .nm-openq { display: flex; flex-direction: column; gap: 10px; }

/* Z-033c: экран «Снаряжение» */
#nmx .nm-gresrow { display: flex; gap: 6px; flex: none; flex-wrap: wrap; }
#nmx .nm-gres { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 12px; background: #16211b; border: 2px solid #3d5a4a; font-size: 12px; } #nmx .nm-gres i { font-style: normal; color: #9fb0a4; } #nmx .nm-gres b { color: #ffcb45; font-size: 14px; }
#nmx .nm-gslots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: none; }
#nmx .nm-gslot { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px; border-radius: 12px; background: #151b18; border: 2px dashed #2b3631; min-height: 118px; text-align: center; }
#nmx .nm-gslot i { font-style: normal; font-size: 11px; color: #8d9a8f; } #nmx .nm-gslot img { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; } #nmx .nm-gslot b { font-size: 12px; line-height: 1.15; } #nmx .nm-gslot small { font-size: 10px; color: #9fb0a4; }
#nmx .nm-gslot.on { background: #1b2a23; border: 2px solid #4a6b58; } #nmx .nm-gslot.sel { border-color: #ffd34d; background: #2a2410; } #nmx .nm-gempty { margin: auto; color: #5f6b64; font-size: 12px; }
#nmx .nm-gst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; } #nmx .nm-gst li { display: flex; gap: 8px; justify-content: space-between; flex-wrap: wrap; } #nmx .nm-gst b { color: #8bd04a; } #nmx .nm-gst small { width: 100%; font-size: 10px; color: #8d9a8f; }
#nmx .nm-gop li.shut { opacity: .5; } #nmx .nm-gcard h5 { margin: 4px 0 0; font-size: 12px; color: #ffcb45; }
#nmx .nm-ginv { display: flex; flex-direction: column; gap: 6px; flex: none; }
#nmx .nm-gi { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #16211b; border: 2px solid #3d5a4a; width: 100%; } #nmx .nm-gi.sel { border-color: #ffd34d; background: #2a2410; }
#nmx .nm-gi img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; flex: none; } #nmx .nm-gi span { flex: 1; min-width: 0; display: flex; flex-direction: column; } #nmx .nm-gi b { font-size: 14px; } #nmx .nm-gi small { font-size: 11px; color: #9fb0a4; }
#nmx .nm-gcard .nm-bts .nm-btn { width: 100%; }
#nmx .nm-d-meta { display: flex; gap: 14px; font-size: 13px; color: #cfd8c8; flex-wrap: wrap; } #nmx .nm-d-meta b { color: #ffcb45; }
@media (min-width: 700px) { #nmx .nm-gslots { grid-template-columns: repeat(4, 1fr); } }
/* Local hero skill feedback; dimensions and lifetime do not enter combat calculations. */
.nm-hero-vfx{position:absolute;pointer-events:none;z-index:3;transform:translate(-50%,-50%)}
.nm-hero-vfx-orb{width:76px;height:34px;border:2px solid #c99cff;border-radius:50%;background:radial-gradient(ellipse,#0c041a 12%,#652c87 55%,transparent 72%);box-shadow:0 0 12px #7a4eb8}
.nm-hero-vfx-summon{width:78px;height:86px;transform:translate(-50%,-100%);filter:drop-shadow(0 0 4px #8ab7ed)}
.nm-hero-vfx-summon img{width:100%;height:100%;object-fit:contain}
.nm-hero-vfx-dragon{width:90px;height:40px;border-radius:65% 30%;background:radial-gradient(ellipse at 20% 50%,#fff5b1,#ff9b28 35%,#da3b1e 60%,transparent 72%)}
/* New-mode summon/chest screens reuse the existing inventory panels and buttons. */
#nmx .nm-chests{padding-bottom:24px;overflow-x:hidden}
#nmx .nm-chest-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
#nmx .nm-chests .nm-btn,#nmx .nm-chests .nm-bt{min-height:46px;white-space:normal;line-height:1.3;overflow-wrap:anywhere}
#nmx .nm-chest-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
#nmx .nm-chest-card{margin:0;min-width:0}
#nmx .nm-chest-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:12px 0}
#nmx .nm-chest-actions .nm-btn,#nmx .nm-chest-actions .nm-bt{width:100%}
#nmx .nm-chest-card p{font-size:14px;line-height:1.5;margin:10px 0}
#nmx .nm-chest-card .nm-slot-head img{width:48px;height:48px;object-fit:contain}
#nmx .nm-chests details{margin-top:14px}
#nmx .nm-chests summary{cursor:pointer;padding:12px 0;min-height:44px;font-weight:800;color:#ffe2a0;line-height:1.4}
#nmx .nm-chest-odds{list-style:none;padding:0;font-size:13px}
#nmx .nm-chest-odds li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #435440}
#nmx .nm-chest-odds b{white-space:nowrap;color:#f4d38e}
#nmx .nm-chest-choices{display:flex;flex-direction:column;gap:8px;margin:10px 0}
#nmx .nm-chest-receipt{border-left:4px solid #e7b946;margin-bottom:16px}
#nmx .nm-chest-receipt ul{list-style:none;margin:0;padding:0 8px 0 0;width:100%;min-width:0;max-height:220px;overflow-y:auto;scrollbar-gutter:stable}
#nmx .nm-chest-receipt li{display:flex;align-items:center;gap:8px;width:100%;min-width:0;padding:8px 0;font-size:14px;line-height:1.4}
#nmx .nm-chest-receipt li span{flex:1 1 0;min-width:0;overflow-wrap:anywhere}
#nmx .nm-chest-receipt li img{flex:none;width:40px;height:40px;object-fit:contain}
#nmx .nm-chest-receipt li b{flex:none;white-space:nowrap;color:#ffe2a0}
#nmx .nm-chest-message{font-size:14px;color:#e3e9c8;line-height:1.5}
#nmx .nm-chests button:focus-visible,#nmx .nm-chests summary:focus-visible{outline:2px solid #ffda78;outline-offset:3px}
@media(min-width:760px){#nmx .nm-chest-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#nmx .nm-chest-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Z-037: visual clarity for heroes and equipment rewards. */
#nmx .nm-roster .nm-btn:disabled, #nmx .nm-chests button:disabled { background:#1a221e; border-color:#35453c; color:#9fb0a4; cursor:default; }
#nmx .nm-roster .nm-btn:enabled, #nmx .nm-chests .nm-btn:enabled { border-color:#6a8b70; }
#nmx .nm-roster-card.locked img { filter:saturate(.35); opacity:.7; }
#nmx .nm-roster-card.selected { box-shadow:inset 0 -4px #7ccf5a; }
#nmx .nm-roster-card.preview { outline:2px solid #ffd25e; outline-offset:-2px; }
#nmx .nm-roster-card small { text-align:center; line-height:1.4; }
#nmx .nm-hero-locked-label { display:block; color:#cdbf98; }
#nmx .nm-hero-rarity { background:#101b14; border:1px solid currentColor; }
#nmx .nm-hero-rarity.r1 { color:#5ee07a; }
#nmx .nm-hero-rarity.r2 { color:#5e8bff; }
#nmx .nm-hero-rarity.r3 { color:#c07bff; }
#nmx .nm-hero-rarity.r4 { color:#ff6b4a; }
#nmx .nm-hero-rarity.r5 { color:#fdf1d0; }
#nmx .nm-hero-detail > .nm-slot-head { position:sticky; top:-2px; z-index:2; background:#16211b; padding:8px 0; border-bottom:1px solid #3d5a4a; }
#nmx .nm-hero-detail > .nm-slot-head b { min-width:0; overflow-wrap:anywhere; }
#nmx .nm-hero-source button:disabled { border-style:dashed; }
#nmx .nm-chest-nav [aria-current="page"] { color:#ffd25e; border-color:#ffd25e; box-shadow:inset 0 -3px #ffd25e; }
#nmx .nm-chest-message:empty { display:none; }
#nmx .nm-chest-receipt { margin-bottom:4px; gap:8px; }
#nmx .nm-chest-receipt h4, #nmx .nm-chest-card p, #nmx .nm-chests .nm-slot h4 { margin:0; }
#nmx .nm-chest-receipt ul { max-height:none; overflow:visible; scrollbar-gutter:auto; }
#nmx .nm-chest-receipt details { min-width:0; }
#nmx .nm-chest-receipt summary { min-height:44px; padding:12px 0; cursor:pointer; font-weight:800; }
#nmx .nm-chest-guarantee { border-left:3px solid #b8ec77; padding:8px 10px; background:#101b14; }
#nmx .nm-chest-receipt li { max-width:640px; }
#nmx .nm-roster .nm-stats { max-width:640px; }

/* Approved open-sided slime arena, new campaign world 1. */
html body.slime-open-scene #bg .layer.far { filter:none; image-rendering:pixelated; }
html body.slime-open-scene #bg .layer.far::before,
html body.slime-open-scene #bg .layer.far::after,
html body.slime-open-scene .road-fx { display:none; }

/* Approved v07 actor size. Keep movement containers and readable HP bars intact. */
html body.nm #slime { scale:.7; translate:6.45px 10.5px; }
html body.nm .mon > .art { scale:.7 !important; transform-origin:50% 100%; }

/* Z-042: reference composition inside the existing speed2 frame. */
html body.nm #info-modal.speed2 .info-card { max-height:calc(100dvh - 32px); overflow-y:auto; }
html body.nm #info-modal.speed2 .sp-access { background:rgba(12,24,18,.97); padding:12px; border-radius:8px; }
html body.nm #info-modal.speed2 .info-speed h3 { font-size:25px; }
html body.nm #info-modal.speed2 .sp-badge { width:82px; height:82px; margin:14px auto 20px; display:grid; place-items:center; }
html body.nm #info-modal.speed2 .sp-badge b { font-size:38px; }
html body.nm #info-modal.speed2 .sp-access section { padding:12px 10px; margin:10px 0; border:1px solid #7c6343; border-radius:8px; background:#17211c; }
html body.nm #info-modal.speed2 .sp-access h4 { margin:0 0 8px; color:#fdf1d0; font-size:17px; }
html body.nm #info-modal.speed2 .sp-access p { margin:8px 0; font-size:13px; line-height:1.4; }
html body.nm #info-modal.speed2 .sp-action { width:100%; min-height:44px; border:1px solid #9fc467; border-radius:6px; padding:10px; background:#315b27; color:#fdf1d0; font:800 15px 'Rubik',sans-serif; cursor:pointer; }
html body.nm #info-modal.speed2 .sp-action:disabled { background:#28332b; border-color:#65765a; color:#b8c4b2; cursor:default; }
html body.nm #info-modal.speed2 .sp-seg { grid-template-columns:repeat(2,1fr); }
html body.nm #info-modal.speed2 .sp-opt:disabled { opacity:.45; cursor:default; }
html body.nm #info-modal.speed2 .sp-time { color:#ffd23f; }
html body.nm :is(#speed-btn,#h2-speed-t) { white-space:pre-line; font-size:12px; line-height:1.1; }
html body.nm #info-modal.speed2 button:focus-visible { outline:2px solid #ffda78; outline-offset:3px; }
@media (orientation:landscape) and (max-height:560px) {
  html body.nm #info-modal.speed2 .info-card { width:min(92vw,720px); padding:8px 12px; }
  html body.nm #info-modal.speed2 .sp-access { display:grid; grid-template-columns:60px 1fr 1fr; gap:6px 12px; padding:8px; }
  html body.nm #info-modal.speed2 .sp-access h3 { grid-column:1/-1; margin:0; }
  html body.nm #info-modal.speed2 .sp-badge { grid-column:1; width:44px; height:44px; margin:auto; }
  html body.nm #info-modal.speed2 .sp-badge b { font-size:26px; }
  html body.nm #info-modal.speed2 .sp-access section { margin:4px 0; padding:8px; }
  html body.nm #info-modal.speed2 .sp-access h4 { font-size:15px; margin:0 0 6px; }
  html body.nm #info-modal.speed2 .sp-access p { font-size:12px; margin:5px 0; }
  html body.nm #info-modal.speed2 .sp-opt { height:44px; }
  html body.nm #info-modal.speed2 .sp-seg { margin:0; grid-column:1/-1; }
  html body.nm #info-modal.speed2 #speed-message { grid-column:1/-1; margin:0; }
}

/* Z-044: skill ad confirmation, existing chest art and new-mode window palette. */
body.hud2 #nm-ad-confirm { box-sizing:border-box; width:min(440px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); margin:auto; padding:16px; overflow-y:auto; border:2px solid #b7a369; border-radius:14px; background:#16221b; color:#f1f3e5; box-shadow:0 12px 50px #000a; font:800 14px/1.45 'Rubik','Nunito',sans-serif; }
#nm-ad-confirm::backdrop { background:rgba(0,0,0,.78); }
#nm-ad-confirm header { display:flex; align-items:center; gap:8px; }
#nm-ad-confirm h3 { flex:1; margin:0; text-align:center; font-size:22px; color:#ffe2a0; }
#nm-ad-confirm button { box-sizing:border-box; min-height:46px; padding:8px 12px; border:2px solid #557447; border-radius:9px; font:inherit; color:inherit; cursor:pointer; }
#nm-ad-confirm [data-card-ad-close] { flex:none; width:46px; padding:0; background:#263c2b; font-size:22px; }
#nm-ad-confirm .nm-ad-confirm-art { display:grid; place-items:center; height:126px; margin:12px 0; border:1px solid #557447; border-radius:9px; background:radial-gradient(ellipse,#66542b,#1c2b1e 70%); }
#nm-ad-confirm .nm-ad-confirm-art img { width:112px; height:112px; object-fit:contain; image-rendering:pixelated; }
#nm-ad-confirm-description { margin:0 0 14px; padding:10px; border-radius:8px; background:#101b14; text-align:center; }
#nm-ad-confirm .nm-ad-confirm-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#nm-ad-confirm [data-card-ad-cancel] { background:#713d34; border-color:#b66a55; }
#nm-ad-confirm [data-card-ad-confirm] { background:#24516b; border-color:#66a9c3; }
#nm-ad-confirm [data-card-ad-confirm] span { display:inline-grid; place-items:center; min-width:28px; margin-left:4px; color:#ffdf72; }
#nm-ad-confirm .nm-ad-confirm-unavailable { display:flex; align-items:center; gap:10px; margin-top:16px; padding:10px; border:1px solid #435346; border-radius:9px; background:#101b14; }
#nm-ad-confirm .nm-ad-confirm-unavailable div { flex:1; min-width:0; }
#nm-ad-confirm .nm-ad-confirm-unavailable b,#nm-ad-confirm .nm-ad-confirm-unavailable span { display:block; }
#nm-ad-confirm .nm-ad-confirm-unavailable span { font-size:12px; color:#9fac9f; }
#nm-ad-confirm button:disabled { background:#26302a; border-color:#435346; color:#8d9a8f; cursor:default; }
#nm-ad-confirm button:focus-visible { outline:3px solid #ffe2a0; outline-offset:2px; }
@media(max-height:500px) { body.hud2 #nm-ad-confirm { width:min(520px,calc(100vw - 40px)); padding:10px 14px; } #nm-ad-confirm h3 { font-size:19px; } #nm-ad-confirm .nm-ad-confirm-art { height:54px; margin:6px 0; } #nm-ad-confirm .nm-ad-confirm-art img { width:52px; height:52px; } #nm-ad-confirm-description { margin-bottom:8px; padding:6px; } #nm-ad-confirm .nm-ad-confirm-unavailable { margin-top:8px; padding:6px 10px; } }

/* Z-050: immutable lethal-hit details, using the existing results card palette. */
body.nm #results.rr .rr-fatal { min-width:0; padding:10px 12px; border:1px solid #8a6355; border-radius:12px; background:#1e1c15; color:#e8efe0; font:700 13px/1.4 'Nunito',sans-serif; }
body.nm #results.rr .rr-fatal[hidden],body.nm #results.rr .rr-fatal [hidden] { display:none !important; }
body.nm #results.rr .rr-fatal h4 { margin:0 0 6px; font:900 12px/1.3 'Nunito',sans-serif; color:#f2b49d; text-transform:uppercase; letter-spacing:.04em; }
body.nm #results.rr .rr-fatal p { margin:3px 0; min-width:0; white-space:normal; overflow-wrap:anywhere; }
body.nm #results.rr .rr-fatal-numbers { display:flex; flex-wrap:wrap; gap:0 14px; }
body.nm #results.rr .rr-fatal b { color:#fff; font-variant-numeric:tabular-nums; }
body.nm #results.rr #results-fatal-shield { color:#b9c4ad; font-size:12px; }
body.nm #results.rr.has-fatal-hit .rr-actions { position:sticky; bottom:0; z-index:2; padding:8px 0; background:#0d160c; }
@media (orientation:landscape) and (max-height:560px) {
  html body.nm #results.rr.has-fatal-hit .rr-panel { grid-template-rows:auto auto auto auto 1fr; grid-template-areas:"head head head" "fatal fatal fatal" "hero stats dmg" "reward stats items" "actions stats items"; }
  html body.nm #results.rr .rr-fatal { grid-area:fatal; padding:6px 10px; }
  body.nm #results.rr .rr-fatal h4 { margin-bottom:2px; }
}

/* Ludo experiment: reuse the existing settings row, typography and button tokens. */
.ludo-setting > span { min-width:0; }
.ludo-setting .settings-note { display:block; max-width:32ch; white-space:normal; }
html body .ludo-setting [data-ludo-toggle] { flex-shrink:0; min-width:64px; min-height:44px !important; }
.ludo-setting [data-ludo-toggle]:focus-visible { outline:2px solid currentColor; outline-offset:3px; }

/* Z-056: approved new-mode menu 46:1717. Original controls retain their listeners. */
html body.nm #m2 { background:#174139 url(assets/ui/menu-v04/ArtworkBackground.png) center/cover no-repeat; }
html body.nm #m2 > :not(#nm-approved-menu) { display:none !important; }
html body.nm #nm-approved-menu { position:absolute; overflow:hidden; font:700 13px/1.2 'Rubik','Nunito',sans-serif; color:#fff6dd; }
html body.nm #nm-approved-menu > * { position:absolute; box-sizing:border-box; }
html body.nm #nm-approved-menu .nmam-bg { inset:0; width:100%; height:100%; object-fit:cover; }
html body.nm #nm-approved-menu img { pointer-events:none; }
html body.nm #nm-approved-menu button { border:0; padding:0; margin:0; border-radius:0; background:none; box-shadow:none; transform:none; filter:none; cursor:pointer; font:inherit; color:inherit; text-transform:none; }
html body.nm #nm-approved-menu button::before,html body.nm #nm-approved-menu button::after { display:none !important; }
html body.nm #nm-approved-menu .m2-frame { display:none !important; }
html body.nm #nm-approved-menu button:focus-visible { outline:3px solid #fff0a3; outline-offset:-3px; border-radius:10px; }
html body.nm #nm-approved-menu button:active { filter:brightness(.88); }
html body.nm #nm-approved-menu .nmam-wallets { display:flex; align-items:center; gap:8px; }
html body.nm #nm-approved-menu .nmam-wallet { display:flex; align-items:center; gap:6px; height:36px; min-width:82px; max-width:130px; padding:0 8px 0 6px; border:1.5px solid #3f6676; border-radius:18px; background:#0a2c3fed; }
html body.nm #nm-approved-menu .nmam-wallet img { flex:none; width:32px; height:32px; object-fit:contain; }
html body.nm #nm-approved-menu #m2-gold,html body.nm #nm-approved-menu #m2-crystals { position:static; display:block; margin:0; padding:0; font:700 20px/1.2 'Rubik',sans-serif; color:#fff8e8; white-space:nowrap; }
html body.nm #nm-approved-menu #nm-menu-settings { position:static; flex:none; margin-left:auto; width:44px; height:44px; display:grid; place-items:center; }
html body.nm #nm-approved-menu #nm-menu-settings img { width:48px; height:44px; object-fit:contain; }
html body.nm #nm-approved-menu #m2-more { display:grid; place-items:center; min-width:44px; min-height:44px; border:1px solid #3c7281; border-radius:12px; background:#102b31f2; font-size:30px; }
html body.nm #nm-approved-menu #m2-more b { font:inherit; line-height:1; }
html body.nm #nm-approved-menu .nmam-logo { object-fit:contain; }
html body.nm #nm-approved-menu #m2-hero-btn { display:grid; place-items:center; overflow:visible; }
html body.nm #nm-approved-menu #m2-hero { position:static; width:100%; height:100%; object-fit:contain; transform:none; filter:none; image-rendering:auto; }
html body.nm #nm-approved-menu #m2-say { display:none; }
html body.nm #nm-approved-menu .nmam-name,html body.nm #nm-approved-menu .nmam-power,html body.nm #nm-approved-menu .nmam-record { display:flex; align-items:center; justify-content:center; text-align:center; white-space:nowrap; }
html body.nm #nm-approved-menu .nmam-name { display:none; }
html body.nm #nm-approved-menu #m2-form { font:inherit; }
html body.nm #nm-approved-menu .nmam-power { background:#13271c9e; border-radius:12px; font-size:15px; }
html body.nm #nm-approved-menu .nmam-record { font-size:12px; font-weight:500; }
html body.nm #nm-approved-menu .nmam-chapter { display:flex; align-items:center; gap:4px; padding:0 20px; }
html body.nm #nm-approved-menu .nmam-chapter-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
html body.nm #nm-approved-menu .nmam-thumbnail { position:relative; width:44px; height:64px; flex:none; border:1px solid #dbbb6d; border-radius:8px; object-fit:cover; }
html body.nm #nm-approved-menu .nmam-chapter-text { position:relative; display:flex; flex-direction:column; justify-content:center; gap:3px; width:112px; min-width:0; height:66px; font-weight:700; color:#fff1d7; }
html body.nm #nm-approved-menu #m2-world { font:700 13px/1.2 'Rubik',sans-serif; }
html body.nm #nm-approved-menu #m2-wsub { font:700 12px/1.2 'Rubik',sans-serif; }
html body.nm #nm-approved-menu .nmam-boss { font:500 11px/1.2 'Rubik',sans-serif; overflow-wrap:anywhere; }
html body.nm #nm-approved-menu #m2-go { display:flex; align-items:center; justify-content:center; gap:5px; }
html body.nm #nm-approved-menu .nmam-play-art { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
html body.nm #nm-approved-menu .nmam-attack { display:none; }
html body.nm #nm-approved-menu #m2-go-label { position:relative; color:#793904; font:800 var(--entry-font,20px)/1.2 'Rubik',sans-serif; text-transform:uppercase; text-shadow:0 1px #fff89a99; }
html body.nm #nm-approved-menu.nmam-running #m2-go-label { font-size:17px; text-transform:none; }
html body.nm #nm-approved-menu #m2-go-sub { display:none; }
html body.nm #nm-approved-menu #m2-quit { display:flex; align-items:center; justify-content:center; font-size:12px; background:#10251ebf; border-radius:12px; }
html body.nm #nm-approved-menu #m2-quit[hidden] { display:none !important; }
html body.nm #nm-approved-menu .nmam-dock { display:flex; align-items:stretch; }
html body.nm #nm-approved-menu .nmam-footer { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
html body.nm #nm-approved-menu .m2-sect { position:relative; inset:auto; flex:1 1 0; min-width:0; height:100%; width:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
html body.nm #nm-approved-menu .m2-sect img { width:82px; height:78px; object-fit:contain; }
html body.nm #nm-approved-menu .m2-sect b { position:static; font:700 13px/1.2 'Rubik',sans-serif; color:#b8d4df; text-shadow:none; white-space:nowrap; }
html body.nm #nm-approved-menu .m2-badge { position:absolute; top:6px; right:6px; }
html body.nm #nm-approved-menu.nmam-wide .m2-sect img { width:58px; height:54px; }
html body.nm #nm-approved-menu.nmam-wide .m2-sect { gap:2px; }

html body.nm #nm-approved-menu,html body.nm #nm-approved-menu * { -webkit-text-stroke:0; letter-spacing:normal; }
html body.nm #nm-approved-menu img { image-rendering:auto !important; }
html body.nm #nm-approved-menu #m2-go { flex-direction:row; }
html body.nm #nm-approved-menu #m2-go-label { -webkit-text-stroke:0; }

html body.nm #nm-approved-menu #m2-gold,html body.nm #nm-approved-menu #m2-crystals { border:0; background:none; box-shadow:none; }
html body.nm #nm-approved-menu #m2-gold::before { display:none; }
html body.nm #nm-approved-menu.nmam-running .nmam-attack { width:24px; height:24px; }
html body.nm #nm-approved-menu.nmam-wide .nmam-play-art { object-fit:fill; }
@media (max-width:383px) { html body.nm #nm-approved-menu.nmam-running #m2-go-label { font-size:15px; } }

/* Z-052 — approved chapter rewards 55:1759. Scope: new only. */
body.nm .nme-dialog { box-sizing:border-box; width:calc(100% - 32px); max-width:361px; min-height:450px; max-height:calc(100dvh - var(--sa-top,0px) - var(--sa-bottom,0px) - 24px); margin:auto; padding:16px; overflow:auto; border:2px solid #ffca24; border-radius:18px; background:#143d49; box-shadow:0 10px 25px #0009,inset 0 -5px 8px #010a0e80; color:#fff8e8; font:500 14px/1.25 'Rubik',sans-serif; }
body.nm .nme-dialog::backdrop { background:rgba(4,19,25,.78); }
body.nm .nme-dialog * { box-sizing:border-box; letter-spacing:normal; -webkit-text-stroke:0; }
body.nm .nme-dialog button,body.nm .nme-dialog select { font:inherit; color:inherit; cursor:pointer; }
body.nm .nme-dialog button:focus-visible,body.nm .nme-dialog select:focus-visible { outline:3px solid #fff0a3; outline-offset:1px; }
body.nm .nme-dialog button:disabled { cursor:default; }
body.nm .nme-heading { display:flex; align-items:center; gap:4px; height:44px; margin-bottom:12px; }
body.nm .nme-heading h2 { flex:1; margin:0; text-align:center; font:800 21px/26px 'Rubik',sans-serif; }
body.nm .nme-heading button { flex:none; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:10px; background:#102b34; }
body.nm .nme-heading img { width:28px; height:28px; }
body.nm .nme-chapter { display:flex; flex-direction:column; align-items:center; height:38px; margin-bottom:12px; }
body.nm .nme-chapter select { width:100%; border:0; background:transparent; text-align:center; font-weight:700; font-size:18px; appearance:none; padding:0; height:24px; }
body.nm .nme-chapter option { background:#143d49; color:#fff8e8; }
body.nm .nme-chapter small { font-size:12px; color:#b7d7d9; }
body.nm .nme-stages { display:flex; justify-content:center; gap:8px; height:104px; margin-bottom:12px; }
body.nm .nme-stage { flex:0 1 100px; min-width:0; position:relative; height:104px; padding:0; border:0; background:transparent; opacity:.4; }
body.nm .nme-stage.selected { opacity:1; }
body.nm .nme-stage img { position:absolute; width:86px; height:86px; top:0; left:50%; transform:translateX(-50%); pointer-events:none; }
body.nm .nme-stage strong { position:absolute; display:grid; place-content:center; top:21px; left:0; width:100%; height:46px; font-size:20px; font-weight:800; line-height:25px; text-shadow:0 2px 1px #000c; }
body.nm .nme-stage strong.nme-completion { font-size:13px; line-height:17px; }
body.nm .nme-stage small { position:absolute; left:0; bottom:0; width:100%; font-size:12px; color:#b7d7d9; }
body.nm .nme-stage i { position:absolute; top:4px; right:2px; font-style:normal; color:#a7f47c; font-size:22px; }
body.nm .nme-well { height:124px; border:1px solid #3c7281; border-radius:12px; background:#0b2731; margin-bottom:12px; padding-top:2px; }
body.nm .nme-well h3 { margin:0 0 8px; height:22px; font-size:14px; color:#b7d7d9; text-align:center; }
body.nm .nme-well > div { display:flex; gap:10px; align-items:center; justify-content:center; height:88px; }
body.nm .nme-reward { display:flex; flex-direction:column; align-items:center; justify-content:space-between; width:86px; height:88px; padding:6px 3px 3px; border:2px solid #3c7281; border-radius:10px; background:#143d49; }
body.nm .nme-reward img { width:48px; height:48px; object-fit:contain; image-rendering:auto; }
body.nm .nme-reward img[src$='.svg'] { width:46px; height:46px; }
body.nm .nme-reward b { font-size:18px; line-height:23px; }
body.nm .nme-resource-name { display:grid; place-content:center; height:48px; font-size:11px; text-align:center; }
body.nm .nme-primary { width:100%; min-height:56px; border:1.5px solid #ffe69b; border-radius:12px; background:linear-gradient(#f7d674,#e9bb4b 44%,#c58a20); box-shadow:inset 0 -2px 2px #70401080,inset 0 1px 1px #fff3b9a6; color:#07111f!important; font-size:20px!important; font-weight:800!important; }
body.nm .nme-primary:disabled { background:#294c53; color:#b7d7d9!important; border-color:#3c7281; box-shadow:none; }
body.nm .nme-condition { display:grid; place-content:center; min-height:56px; margin:0; padding:4px 8px; border-radius:10px; background:#102f38; color:#b7d7d9; text-align:center; }
body.nm .nme-message,body.nm .nme-error { margin:8px 0 0; text-align:center; color:#fff0b5; }
html body.nm #nm-approved-menu #nm-chapter-rewards-open { display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid #dbbb6d; border-radius:8px; background:#0b2731ed; z-index:6; }
html body.nm #nm-approved-menu #nm-chapter-rewards-open img { width:28px; height:28px; object-fit:contain; }
html body.nm #nm-approved-menu #nm-chapter-rewards-open small { font:700 9px/14px 'Rubik',sans-serif; color:#fff1d7; }
@media(max-width:383px) { body.nm .nme-stages { gap:5px; } body.nm .nme-heading h2 { font-size:19px; } }
@media(max-height:520px) { body.nm .nme-dialog { min-height:0; } }

/* Z-054: same Arcade tokens; original energy reference: two offers and daily row. */
body.nm .nme-energy-icon { display:inline-block; position:relative; flex:none; vertical-align:middle; }
body.nm .nme-energy-icon img { position:absolute; left:0; top:0; width:46px; height:46px; transform-origin:0 0; image-rendering:auto; }
body.nm .nme-energy-balance { display:flex; align-items:center; justify-content:center; gap:8px; min-height:32px; font-size:22px; }
body.nm .nme-energy-timer { min-height:18px; margin:4px 0 12px; text-align:center; color:#b7d7d9; font-size:12px; }
body.nm .nme-energy-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
body.nm .nme-energy-offer { display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; padding:10px; border:1px solid #3c7281; border-radius:12px; background:#0b2731; }
body.nm .nme-energy-offer h3 { margin:0; font-size:14px; color:#b7d7d9; }
body.nm .nme-energy-reward { display:flex; align-items:center; justify-content:center; gap:6px; min-height:46px; font-size:20px; }
body.nm .nme-energy-offer small { text-align:center; font-size:11px; color:#b7d7d9; }
body.nm .nme-energy-offer .nme-primary { display:flex; align-items:center; justify-content:center; gap:4px; min-height:48px; font-size:15px!important; }
body.nm .nme-energy-offer .nme-primary img { width:24px; height:24px; object-fit:contain; }
body.nm .nme-energy-offer.daily { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; }
body.nm .nme-energy-offer.daily h3 { grid-column:1/-1; }
body.nm .nme-energy-offer.daily small { grid-column:1; }
body.nm .nme-energy-offer.daily .nme-primary { grid-column:2; grid-row:2/4; }
body.nm .nme-offer-reason { margin:0; font-size:11px; color:#b7d7d9; text-align:center; }
html body.nm #nm-approved-menu .nmam-wallets { gap:6px; }
html body.nm #nm-approved-menu .nmam-wallet { flex:0 1 auto; min-width:64px; max-width:110px; }
html body.nm #nm-approved-menu #nm-energy-open { display:flex; flex:none; width:92px; max-width:92px; padding:0 4px; gap:4px; height:36px; min-height:44px; border:1.5px solid #3f6676; border-radius:18px; background:#0a2c3fed; }
html body.nm #nm-approved-menu #nm-energy-open b { font:700 15px/1.2 'Rubik',sans-serif; white-space:nowrap; }
html body.nm #nm-approved-menu #nm-energy-open img,html body.nm #nm-approved-menu #nm-entry-cost img { width:46px; height:46px; max-width:none; }
html body.nm #nm-approved-menu #nm-entry-cost { position:relative; display:flex; align-items:center; justify-content:center; gap:3px; font:800 var(--entry-font,20px)/1.2 'Rubik',sans-serif; color:#793904; text-shadow:0 1px #fff89a99; white-space:nowrap; }
html body.nm #nm-approved-menu #nm-entry-cost::before { content:'['; }
html body.nm #nm-approved-menu #nm-entry-cost::after { content:']'; }

html body.nm #nm-approved-menu.nmam-running #nm-entry-cost { display:none; }
html body.nm #nm-approved-menu.nmam-wide #nm-entry-cost { bottom:auto; }
@media(max-width:383px) { html body.nm #nm-approved-menu #m2-gold,html body.nm #nm-approved-menu #m2-crystals { font-size:16px; } }

html body.nm #nm-approved-menu #nm-energy-open { position:relative; padding-bottom:8px; }
html body.nm #nm-approved-menu #nm-energy-timer { position:absolute; bottom:1px; left:0; width:100%; text-align:center; font:500 9px/11px 'Rubik',sans-serif; color:#b7d7d9; }

body.nm #results-again [data-nme-result-cost] { display:inline-flex; align-items:center; justify-content:center; gap:2px; margin-left:5px; font-size:12px; white-space:nowrap; }
body.nm #results-again .nme-energy-icon img { width:46px; height:46px; }

/* Z-048: reference F3D81585 — full battle overlay, cyan clock, gold ad action. */
body.nm #nm-revive-dialog { position:fixed; inset:0; width:100%; max-width:none; height:100dvh; max-height:none; margin:0; padding:max(18px,var(--sa-top,0px)) max(16px,var(--sa-right,0px)) max(18px,var(--sa-bottom,0px)) max(16px,var(--sa-left,0px)); box-sizing:border-box; border:0; overflow:auto; background:transparent; color:#8be2ef; font:700 18px/1.25 'Rubik',sans-serif; }
body.nm #nm-revive-dialog::backdrop { background:linear-gradient(#000e,#000e 58%,#031a30f2); }
body.nm #nm-revive-dialog * { box-sizing:border-box; -webkit-text-stroke:0; letter-spacing:normal; }
body.nm #nm-revive-dialog .nmr-layout { width:min(100%,460px); min-height:min(560px,100%); margin:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
body.nm #nm-revive-dialog h2 { position:relative; margin:0; color:#ff565e; font:800 clamp(28px,8vw,40px)/1.15 'Rubik',sans-serif; text-shadow:0 3px 5px #000; }
body.nm #nm-revive-dialog .nmr-divider { display:flex; align-items:center; gap:8px; width:190px; height:20px; margin:10px 0 24px; color:#fff6ed; font-size:14px; }
body.nm #nm-revive-dialog .nmr-divider::before,body.nm #nm-revive-dialog .nmr-divider::after { content:''; height:1px; flex:1; background:linear-gradient(90deg,transparent,#fff6ed); }
body.nm #nm-revive-dialog .nmr-divider::after { transform:rotate(180deg); }
body.nm #nm-revive-question { margin:0 0 16px; font-size:26px; font-weight:700; }
body.nm #nm-revive-dialog .nmr-clock { position:relative; width:120px; height:120px; flex:none; }
body.nm #nm-revive-dialog .nmr-clock svg { display:block; width:120px; height:120px; transform:rotate(-90deg); overflow:visible; }
body.nm #nm-revive-dialog .nmr-clock circle { fill:none; stroke-width:8; }
body.nm #nm-revive-dialog .nmr-track { stroke:#18556344; }
body.nm #nm-revive-dialog .nmr-progress { stroke:#52c6db; stroke-dasharray:100; stroke-linecap:butt; }
body.nm #nm-revive-dialog .nmr-clock strong { position:absolute; inset:0; display:grid; place-content:center; font-size:48px; color:#8be2ef; }
body.nm #nm-revive-dialog .nmr-actions { display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:64px; }
body.nm #nm-revive-dialog button { font:700 16px/1.2 'Rubik',sans-serif; cursor:pointer; touch-action:manipulation; }
body.nm #nm-revive-dialog button:focus-visible { outline:3px solid #8be2ef; outline-offset:4px; }
body.nm #nm-revive-dialog .nmr-watch { min-width:204px; min-height:56px; display:flex; align-items:center; justify-content:center; gap:10px; border:1px solid #ffe394; border-radius:9px; padding:8px 14px; background:linear-gradient(#ffdc43,#e1ac06); box-shadow:inset 0 -3px #ae7609,0 4px 8px #0008; color:#493008; }
body.nm #nm-revive-dialog .nmr-ad { position:relative; width:32px; height:27px; display:grid; place-content:center; border:2px solid #805916; border-radius:7px; background:#a97516; color:#fff8db; font-size:18px; }
body.nm #nm-revive-dialog .nmr-ad small { position:absolute; right:-6px; bottom:-6px; color:#8be2ef; font-size:8px; text-shadow:0 1px #000; }
body.nm #nm-revive-dialog .nmr-decline { min-width:180px; min-height:44px; border:0; padding:8px 16px; background:transparent; color:#9cdeeb; }
body.nm #nm-revive-dialog button:disabled { opacity:.5; cursor:default; }
body.nm #nm-revive-dialog .nmr-message { min-height:36px; max-width:360px; margin:8px 0 0; color:#f4dca6; font-size:13px; }
@media(min-height:700px) { body.nm #nm-revive-dialog .nmr-layout { margin-top:calc((100dvh - 620px)/2); } }
@media(max-height:520px) {
 body.nm #nm-revive-dialog { padding-top:max(10px,var(--sa-top,0px)); padding-bottom:max(10px,var(--sa-bottom,0px)); }
 body.nm #nm-revive-dialog .nmr-layout { min-height:0; }
 body.nm #nm-revive-dialog h2 { font-size:28px; }
 body.nm #nm-revive-dialog .nmr-divider { height:10px; margin:6px 0 8px; }
 body.nm #nm-revive-question { font-size:22px; margin-bottom:8px; }
 body.nm #nm-revive-dialog .nmr-clock { width:84px; height:84px; }
 body.nm #nm-revive-dialog .nmr-clock svg { width:84px; height:84px; }
 body.nm #nm-revive-dialog .nmr-clock strong { font-size:34px; }
 body.nm #nm-revive-dialog .nmr-actions { margin-top:14px; gap:2px; }
 body.nm #nm-revive-dialog .nmr-watch { min-height:48px; }
 body.nm #nm-revive-dialog .nmr-message { min-height:18px; margin-top:2px; }
}

/* Yard reward milestones and feedback: existing game gold + cyan progress. */
body.nm .nm-yard-power{display:flex;align-items:center;gap:18px;margin:12px 0;padding:12px 16px;border:1px solid #67774a;border-radius:12px;background:#15251c}
body.nm .nm-yard-power>div:last-child{display:grid;gap:4px;min-width:0}
body.nm .nm-yard-power strong{font-size:30px;line-height:1.1;color:#ffe5a0;font-variant-numeric:tabular-nums}
body.nm .nm-yard-power small{color:#b2bea8;font-size:11px}
body.nm .nm-yard-portrait{width:96px;height:96px;flex:none;position:relative;display:grid;place-items:center}
body.nm .nm-yard-portrait img{width:88px;height:88px;object-fit:contain;filter:drop-shadow(0 4px 5px #0006)}
body.nm .nm-yard-portrait>span{position:absolute;opacity:0;font-size:44px;color:#69ffdd;left:2px;bottom:0;pointer-events:none;text-shadow:0 0 12px #4cffe9}
body.nm .nm-yard-portrait>span:nth-of-type(2){left:54px;animation-delay:.12s}
body.nm .nm-yard-portrait>span:nth-of-type(3){left:30px;animation-delay:.25s}
body.nm .nm-yard-upgraded .nm-yard-portrait{background:radial-gradient(ellipse,#8beac955,transparent 70%)}
body.nm .nm-yard-upgraded .nm-yard-portrait>span{animation:nm-yard-arrow .8s ease-out both}
@keyframes nm-yard-arrow{0%{opacity:0;transform:translateY(12px)}30%{opacity:.9}100%{opacity:0;transform:translateY(-50px)}}
body.nm .nm-yard-milestones{margin:12px 0;border:1px solid #68734b;padding:14px;border-radius:12px;background:#19261e}
body.nm .nm-yard-milestones .nm-slot-head{display:flex;justify-content:space-between;gap:10px}
body.nm .nm-yard-milestones progress{appearance:none;width:100%;height:12px;margin:12px 0 10px;border:1px solid #7f8659;border-radius:10px;overflow:hidden;background:#0e1713}
body.nm .nm-yard-milestones progress::-webkit-progress-bar{background:#0e1713}
body.nm .nm-yard-milestones progress::-webkit-progress-value{background:#65e4db}
body.nm .nm-yard-milestones progress::-moz-progress-bar{background:#65e4db}
body.nm .nm-yard-stages{display:flex;gap:8px}
body.nm .nm-yard-stages>div{flex:1;min-width:0;display:grid;gap:4px;text-align:center;padding:8px 4px;border:1px solid #656946;border-radius:7px;color:#e5cf92}
body.nm .nm-yard-stages b{color:#70ebdf;font-size:18px}
body.nm .nm-yard-stages span{font-size:11px;overflow-wrap:anywhere}
body.nm .nm-yard-stages small{color:#96cf7d;font-size:10px}
body.nm .nm-yard-claim{display:grid;gap:8px;margin-top:14px;padding:14px 10px;background:#30401f;border:1px solid #c5a75e;border-radius:8px;text-align:center}
body.nm .nm-yard-claim p{margin:0;color:#e8e4c8;font-size:13px}
body.nm .nm-yard-claim .nm-btn{min-height:48px;justify-content:center}
body.nm .nm-yard-claim small,body.nm .nm-yard-hold{color:#bdc7ab;font-size:11px;text-align:center}
body.nm .nm-yard-feedback{position:fixed;z-index:8000;left:50%;transform:translateX(-50%);top:max(70px,calc(var(--sa-top) + 52px));max-width:calc(100vw - 24px);width:max-content;padding:12px 24px;border-block:2px solid #e9c361;border-radius:8px;background:linear-gradient(90deg,#302615f2,#685126f5,#302615f2);box-shadow:0 4px 20px #0008;color:#e6ff9d;font-size:24px;font-weight:800;pointer-events:none}
body.nm .nm-yard-feedback[hidden]{display:none}
body.nm .nm-yard-gift{position:fixed;inset:0;z-index:8100;display:grid;place-items:center;padding:20px;background:#000c}
body.nm .nm-yard-gift>div{width:min(440px,100%);display:grid;gap:16px;padding:28px 20px;text-align:center;background:radial-gradient(ellipse at 50% 10%,#70602f,#20291e 65%);border:2px solid #c2a252;border-radius:16px;box-shadow:0 0 60px #d8bb5340}
body.nm .nm-yard-gift>div>span{font-size:80px;line-height:1;color:#62ece5;text-shadow:0 0 20px #68ffff66}
body.nm .nm-yard-gift h3{font-size:25px;color:#ffe08e;margin:0}
body.nm .nm-yard-gift p{margin:0;font-size:16px;line-height:1.5}
body.nm .nm-yard-gift small{color:#afcca0}
body.nm .nm-yard-gift button{min-height:48px}
@media(max-width:380px){body.nm .nm-yard-power{gap:10px;padding:10px}body.nm .nm-yard-portrait{width:76px;height:82px}body.nm .nm-yard-portrait img{width:74px;height:74px}body.nm .nm-yard-power strong{font-size:26px}body.nm .nm-yard-feedback{font-size:21px;padding:10px 16px}}
@media(prefers-reduced-motion:reduce){body.nm .nm-yard-upgraded .nm-yard-portrait>span{animation:none;opacity:.7}body.nm .nm-yard-upgraded .nm-yard-portrait{background:none}}

/* Rewarded low-HP heal; counters and the HP mutation live in NMAdHeal. */
#nm-ad-heal{position:fixed;right:max(12px,var(--sa-right));top:174px;z-index:1100;display:flex;align-items:center;gap:9px;min-height:56px;max-width:calc(100vw - 24px);padding:8px 12px;border:2px solid #b1d676;border-radius:12px;background:linear-gradient(#294734,#16261c);box-shadow:0 3px 12px #0008;color:#f8ffe1;text-align:left;cursor:pointer}
#nm-ad-heal[hidden],#nm-ad-heal-notice[hidden]{display:none}
#nm-ad-heal img{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 0 6px #c0f27b66)}
#nm-ad-heal span{display:grid;gap:3px}
#nm-ad-heal b{font-size:15px}
#nm-ad-heal small{font-size:11px;color:#c8eaa9}
#nm-ad-heal:disabled{opacity:.6;cursor:wait}
#nm-ad-heal:focus-visible{outline:3px solid #efffc9;outline-offset:3px}
/* Compact automatic rage meter at the hero's feet; original HUD remains in old mode. */
body.nm .h2-actions{display:none!important}
#nm-hero-rage{position:absolute;z-index:26;transform:translateX(-50%);pointer-events:none;text-align:center;color:#fff4d2;font:800 9px/10px 'Rubik',sans-serif;text-shadow:0 1px 2px #000,1px 0 #000,-1px 0 #000}
#nm-hero-rage[hidden],body:not(.nm) #nm-hero-rage{display:none!important}
.nm-hero-rage-bolt{position:absolute;left:-7px;top:-4px;width:12px;height:17px;fill:#ffe359;stroke:#39280d;stroke-width:1.5;filter:drop-shadow(0 1px 1px #000)}
.nm-hero-rage-track{display:block;margin-left:6px;height:5px;box-sizing:border-box;overflow:hidden;border:1px solid #1b110a;border-radius:4px;background:#1c1712;box-shadow:0 0 0 1px #bea05d,0 2px 3px #0008}
.nm-hero-rage-track i{display:block;width:calc(var(--rage,0)*100%);height:100%;background:linear-gradient(#ffe68c,#ff9c32)}
#nm-hero-rage b{display:block;font:inherit;margin-top:3px}
#nm-hero-rage.active .nm-hero-rage-track{box-shadow:0 0 0 1px #ffd472,0 0 6px #f64b27}
#nm-hero-rage.active i{background:linear-gradient(#ffb955,#f34b24)}
#nm-ad-heal-notice{position:fixed;z-index:8200;left:50%;top:40%;transform:translate(-50%,-50%);max-width:calc(100vw - 32px);padding:12px 18px;background:#193c26f5;border:1px solid #a4d66f;border-radius:10px;color:#e9ffbd;font-weight:750;pointer-events:none;text-align:center;box-shadow:0 4px 20px #0008}

/* Battle inventory: five item icons plus the bag in new mode. */
body.nm .h2-inv #h2-items{display:none}
body.nm .h2-inv #h2-slots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;width:100%;margin:0}
body.nm .h2-inv .h2-slot{width:100%;height:auto;aspect-ratio:1;min-width:0}

/* Ordinary white hits: half size, lighter weight; keep critical/status hierarchy. */
html body.nm .float:not(.crit):not(.core):not(.mega):not(.enemy):not(.word):not(.tick):not([class*=" t-"]){--fs:9.5px;font-weight:400!important;-webkit-text-stroke:.65px var(--fo);text-shadow:0 1px 1px #0009}

/* Smaller translucent toxic mist in the DOM fallback. */
body.nm .fx-toxic{width:27px;height:20px;background:radial-gradient(circle at 40% 45%,rgba(170,255,110,.25),rgba(80,200,60,.16) 45%,transparent 70%)}
body.nm .fx-toxic.big{width:60px;height:40px}

/* EXP-CARD-2OF2: approved skill-card palette, native modal and fixed actions. */
[data-card-fusion-setting][hidden],body:not(.nm) [data-card-fusion-setting]{display:none!important}
.card-fusion-setting .settings-note{display:block;white-space:normal}
.card-fusion-setting [data-card-fusion-status]:empty{display:none}
.card-fusion-setting [data-card-fusion-status]{color:#ffc2aa}
#nm-card-fusion-dialog{--ncf-ink:#04172c;--ncf-paper:#f8edc8;color:var(--ncf-paper);width:min(640px,calc(100% - 24px));max-width:none;max-height:calc(100dvh - max(12px,var(--sa-top,0px)) - max(12px,var(--sa-bottom,0px)));padding:0;margin:auto;border:3px solid #183d57;background:#04172c url('assets/ui/skill-choice/background-faint-pixel-clusters-ghost-pixels-stair-diagonal.svg') center/cover;box-shadow:0 0 0 3px #020e1d,0 16px 72px #000b;font-family:'GS Skill Rubik',sans-serif;overflow:hidden}
#nm-card-fusion-dialog::backdrop{background:#000b}
#nm-card-fusion-dialog .ncf-window{display:flex;flex-direction:column;gap:16px;max-height:calc(100dvh - max(24px,var(--sa-top,0px)) - max(24px,var(--sa-bottom,0px)));padding:16px;box-sizing:border-box}
#nm-card-fusion-dialog .ncf-head{display:flex;align-items:center;gap:12px;flex:none}
#nm-card-fusion-dialog h2{flex:1;margin:0;font:800 30px/1.1 'GS Skill Condensed',sans-serif;color:#ffe34b;overflow-wrap:anywhere;text-wrap:balance}
#nm-card-fusion-dialog [data-ncf="close"][aria-label]{width:44px;min-width:44px;height:44px;padding:0;font-size:28px;line-height:1;background:#173b53;border:2px solid #5d8795;color:var(--ncf-paper)}
#nm-card-fusion-dialog .ncf-scroll{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scroll-padding:12px}
#nm-card-fusion-dialog .ncf-card{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px 12px;padding:14px;background:#d1d0be;color:var(--ncf-ink);border:4px solid #aaa996;box-shadow:inset 3px 3px #e6e3cc,inset -3px -3px #858c85;box-sizing:border-box}
#nm-card-fusion-dialog .ncf-card img{width:64px;height:64px;object-fit:contain;image-rendering:pixelated;background:#04172c}
#nm-card-fusion-dialog h3{margin:0 0 5px;font:800 27px/1.05 'GS Skill Condensed',sans-serif;overflow-wrap:anywhere;text-wrap:balance}
#nm-card-fusion-dialog .ncf-card span{font-size:14px;color:#365063}
#nm-card-fusion-dialog .ncf-card p{grid-column:1/-1;margin:0;font:400 15px/1.4 'GS Skill Rubik',sans-serif;overflow-wrap:anywhere}
#nm-card-fusion-dialog .ncf-pair{display:flex;align-items:center;gap:12px;margin:16px 0 12px;font-weight:700}
#nm-card-fusion-dialog .ncf-pair img{width:44px;height:44px;object-fit:contain;image-rendering:pixelated}
#nm-card-fusion-dialog .ncf-pair small{display:block;font-size:13px;font-weight:400;color:#a8c5d6}
#nm-card-fusion-dialog #ncf-description{margin:0;font-size:15px;line-height:1.45;overflow-wrap:anywhere}
#nm-card-fusion-dialog .ncf-status{min-height:1.4em;margin:14px 0 0;color:#ffe34b;font-size:14px;line-height:1.4}
#nm-card-fusion-dialog .ncf-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:10px;flex:none}
#nm-card-fusion-dialog .ncf-actions button{min-height:56px;padding:10px 9px;border:3px solid #46728a;box-shadow:inset 2px 2px #79959a,inset -2px -2px #04172c;background:#173b53;color:var(--ncf-paper);font:700 19px/1.12 'GS Skill Condensed',sans-serif;overflow-wrap:anywhere;white-space:normal}
#nm-card-fusion-dialog .ncf-actions .ncf-primary{color:#031c23;border-color:#00749f;background:#08c6ed;box-shadow:inset 2px 2px #7ceeff,inset -2px -2px #0081aa}
#nm-card-fusion-dialog button:disabled{opacity:.55;cursor:default}
#nm-card-fusion-dialog button:focus-visible{outline:3px solid #ffe34b;outline-offset:3px}
@media(orientation:landscape) and (max-height:520px){#nm-card-fusion-dialog .ncf-window{padding:12px;gap:10px}#nm-card-fusion-dialog .ncf-card{grid-template-columns:52px minmax(0,1fr);padding:10px}#nm-card-fusion-dialog .ncf-card img{width:52px;height:52px}#nm-card-fusion-dialog .ncf-pair{margin:12px 0 8px}}

#nm-card-fusion-dialog *{font-family:'GS Skill Rubik',sans-serif!important}
#nm-card-fusion-dialog :is(h2,h3,.ncf-actions button){font-family:'GS Skill Condensed',sans-serif!important}
#nm-card-fusion-dialog :is(#ncf-description,.ncf-card p){font-weight:400!important}

/* CURSED-CARDS: UI only, existing approved dialog language. */
[data-card-curses-setting][hidden],body:not(.nm) [data-card-curses-setting]{display:none!important}
.card-curses-setting .settings-note{display:block;white-space:normal}
.card-curses-setting [data-card-curses-status]:empty{display:none}
.card-curses-setting [data-card-curses-status]{color:#ffc2aa}
#nm-card-curses-dialog{--ncc-ink:#04172c;--ncc-paper:#f8edc8;color:var(--ncc-paper);width:min(640px,calc(100% - 24px));max-width:none;max-height:calc(100dvh - max(12px,var(--sa-top,0px)) - max(12px,var(--sa-bottom,0px)));padding:0;margin:auto;border:3px solid #183d57;background:#04172c url('assets/ui/skill-choice/background-faint-pixel-clusters-ghost-pixels-stair-diagonal.svg') center/cover;box-shadow:0 0 0 3px #020e1d,0 16px 72px #000b;font-family:'GS Skill Rubik',sans-serif;overflow:hidden}
#nm-card-curses-dialog::backdrop{background:#000b}
#nm-card-curses-dialog .ncc-window{display:flex;flex-direction:column;gap:16px;max-height:calc(100dvh - max(24px,var(--sa-top,0px)) - max(24px,var(--sa-bottom,0px)));padding:16px;box-sizing:border-box}
#nm-card-curses-dialog .ncc-head{display:flex;align-items:center;gap:12px;flex:none}
#nm-card-curses-dialog h2{flex:1;margin:0;font:800 30px/1.1 'GS Skill Condensed',sans-serif;color:#ffe34b;overflow-wrap:anywhere;text-wrap:balance}
#nm-card-curses-dialog [data-ncc="close"][aria-label]{width:44px;min-width:44px;height:44px;padding:0;font-size:28px;line-height:1;background:#173b53;border:2px solid #5d8795;color:var(--ncc-paper)}
#nm-card-curses-dialog .ncc-scroll{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scroll-padding:12px}
#nm-card-curses-dialog .ncc-card{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px 12px;padding:14px;background:#d1d0be;color:var(--ncc-ink);border:4px solid #aaa996;box-shadow:inset 3px 3px #e6e3cc,inset -3px -3px #858c85;box-sizing:border-box}
#nm-card-curses-dialog .ncc-card img{width:64px;height:64px;object-fit:contain;image-rendering:pixelated;background:#04172c}
#nm-card-curses-dialog h3{margin:0 0 5px;font:800 27px/1.05 'GS Skill Condensed',sans-serif;overflow-wrap:anywhere;text-wrap:balance}
#nm-card-curses-dialog .ncc-card span{font-size:14px;color:#365063}
#nm-card-curses-dialog .ncc-card p{grid-column:1/-1;margin:0;font:400 15px/1.4 'GS Skill Rubik',sans-serif;overflow-wrap:anywhere}
#nm-card-curses-dialog .ncc-pair{display:flex;align-items:center;gap:12px;margin:16px 0 12px;font-weight:700}
#nm-card-curses-dialog .ncc-pair img{width:44px;height:44px;object-fit:contain;image-rendering:pixelated}
#nm-card-curses-dialog .ncc-pair small{display:block;font-size:13px;font-weight:400;color:#a8c5d6}
#nm-card-curses-dialog #ncc-description{margin:0;font-size:15px;line-height:1.45;overflow-wrap:anywhere}
#nm-card-curses-dialog .ncc-status{min-height:1.4em;margin:14px 0 0;color:#ffe34b;font-size:14px;line-height:1.4}
#nm-card-curses-dialog .ncc-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:10px;flex:none}
#nm-card-curses-dialog .ncc-actions button{min-height:56px;padding:10px 9px;border:3px solid #46728a;box-shadow:inset 2px 2px #79959a,inset -2px -2px #04172c;background:#173b53;color:var(--ncc-paper);font:700 19px/1.12 'GS Skill Condensed',sans-serif;overflow-wrap:anywhere;white-space:normal}
#nm-card-curses-dialog .ncc-actions .ncc-primary{color:#031c23;border-color:#00749f;background:#08c6ed;box-shadow:inset 2px 2px #7ceeff,inset -2px -2px #0081aa}
#nm-card-curses-dialog button:disabled{opacity:.55;cursor:default}
#nm-card-curses-dialog button:focus-visible{outline:3px solid #ffe34b;outline-offset:3px}
@media(orientation:landscape) and (max-height:520px){#nm-card-curses-dialog .ncc-window{padding:12px;gap:10px}#nm-card-curses-dialog .ncc-card{grid-template-columns:52px minmax(0,1fr);padding:10px}#nm-card-curses-dialog .ncc-card img{width:52px;height:52px}#nm-card-curses-dialog .ncc-pair{margin:12px 0 8px}}

#nm-card-curses-dialog *{font-family:'GS Skill Rubik',sans-serif!important}
#nm-card-curses-dialog :is(h2,h3,.ncc-actions button){font-family:'GS Skill Condensed',sans-serif!important}
#nm-card-curses-dialog :is(#ncc-description,.ncc-card p){font-weight:400!important}

#nm-card-curses-dialog #ncc-description h3{margin:16px 0 12px;color:#ffe34b;font-size:25px}
#nm-card-curses-dialog #ncc-description h4{margin:14px 0 5px;font-size:15px;font-weight:700}
#nm-card-curses-dialog #ncc-description p{margin:0;font-weight:400;line-height:1.45}
#nm-card-curses-dialog #ncc-description .ncc-terms{margin-top:16px;color:#a8c5d6;font-size:13px}

/* Selected curse: independent HUD badge; rarity and 2/2 stay unchanged. */
body.nm #h2-slots .nm-curse-mark{position:absolute;right:3px;bottom:3px;display:grid;place-items:center;box-sizing:border-box;width:24px;height:24px;border:2px solid #190725;background:#b627ca;color:#fff4ff;box-shadow:0 0 0 1px #ff96f0,2px 2px #060817;pointer-events:none;z-index:2}
body.nm #h2-slots .nm-curse-mark svg{width:18px;height:18px;shape-rendering:crispEdges}
body.nm #h2-slots .nm-curse-mark.is-inactive{background:#51475d;color:#dfcbe5;box-shadow:0 0 0 1px #a38faa,2px 2px #060817}
body.nm #h2-slots .nm-curse-mark.is-inactive::after{content:"";position:absolute;width:25px;height:3px;background:#f4dae8;border:1px solid #302138;transform:rotate(-45deg)}

/* Approved training Figma210:2985. Scoped UI; game balance and storage unchanged. */
#nm.nm-training-rpg{background:#092331}
#nm.nm-training-rpg,#nm.nm-training-rpg *{font-family:'GS Comic Condensed','Roboto Condensed',sans-serif!important;box-sizing:border-box}
#nm.nm-training-rpg .nm-wrap{width:100%;max-width:480px;height:100%;inset:0;margin:auto;padding:max(44px,var(--sa-top,0px),env(safe-area-inset-top)) 0 max(34px,var(--sa-bottom,0px),env(safe-area-inset-bottom));gap:0;background:#092331;color:#f7e4b9;overflow:hidden}
#nm.nm-training-rpg .nm-head{height:44px;min-height:44px;gap:8px;padding:0 12px}
#nm.nm-training-rpg .nm-back{width:44px;height:44px;min-width:44px;border:0;border-radius:0;background:none;box-shadow:none}
#nm.nm-training-rpg .nm-back img{width:28px;height:28px;image-rendering:auto}
#nm.nm-training-rpg .nm-title{font-size:24px;font-weight:700;line-height:28px;color:#f7e4b9;-webkit-text-stroke:0;text-shadow:none;white-space:nowrap;letter-spacing:0}
#nm.nm-training-rpg .nm-res{min-width:66px;justify-content:flex-end}
#nm.nm-training-rpg .nm-cur{min-height:44px;gap:6px;border:0;border-radius:0;background:none;padding:0;font-size:21px;font-weight:700;color:#f7e4b9;white-space:nowrap}
#nm.nm-training-rpg .nm-cur[hidden]{display:none}
#nm.nm-training-rpg .nm-ic.coin{background-image:url('assets/ui/training/rpg-v1/art-gold-coin.png');width:24px;height:24px}
#nm.nm-training-rpg .nm-tabs{position:relative;display:grid;grid-template-columns:1.09fr .91fr 1.13fr 1fr;gap:0;height:44px;min-height:44px;padding:0 8px}
#nm.nm-training-rpg .nm-tab{height:44px;min-height:44px;min-width:0;padding:0 8px 0 4px;border:0;border-radius:0;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:2px;overflow:visible;background:var(--tab-art) center/100% 100% no-repeat;box-shadow:none;transform:none}
#nm.nm-training-rpg .nm-tab>span{min-width:0;display:flex;flex-direction:column;align-items:center}
#nm.nm-training-rpg .nm-tab b{font-size:12px;line-height:16px;font-weight:600;white-space:nowrap;color:#e5e2ce}
#nm.nm-training-rpg .nm-tab.on b{color:#092331}
#nm.nm-training-rpg .nm-tab small{font-size:10px;line-height:12px;font-weight:500;color:#a8b6b9;white-space:nowrap}
#nm.nm-training-rpg .nm-tab.off{opacity:1;filter:none}
#nm.nm-training-rpg .nm-tab[data-tab=legacy] :is(b,img){opacity:.5}
#nm.nm-training-rpg .ntr-tab-icon{display:block;width:18px;height:18px;flex:none;image-rendering:auto}
#nm.nm-training-rpg .ntr-tab-strip{pointer-events:none;position:absolute;left:8px;right:8px;top:40px;height:4px;z-index:2}
#nm.nm-training-rpg.is-yard .nm-body{display:block;flex:1;min-height:0;padding:0;overflow:hidden;background:none;border:0;border-radius:0;box-shadow:none}
#nm.nm-training-rpg img{image-rendering:auto;object-fit:contain;pointer-events:none;user-select:none}
#nm.nm-training-rpg :is(button,[tabindex]):focus-visible{outline:2px solid #ffcd65;outline-offset:2px}
#nm.nm-training-rpg .ntr-layout{--hero-h:136px;--chart-h:120px;--progress-h:166px;--active-h:142px;--stat-h:66px;--paper-pad:16px;--back-h:62px;display:grid;grid-template-rows:var(--hero-h) minmax(0,1fr);height:100%;min-height:0;position:relative}
#nm.nm-training-rpg .ntr-scene{position:relative;width:100%;height:100%;background:#513b2b;overflow:hidden}
#nm.nm-training-rpg .ntr-scene>img{position:absolute;object-fit:cover;display:block}
#nm.nm-training-rpg .ntr-scene-right{left:42.7632%;top:0;width:57.2368%;height:100%}
#nm.nm-training-rpg .ntr-scene-left-top{left:0;top:0;width:42.7632%;height:15.4762%}
#nm.nm-training-rpg .ntr-scene-left-bottom{left:0;top:15.4762%;width:42.7632%;height:84.5238%;object-position:left bottom}
#nm.nm-training-rpg .ntr-rank{position:absolute;left:10px;top:14px;width:112px;height:36px;display:flex;align-items:center;gap:5px;padding:0 8px;isolation:isolate;color:#092331}
#nm.nm-training-rpg .ntr-rank:before{content:'';position:absolute;inset:0;z-index:-1;background:#f2e3b7;border:1px solid #bca475;border-radius:4px;box-shadow:0 2px 3px #20180e38}
#nm.nm-training-rpg .ntr-rank img{width:20px;height:20px;flex:none}
#nm.nm-training-rpg .ntr-rank b{font-size:16px;font-weight:700;line-height:20px;white-space:nowrap}
#nm.nm-training-rpg .ntr-paper{position:relative;width:calc(100% - 16px);min-height:0;margin:0 auto;padding:var(--paper-pad);display:flex;flex-direction:column;justify-content:space-between;gap:0;color:#092331;isolation:isolate;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scroll-padding:12px}
#nm.nm-training-rpg .ntr-paper:before{content:'';position:absolute;inset:1px;z-index:-1;background:url('assets/ui/training/rpg-v1/vector1.png') center/100% 100% no-repeat;pointer-events:none}
#nm.nm-training-rpg .ntr-progress{flex:none;min-width:0;width:100%;height:var(--progress-h)}
#nm.nm-training-rpg .ntr-progress-head{height:28px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:22px;line-height:28px;font-weight:700}
#nm.nm-training-rpg .ntr-progress-head b{font-weight:700}
#nm.nm-training-rpg .ntr-progress-head strong{font-size:24px;line-height:28px;font-weight:700;white-space:nowrap}
#nm.nm-training-rpg .ntr-track{position:relative;width:100%;height:var(--chart-h);margin-top:6px}
#nm.nm-training-rpg .ntr-rail{position:absolute;display:block;left:4.637681%;top:39px;width:90.724638%;height:10px;object-fit:fill}
#nm.nm-training-rpg .ntr-progress-fill{position:absolute;left:4.637681%;top:41px;width:calc(90.724638% * var(--progress));height:6px;border-radius:2px;background:#4ca342;box-shadow:inset 0 1px #92ce7e;pointer-events:none}
#nm.nm-training-rpg .ntr-marker{position:absolute;left:var(--at);top:0;width:0;height:100%;font-weight:500;line-height:14px;text-align:center;color:#092331}
#nm.nm-training-rpg button.ntr-marker{min-width:44px;width:44px;height:106px;transform:translateX(-50%);padding:0;cursor:pointer;overflow:visible}
#nm.nm-training-rpg button.ntr-marker>*{left:50%}
#nm.nm-training-rpg .ntr-ring{position:absolute;left:0;top:38px;width:12px;height:12px;transform:translateX(-50%);max-width:none}
#nm.nm-training-rpg .ntr-marker.start .ntr-ring{top:34px;width:20px;height:20px}
#nm.nm-training-rpg .ntr-prize{position:absolute;left:0;top:1px;width:34px;height:34px;transform:translateX(-50%);max-width:none}
#nm.nm-training-rpg .ntr-prize.ntr-rank-prize{top:0;width:42px;height:42px}
#nm.nm-training-rpg .ntr-mark-number{position:absolute;left:0;top:56px;width:28px;transform:translateX(-50%);font-size:16px;line-height:20px;font-weight:700;text-align:center}
#nm.nm-training-rpg .ntr-mark-caption{position:absolute;left:0;top:78px;width:104px;transform:translateX(-50%);font-size:12px;line-height:14px;white-space:normal;text-align:center}
#nm.nm-training-rpg .ntr-marker.last .ntr-mark-caption{left:auto;right:-16px;width:84px;transform:none;text-align:right}
#nm.nm-training-rpg .ntr-mark-caption em{display:block;font-style:normal;font-weight:700;color:#286c32}
#nm.nm-training-rpg .ntr-marker.claimable .ntr-prize{filter:drop-shadow(0 0 4px #ffdf75)}
#nm.nm-training-rpg .ntr-marker.claimed .ntr-prize{opacity:.7}
#nm.nm-training-rpg .ntr-stats{display:flex;flex:none;flex-direction:column;gap:8px;width:100%;min-width:0}
#nm.nm-training-rpg .ntr-active{position:relative;isolation:isolate;width:100%;height:var(--active-h);min-height:127px;padding:10px 12px;display:flex;flex-direction:column;align-items:stretch;gap:3px;color:#092331}
#nm.nm-training-rpg .ntr-active:before{content:'';position:absolute;inset:0;z-index:-1;background:url('assets/ui/training/rpg-v1/cut-corners-hard-shadow-paper-grain.svg') center/100% 100% no-repeat;pointer-events:none}
#nm.nm-training-rpg .ntr-active-head{display:flex;align-items:center;gap:8px;height:54px;flex:none;min-width:0}
#nm.nm-training-rpg .ntr-seal{display:block;width:50px;height:50px;flex:none}
#nm.nm-training-rpg .ntr-active-head>.ntr-seal{width:46px;height:46px}
#nm.nm-training-rpg .ntr-active-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#nm.nm-training-rpg .ntr-active-copy b{font-size:24px;line-height:28px;font-weight:700}
#nm.nm-training-rpg .ntr-active-copy small{font-size:14px;line-height:18px;font-weight:500;white-space:nowrap}
#nm.nm-training-rpg .ntr-active-head strong{font-size:24px;font-weight:700;line-height:28px;white-space:nowrap}
#nm.nm-training-rpg .ntr-up-arrow{display:block;width:20px;height:24px;flex:none}
#nm.nm-training-rpg button.ntr-upgrade{display:flex;justify-content:center;align-items:center;gap:10px;flex:none;width:100%;min-height:50px;height:50px;padding:0 8px 3px;font-size:21px;font-weight:700;line-height:26px;text-shadow:0 1px #000c;text-align:center;color:#fff7df;background:url('assets/ui/training/rpg-v1/thin-frame-compact-hard-shadow.svg') center/100% 100% no-repeat;touch-action:manipulation;user-select:none}
#nm.nm-training-rpg .ntr-upgrade:disabled{opacity:.6;cursor:default;filter:saturate(.55)}
#nm.nm-training-rpg .ntr-price{display:flex;align-items:center;gap:5px;white-space:nowrap}
#nm.nm-training-rpg .ntr-price img{width:24px;height:24px}
#nm.nm-training-rpg .ntr-price b{font-size:24px;line-height:28px;font-weight:700}
#nm.nm-training-rpg .ntr-locked-note{position:absolute;bottom:7px;left:12px;right:12px;text-align:center;font-size:11px;line-height:14px}
#nm.nm-training-rpg .ntr-stat{display:flex;align-items:center;gap:10px;min-width:0;height:var(--stat-h);padding:0 10px;flex:none;isolation:isolate;position:relative;color:#6e624c}
#nm.nm-training-rpg .ntr-future:before{content:'';position:absolute;inset:0;z-index:-1;background:url('assets/ui/training/rpg-v1/recessed-future-stat-no-raised-button-shadow.svg') center/100% 100% no-repeat}
#nm.nm-training-rpg .ntr-stat>b{flex:1;min-width:0;font-size:22px;font-weight:600;line-height:28px}
#nm.nm-training-rpg .ntr-stat>strong{min-width:38px;font-size:24px;font-weight:700;line-height:28px;text-align:right;white-space:nowrap}
#nm.nm-training-rpg .ntr-reserved{display:block;width:22px;flex:none;text-align:center;color:#3d7741}
#nm.nm-training-rpg .ntr-backrow{width:100%;min-height:var(--back-h);flex:none;display:flex;align-items:flex-start}
#nm.nm-training-rpg button.ntr-back-action{width:105px;height:var(--back-h);min-height:44px;display:flex;align-items:center;justify-content:center;gap:5px;padding:0 0 6px;background:url('assets/ui/training/rpg-v1/secondary-comic-cut-corner-surface.svg') center/100% 100% no-repeat;color:#fff7df;font-size:18px;line-height:24px;font-weight:600}
#nm.nm-training-rpg .ntr-back-action img{width:20px;height:20px}
#nm.nm-training-rpg .ntr-back-action b{font-weight:600}
@media (max-height:820px) and (orientation:portrait){
 #nm.nm-training-rpg .ntr-layout{--hero-h:120px;--active-h:134px;--progress-h:158px;--paper-pad:14px;--back-h:58px}
 #nm.nm-training-rpg .ntr-track{margin-top:0}
}
@media (max-width:374px){
 #nm.nm-training-rpg .nm-title{font-size:22px}
 #nm.nm-training-rpg .nm-tab{padding-right:5px;gap:1px}
 #nm.nm-training-rpg .nm-tab b{font-size:11px}
 #nm.nm-training-rpg .ntr-tab-icon{width:16px;height:16px}
}
@media (max-height:780px) and (orientation:portrait){
 #nm.nm-training-rpg .nm-wrap{padding-top:max(12px,var(--sa-top,0px),env(safe-area-inset-top));padding-bottom:max(12px,var(--sa-bottom,0px),env(safe-area-inset-bottom))}
 #nm.nm-training-rpg .ntr-layout{--hero-h:96px;--active-h:120px;--stat-h:54px;--progress-h:136px;--paper-pad:12px;--back-h:50px}
 #nm.nm-training-rpg .ntr-rank{top:12px}
 #nm.nm-training-rpg .ntr-progress-head{font-size:20px;height:24px;line-height:24px}
 #nm.nm-training-rpg .ntr-progress-head strong{font-size:22px;line-height:24px}
 #nm.nm-training-rpg .ntr-track{height:86px;margin-top:0}
 #nm.nm-training-rpg .ntr-rail{top:29px}
 #nm.nm-training-rpg .ntr-progress-fill{top:31px}
 #nm.nm-training-rpg .ntr-ring{top:28px}
 #nm.nm-training-rpg .ntr-marker.start .ntr-ring{top:24px}
 #nm.nm-training-rpg .ntr-prize{width:26px;height:26px}
 #nm.nm-training-rpg .ntr-prize.ntr-rank-prize{width:32px;height:32px}
 #nm.nm-training-rpg .ntr-mark-number{top:44px;font-size:14px;line-height:18px}
 #nm.nm-training-rpg .ntr-mark-caption{top:62px;font-size:11px;line-height:12px}
 #nm.nm-training-rpg .ntr-active{min-height:120px;padding:8px 10px}
 #nm.nm-training-rpg .ntr-active-head{height:46px}
 #nm.nm-training-rpg .ntr-active-head>.ntr-seal{width:40px;height:40px}
 #nm.nm-training-rpg .ntr-active-copy b{font-size:22px;line-height:26px}
 #nm.nm-training-rpg .ntr-active-head strong{font-size:22px;line-height:26px}
 #nm.nm-training-rpg .ntr-stat>.ntr-seal{width:44px;height:44px}
 #nm.nm-training-rpg .ntr-stat>b{font-size:20px;line-height:26px}
 #nm.nm-training-rpg .ntr-stat>strong{font-size:22px;line-height:26px}
}
@media (orientation:landscape) and (min-width:600px){
 #nm.nm-training-rpg .nm-wrap{max-width:1080px;padding:max(8px,var(--sa-top,0px)) max(8px,var(--sa-right,0px)) max(8px,var(--sa-bottom,0px)) max(8px,var(--sa-left,0px))}
 #nm.nm-training-rpg .ntr-layout{display:grid;grid-template-columns:minmax(240px,.85fr) minmax(340px,1.35fr);grid-template-rows:104px minmax(116px,1fr) 50px;column-gap:12px;min-height:0}
 #nm.nm-training-rpg .ntr-scene{grid-column:1;grid-row:1}
 #nm.nm-training-rpg .ntr-paper{display:contents}
 #nm.nm-training-rpg .ntr-paper:before{display:none}
 #nm.nm-training-rpg .ntr-progress{grid-column:1;grid-row:2;align-self:stretch;min-height:146px;height:auto;padding:8px 12px;background:url('assets/ui/training/rpg-v1/vector1.png') center/100% 100% no-repeat}
 #nm.nm-training-rpg .ntr-progress-head{font-size:19px;height:24px;line-height:24px}
 #nm.nm-training-rpg .ntr-progress-head strong{font-size:21px;line-height:24px}
 #nm.nm-training-rpg .ntr-track{margin-top:0;height:86px}
 #nm.nm-training-rpg .ntr-rail{top:29px}
 #nm.nm-training-rpg .ntr-progress-fill{top:31px}
 #nm.nm-training-rpg .ntr-ring{top:28px}
 #nm.nm-training-rpg .ntr-marker.start .ntr-ring{top:24px}
 #nm.nm-training-rpg .ntr-prize{width:26px;height:26px}
 #nm.nm-training-rpg .ntr-prize.ntr-rank-prize{width:32px;height:32px}
 #nm.nm-training-rpg .ntr-mark-number{top:44px;font-size:14px;line-height:18px}
 #nm.nm-training-rpg .ntr-mark-caption{top:62px;font-size:11px;line-height:12px}
 #nm.nm-training-rpg .ntr-backrow{grid-column:1;grid-row:3;min-height:50px}
 #nm.nm-training-rpg button.ntr-back-action{height:50px}
 #nm.nm-training-rpg .ntr-stats{grid-column:2;grid-row:1/4;overflow:auto;max-height:100%;padding:12px;background:url('assets/ui/training/rpg-v1/vector1.png') center/100% 100% no-repeat;scrollbar-width:thin;overscroll-behavior:contain}
}
@media (prefers-reduced-motion:reduce){#nm.nm-training-rpg .ntr-marker.claimable .ntr-prize{animation:none}}
/* Successful training purchases: brief ghost arrows, above the screen but below feedback. */
#nm .ntr-upgrade-arrows{position:fixed;inset:0;z-index:7900;pointer-events:none;overflow:hidden;contain:strict}
#nm .ntr-upgrade-arrows i{position:absolute;display:block;opacity:0;background:linear-gradient(0deg,#73f8b218,#b8ffe6b3);clip-path:polygon(50% 0,100% 38%,73% 38%,73% 100%,27% 100%,27% 38%,0 38%);animation:ntr-upgrade-rise 1.2s var(--wait) ease-out both;will-change:transform,opacity}
@keyframes ntr-upgrade-rise{0%{transform:translateY(32px) scale(.85);opacity:0}18%{opacity:.36}65%{opacity:.22}100%{transform:translateY(calc(-1 * var(--rise))) scale(1.05);opacity:0}}
@media(prefers-reduced-motion:reduce){#nm .ntr-upgrade-arrows{display:none}}
body.ncv-open #results{visibility:hidden}
#nm-chapter-victory{width:min(540px,calc(100vw - 20px));max-height:calc(100dvh - 24px);padding:0;border:0;background:transparent;color:#fff1ca;overflow:auto;font-family:'GS Skill Rubik',sans-serif}
#nm-chapter-victory::backdrop{background:linear-gradient(#000d,#00182ae8)}
#nm-chapter-victory :is(button,h2,h3){font-family:'GS Skill Condensed',sans-serif}
#nm-chapter-victory button{min-height:48px;cursor:pointer;font-size:21px;font-weight:700;border:1px solid #c29a4e;color:#fff1ca;background:#403122;padding:10px 18px;border-radius:5px}
#nm-chapter-victory button:disabled{opacity:.55;cursor:default}
#nm-chapter-victory button:focus-visible{outline:3px solid #a8f6ff;outline-offset:3px}
#nm-chapter-victory .ncv-win{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;flex-direction:column;gap:18px;min-height:min(680px,calc(100dvh - 28px));padding:24px 20px;text-align:center}
#nm-chapter-victory .ncv-rays{position:absolute;z-index:-1;inset:0 0 48%;background:repeating-conic-gradient(from 8deg at 50% 48%,#b88d2329 0deg 12deg,transparent 12deg 30deg);mask-image:linear-gradient(#000,transparent)}
#nm-chapter-victory .ncv-crown{display:block;color:#c99738;font-size:70px;line-height:1}
#nm-chapter-victory .ncv-win h2{margin:0;color:#ffda63;font-size:clamp(48px,12vw,68px);line-height:1.1;text-shadow:0 3px #6d451c}
#nm-chapter-victory .ncv-win header p{margin:12px 0;color:#ffda63;font-size:25px;font-weight:700}
#nm-chapter-victory .ncv-earned{display:flex;align-items:center;flex-direction:column;gap:10px;margin:auto 0}
#nm-chapter-victory .ncv-earned h3{margin:0;padding:4px 40px;border-radius:20px;background:#704c2e;font-size:22px}
#nm-chapter-victory .ncv-earned>small{color:#b0c5bb}
#nm-chapter-victory .ncv-prize{display:inline-flex;align-items:center;flex-direction:column;justify-content:center;gap:3px;padding:6px;min-width:72px;vertical-align:top}
#nm-chapter-victory .ncv-prize img{width:54px;height:54px;object-fit:contain}
#nm-chapter-victory .ncv-prize b{font-size:23px;line-height:1.2}
#nm-chapter-victory .ncv-prize small{font-size:11px;line-height:1.25;overflow-wrap:anywhere}
#nm-chapter-victory .ncv-message{font-size:14px;line-height:1.4;color:#bce8d7;margin:0}
#nm-chapter-victory button.ncv-ad{width:min(100%,310px);background:linear-gradient(#ffdb38,#dca700);border-color:#ffe490;color:#3c260a;box-shadow:0 4px #73501c}
#nm-chapter-victory .ncv-ad small{display:block;font:700 13px/1.4 'GS Skill Rubik',sans-serif}
#nm-chapter-victory button.ncv-continue{background:transparent;color:#a9e8f3;border:0}
#nm-chapter-victory .ncv-calendar{padding:18px;background:#392628;border:1px solid #c09b52;border-radius:8px}
#nm-chapter-victory .ncv-calendar header{display:flex;align-items:center;gap:10px;margin-bottom:18px}
#nm-chapter-victory .ncv-calendar h2{flex:1;font-size:27px;margin:0;color:#ebcc80}
#nm-chapter-victory .ncv-calendar header button{flex:none;width:44px;min-height:44px;padding:0;font-size:30px}
#nm-chapter-victory .ncv-days{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#nm-chapter-victory .ncv-day{min-width:0;background:#200c17;border:1px solid #604044;border-radius:8px;overflow:hidden;text-align:center}
#nm-chapter-victory .ncv-day h3{background:#654047;margin:0;padding:6px 2px;font-size:18px}
#nm-chapter-victory .ncv-day .ncv-prize{width:100%;min-width:0;padding:8px 4px}
#nm-chapter-victory .ncv-day .ncv-prize img{width:44px;height:44px}
#nm-chapter-victory .ncv-day .ncv-prize b{font-size:20px}
#nm-chapter-victory .ncv-day.available{border-color:#e6c66a;box-shadow:0 0 12px #e6c66a44}
#nm-chapter-victory .ncv-day button{font-size:17px;min-height:44px;padding:6px;width:100%;background:#b58225}
#nm-chapter-victory .ncv-day.final{grid-column:1/-1}
#nm-chapter-victory .ncv-day.final h3{background:#9b3c45;color:#ffe58c}
#nm-chapter-victory .ncv-day.final>div{display:flex;justify-content:center}
#nm-chapter-victory .ncv-day.final .ncv-prize{width:auto;min-width:110px}
#nm-chapter-victory .ncv-calendar>.ncv-message{margin-top:12px}
#nm-chapter-victory .ncv-calendar>.ncv-continue{width:100%}
#nm-chapter-victory[data-mode="received"]::backdrop{background:linear-gradient(#000 65%,#001727fc)}
#nm-chapter-victory .ncv-received{position:relative;isolation:isolate;overflow:hidden;min-height:min(680px,calc(100dvh - 28px));padding:50px 20px 20px;display:flex;align-items:center;flex-direction:column;text-align:center;cursor:pointer;background:radial-gradient(ellipse at 50% 20%,#bb8c292b,transparent 55%)}
#nm-chapter-victory .ncv-received h2{margin:0;padding:5px 42px;background:#78572e;border-radius:24px;font-size:29px;color:#fff1ca}
#nm-chapter-victory .ncv-received-rule{width:min(270px,90%);margin:10px 0 26px;color:#addde5;font-size:18px;display:flex;align-items:center;gap:12px}
#nm-chapter-victory .ncv-received-rule:before,#nm-chapter-victory .ncv-received-rule:after{content:'';height:1px;flex:1;background:linear-gradient(90deg,transparent,#addde5,transparent)}
#nm-chapter-victory .ncv-received-prizes{display:flex;justify-content:center;flex-wrap:wrap;gap:14px}
#nm-chapter-victory .ncv-received-prizes .ncv-prize{width:108px;min-height:128px;border:2px solid #e5ba58;border-radius:6px;background:linear-gradient(135deg,#f9c34e,#a96916);box-shadow:0 0 20px #e8ba3930;color:#fff9e2;text-shadow:0 1px 2px #382300}
#nm-chapter-victory .ncv-received-prizes .ncv-prize img{width:66px;height:66px}
#nm-chapter-victory .ncv-received>button{margin-top:auto;padding-top:32px;color:#fff1ca}
#nm-chapter-victory .ncv-sparks{position:absolute;inset:0;pointer-events:none;z-index:-1}
#nm-chapter-victory .ncv-sparks i{position:absolute;width:3px;height:3px;border-radius:50%;background:#ffe5a2;box-shadow:0 0 7px 2px #e8c56266;animation:ncv-spark 3s var(--wait) ease-in-out infinite}
@keyframes ncv-spark{0%,100%{opacity:.12;transform:translateY(10px)}50%{opacity:.75;transform:translateY(-14px)}}
@media(prefers-reduced-motion:reduce){#nm-chapter-victory .ncv-sparks i{animation:none;opacity:.35}}
@media(orientation:landscape) and (max-height:520px){#nm-chapter-victory .ncv-received{min-height:calc(100dvh - 28px);padding-top:16px}#nm-chapter-victory .ncv-received-rule{margin:6px 0 12px}}
@media(orientation:landscape) and (max-height:520px){#nm-chapter-victory .ncv-win{min-height:0;gap:8px;padding:10px}#nm-chapter-victory .ncv-crown{font-size:40px}#nm-chapter-victory .ncv-win h2{font-size:42px}#nm-chapter-victory .ncv-win header p{font-size:20px;margin:4px}#nm-chapter-victory .ncv-earned{gap:3px}#nm-chapter-victory .ncv-earned h3{font-size:18px}#nm-chapter-victory .ncv-earned .ncv-prize img{width:34px;height:34px}}