/* ===== Окно героев «Витрина + список» (08.10.2026, его выбор В3 «под пальцы») =====
   Макет: client/maket-geroi-vkladka-palcy.html. Слева сетка 3 в ряд + плашка под каждым героем (30 точек — под палец),
   справа витрина выбранного. Цвет звания приходит переменной --rc (js: HW_RC). Все сетки — minmax(0,…) (правило «ничего не прыгает»). */

.hero-drawer.hw{
  left:10px; right:10px; top:8px; bottom:8px; width:auto;
  border:2px solid #d4a84b; border-radius:14px; overflow:hidden;
  background:#120a04; box-shadow:0 14px 40px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,220,140,.18);
  display:grid; grid-template-columns:322px minmax(0,1fr); flex-direction:initial;
  transform:scale(.94); opacity:0; pointer-events:none; transition:transform .22s cubic-bezier(.2,1.2,.4,1), opacity .18s;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
}
.hero-drawer.hw.open{ transform:none; opacity:1; pointer-events:auto; }
/* Оформление окна из Gemini (его слово 09.10.2026): рамка с иероглифами и скарабеями — border-image поверх краёв
   (углы не тянутся, стороны растягиваются под любой экран), внутри — текстура камня. Содержимое отодвинуто padding'ом. */
.hero-drawer.hw{ padding:13px; border:none; background:#120a04 url(img/geroi/okno-tekstura.webp) center/cover no-repeat; }
.hero-drawer.hw::before{ content:''; position:absolute; inset:0; z-index:7; pointer-events:none;
  border:17px solid transparent; border-image:url(img/geroi/okno-ramka.webp) 62 / 17px stretch; border-radius:0; }
.hero-drawer.hw .hw-corner{ display:none; }   /* старые уголки — теперь скарабеи рамки */
.hero-drawer.hw .hw-x{ right:16px; top:18px; }
.hw-corner{ position:absolute; width:14px; height:14px; border:2px solid #ffe08a; z-index:6; pointer-events:none; }
.hw-corner.tl{ left:3px; top:3px; border-right:none; border-bottom:none; border-radius:8px 0 0 0; }
.hw-corner.tr{ right:3px; top:3px; border-left:none; border-bottom:none; border-radius:0 8px 0 0; }
.hw-corner.bl{ left:3px; bottom:3px; border-right:none; border-top:none; border-radius:0 0 0 8px; }
.hw-corner.br{ right:3px; bottom:3px; border-left:none; border-top:none; border-radius:0 0 8px 0; }
.hw-x{ position:absolute; right:8px; top:20px; z-index:8; width:32px; height:32px; border-radius:50%; cursor:pointer; padding:0;
  background:linear-gradient(180deg,#e04848,#9a1a1a); color:#fff; border:2px solid #ffd0b0; font-weight:800; font-size:15px; box-shadow:0 2px 8px rgba(0,0,0,.6); }

/* --- левая колонка --- */
.hw-left{ display:flex; flex-direction:column; min-height:0; min-width:0;
  background:linear-gradient(180deg,rgba(255,220,140,.05),transparent 30%), repeating-linear-gradient(180deg,#1c1309 0 22px,#1a1108 22px 23px), #1a1108;
  border-right:2px solid #6a4a1c; box-shadow:inset -8px 0 14px rgba(0,0,0,.45); }
.hw-hd{ display:flex; align-items:center; gap:7px; padding:7px 10px 7px 12px; border-bottom:1px solid rgba(230,201,118,.22); background:linear-gradient(180deg,#2e2010,#1c1309); }
.hw-title{ font-family:'Cinzel',serif; font-weight:800; font-size:15px; letter-spacing:.08em; text-transform:uppercase; color:#ffe08a; text-shadow:0 2px 0 #3a2008, 0 0 10px rgba(255,200,90,.3); white-space:nowrap; }
.hw-cnt{ margin-right:auto; font-size:9.5px; color:#cdb080; background:rgba(0,0,0,.35); border:1px solid #4a3418; border-radius:6px; padding:1px 6px; white-space:nowrap; }
.hw-gold{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:10.5px; color:#ffe08a; background:#120a04; border:1px solid #6a4a1c; border-radius:8px; padding:3px 7px; white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis; max-width:92px; }
.hw-qty.qty-cycle-btn{ min-width:64px; height:32px; padding:0 10px; border-radius:10px; font-family:'JetBrains Mono',monospace; font-weight:700; font-size:12px; cursor:pointer;
  color:#2a1604; background:linear-gradient(180deg,#ffe08a,#c08a20); border:1.5px solid #fff0c0; box-shadow:0 2px 0 #6a4a10; }
.hw-pick{ flex:1; min-height:0; overflow-y:auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 9px; padding:9px 10px 14px; align-content:start;
  scrollbar-width:thin; scrollbar-color:#6a4a1c transparent; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.hw-cell{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.hw-p{ position:relative; aspect-ratio:1/.9; border-radius:10px; border:2px solid var(--rc); cursor:pointer; overflow:hidden;
  background:radial-gradient(circle at 50% 70%,color-mix(in srgb,var(--rc) 42%,#140c06) 0,#0c0703 78%); box-shadow:inset 0 1px 0 rgba(255,240,200,.25), 0 2px 4px rgba(0,0,0,.6); }
.hw-p svg{ position:absolute; left:0; right:0; bottom:11px; width:100%; height:auto; }
.hw-p svg.hw-art{ top:0; bottom:0; height:100%; }   /* своя картинка карточки (js/33 HERO_ART.card) — на всю карточку, с фоном */
/* Золотая рамка карточки из Gemini (09.10.2026) УБРАНА 10.10.2026 — его слово «убери рамки с героев, страшно выглядят»;
   осталась тонкая кайма цвета звания (--rc). Картинка img/geroi/karta-ramka.png не удалена. */
.hw-p .no, .hw-p .gem, .hw-p .lv{ z-index:2 !important; }
.hw-p .no{ position:absolute; left:4px; top:2px; font-family:'JetBrains Mono',monospace; font-weight:700; font-size:9px; color:#fff; text-shadow:0 0 2px #000,0 1px 1px #000; z-index:1; }
.hw-p .gem{ position:absolute; right:5px; top:5px; width:8px; height:8px; transform:rotate(45deg); background:var(--rc); border:1px solid #fff; box-shadow:0 0 5px var(--rc); z-index:1; }
.hw-p .lv{ position:absolute; left:0; right:0; bottom:0; height:13px; text-align:center; font-family:'Inter',sans-serif; font-weight:800; font-size:9px; letter-spacing:.02em; line-height:12px; color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.9)); border-top:1px solid color-mix(in srgb,var(--rc) 60%,transparent); white-space:nowrap; overflow:hidden; }
.hw-p.lock svg{ filter:brightness(.12) saturate(0); }
.hw-p.lock::after{ content:'🔒'; position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); font-size:14px; opacity:.9; }
.hw-p.sel{ border-color:#fff; box-shadow:0 0 0 2px var(--rc), 0 0 14px var(--rc), inset 0 0 12px color-mix(in srgb,var(--rc) 50%,transparent); }
.hw-p.sel::before{ content:''; position:absolute; inset:0; background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%); background-size:250% 100%; animation:hwShine 2.4s linear infinite; z-index:2; pointer-events:none; }
.hw-pl{ height:30px; border-radius:9px; font-family:'Inter',sans-serif; font-weight:800; font-size:13px; line-height:28px; text-align:center; white-space:nowrap; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:4px; letter-spacing:.01em; text-shadow:0 1px 0 rgba(0,0,0,.4), 0 0 4px rgba(0,30,0,.45);
  cursor:pointer; touch-action:pan-y; color:#fff; background:linear-gradient(180deg,#7fd65a,#2f8a22); border:1px solid #e0ffd0; box-shadow:0 2px 0 #1e4a14; padding:0 3px; }
.hw-pl.hold, .hw-btn.hold{ transform:translateY(1px); box-shadow:0 1px 0 #1e4a14; filter:brightness(1.15); }
.hw-pl.off{ background:linear-gradient(180deg,#4a3c28,#2a2014); color:#c0ae8a; border-color:#5a4a30; box-shadow:none; text-shadow:none; }
/* цифры на плашках — «красиво, а не как код» (его слово 08.10.2026): Inter жирный, стрелка/«+N» и монетка — отдельными значками */
.hw-pl .ar{ font-size:.78em; opacity:.95; }
.hw-pl .ar.n{ font-size:.82em; background:rgba(0,0,0,.22); border-radius:6px; padding:0 4px; line-height:1.5; }
.hw-pl b{ font-weight:800; }
.hw-pl .cn{ font-style:normal; font-size:.85em; filter:drop-shadow(0 1px 0 rgba(0,0,0,.4)); }
.hw-pl.pro{ text-shadow:0 1px 0 rgba(255,240,200,.6); color:#2a1604; background:linear-gradient(180deg,#fff0b0,#d8a030); border-color:#fff6d0; box-shadow:0 2px 0 #6a4a10, 0 0 8px rgba(255,200,80,.5); }
.hw-pl.src{ color:#e8d8b0; background:rgba(0,0,0,.55); border-color:#4a3418; box-shadow:none; font-size:12px; text-shadow:none; }
.hw-pl.gem{ color:#bfe6ff; } .hw-pl.promo{ color:#f0c8ff; } .hw-pl.frag{ color:#dcc0ff; }
.hw-pl.act{ text-shadow:none; color:#1a0a2a; background:linear-gradient(180deg,#e8d0ff,#7a40c0); border-color:#f2e6ff; box-shadow:0 2px 0 #3a1a5a; }

/* --- витрина --- */
.hw-show{ position:relative; display:grid; grid-template-columns:196px minmax(0,1fr); min-height:0; min-width:0; overflow:hidden;
  background:radial-gradient(ellipse at 26% 62%,color-mix(in srgb,var(--rc) 34%,#1a1008) 0,#140c06 58%,#0e0804 100%); }
.hw-frieze{ position:absolute; left:0; right:0; top:0; height:15px; font-family:'Segoe UI Historic','Noto Sans Egyptian Hieroglyphs',serif; font-size:11px; line-height:15px; letter-spacing:5px;
  white-space:nowrap; overflow:hidden; color:color-mix(in srgb,var(--rc) 55%,#5a4020); opacity:.55; border-bottom:1px solid rgba(230,201,118,.18); background:rgba(0,0,0,.25); padding-left:8px; pointer-events:none; }
.hw-stage{ position:relative; overflow:hidden; min-width:0;
  background:url(img/geroi/vitrina-fon.webp) center bottom/cover no-repeat; }   /* фон-храм за героем (его слово 09.10.2026, Gemini) */
.hw-stage .hw-rays{ display:none; }   /* свои лучи света уже нарисованы на фоне */
.hw-rays{ position:absolute; left:50%; top:52%; width:420px; height:420px; margin:-210px 0 0 -210px; border-radius:50%;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--rc) 30%,transparent) 0 7deg,transparent 7deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 18%,transparent 62%); mask:radial-gradient(circle,#000 18%,transparent 62%); animation:hwSpin 40s linear infinite; }
.hw-halo{ position:absolute; left:50%; top:50%; width:200px; height:200px; margin:-100px 0 0 -100px; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--rc) 45%,transparent) 0,transparent 65%); animation:hwPulse 2.6s ease-in-out infinite; }
.hw-spark{ position:absolute; bottom:40px; width:4px; height:4px; border-radius:50%; background:var(--rc); box-shadow:0 0 6px var(--rc),0 0 2px #fff; opacity:0; animation:hwRise 3.6s linear infinite; }
.hw-ped{ position:absolute; left:50%; bottom:10px; width:170px; height:50px; margin-left:-85px; }
.hw-ped .top{ position:absolute; left:0; right:0; top:0; height:26px; border-radius:50%; background:radial-gradient(ellipse at 50% 35%,#8a6a34 0,#4a3216 60%,#2a1a08 100%); border:2px solid #b08a40;
  box-shadow:0 0 18px color-mix(in srgb,var(--rc) 50%,transparent), inset 0 2px 4px rgba(255,230,160,.35); }
.hw-ped .band{ position:absolute; left:8px; right:8px; top:13px; height:30px; border-radius:0 0 50% 50% / 0 0 60% 60%; background:linear-gradient(180deg,#3a2410,#1a0e04); border:2px solid #8a6424; border-top:none; z-index:-1; }
.hw-hero{ position:absolute; left:50%; bottom:42px; width:166px; height:166px; margin-left:-83px; filter:drop-shadow(0 10px 12px rgba(0,0,0,.75)) drop-shadow(0 0 14px color-mix(in srgb,var(--rc) 40%,transparent));
  animation:hwBreathe 3.2s ease-in-out infinite, hwEnter .45s cubic-bezier(.2,1.4,.4,1); }
.hw-hero svg{ width:100%; height:100%; display:block; }
/* новая картинка героя (js/33 HERO_ART) — во весь рост, выше квадрата старого портрета */
.hw-hero.tall{ width:150px; height:240px; margin-left:-75px; }
.hw-hero.lock{ filter:brightness(.1) saturate(0) drop-shadow(0 0 16px var(--rc)); }
.hw-lockic{ position:absolute; left:50%; bottom:110px; transform:translateX(-50%); z-index:3; font-size:30px; filter:drop-shadow(0 0 8px var(--rc)) drop-shadow(0 2px 3px #000); animation:hwBob 2s ease-in-out infinite; }
.hw-pw{ position:absolute; left:10px; top:24px; z-index:3; display:flex; align-items:center; gap:5px; font-family:'JetBrains Mono',monospace; font-weight:700; font-size:12px; color:#ffe08a;
  background:linear-gradient(180deg,rgba(40,26,8,.9),rgba(14,8,2,.9)); border:1.5px solid #8a6424; border-radius:9px; padding:3px 9px; box-shadow:0 2px 6px rgba(0,0,0,.6); white-space:nowrap; }
.hw-pw small{ font-family:'Inter',sans-serif; font-size:8.5px; color:#cdb080; font-weight:600; }

.hw-info{ position:relative; display:flex; flex-direction:column; gap:6px; padding:24px 14px 12px 8px; min-width:0; min-height:0; animation:hwFade .35s ease; }
.hw-info.still{ animation:none; }
.hw-nm{ flex-shrink:0; margin:0; padding-right:36px; font-family:'Cinzel',serif; font-weight:800; font-size:19px; line-height:1.05; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:linear-gradient(180deg,#fff8e0 0,#ffe08a 55%,#c89a30 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 2px 0 #2a1604); }
.hw-nm .n{ font-size:13px; opacity:.85; margin-right:3px; }
.hw-sub{ flex-shrink:0; display:flex; align-items:center; gap:7px; min-width:0; }
.hw-rib{ font-size:10.5px; font-weight:800; color:#140c06; background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 70%,#fff),var(--rc)); padding:2px 14px 2px 10px;
  clip-path:polygon(0 0,100% 0,calc(100% - 7px) 50%,100% 100%,0 100%); white-space:nowrap; }
.hw-cl{ font-size:10px; color:#cdb080; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hw-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
.hw-st{ position:relative; min-width:0; background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.6)); border:1px solid color-mix(in srgb,var(--c) 45%,#3a2a14); border-radius:9px; padding:4px 2px 3px; text-align:center; overflow:hidden; }
.hw-st::before{ content:''; position:absolute; left:0; right:0; top:0; height:2px; background:var(--c); box-shadow:0 0 6px var(--c); }
.hw-st b{ display:block; font-family:'JetBrains Mono',monospace; font-weight:700; font-size:12.5px; color:#fff; white-space:nowrap; }
.hw-st small{ display:block; font-size:8.5px; color:var(--c); font-weight:700; white-space:nowrap; }
.hw-st.wide{ grid-column:1/-1; }
.hw-stats.big .hw-st{ padding:9px 2px 7px; } .hw-stats.big .hw-st b{ font-size:15px; } .hw-stats.big .hw-st small{ font-size:9.5px; margin-top:1px; }
.hw-plq{ display:flex; align-items:center; gap:6px; font-size:10px; color:#e8d8b0; background:rgba(0,0,0,.4); border:1px solid #4a3418; border-radius:8px; padding:4px 8px; white-space:nowrap; overflow:hidden; }
.hw-plq b{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:11.5px; color:#ffb070; }
.hw-plq.relic b{ color:#9be07a; }
.hw-lvl{ display:flex; flex-direction:column; gap:3px; }
.hw-lvl .t{ display:flex; justify-content:space-between; gap:6px; font-size:9.5px; color:#cdb080; white-space:nowrap; }
.hw-lvl .t b{ font-family:'JetBrains Mono',monospace; color:#fff; }
.hw-bar{ position:relative; height:12px; border-radius:6px; background:#0c0602; border:1px solid #5a4020; overflow:hidden; box-shadow:inset 0 1px 3px rgba(0,0,0,.8); }
.hw-bar i{ position:absolute; left:0; top:0; bottom:0; border-radius:5px; background:linear-gradient(180deg,#ffe8a0,#d8a030 55%,#8a5a10); box-shadow:0 0 8px rgba(255,200,80,.6); }
.hw-bar.frag i{ background:linear-gradient(180deg,#f0d8ff,#a060e0 55%,#5a2a90); box-shadow:0 0 8px rgba(190,130,255,.6); }
.hw-bar.full i{ animation:hwGlow 1.4s ease-in-out infinite; }
.hw-bar::after{ content:''; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(0,0,0,.45) calc(10% - 1px) 10%); }
/* бонусы героя (shared/heroes.js HERO_BONUS): у полученного — компактно, у ещё не полученного — большой блок */
.hw-bon{ display:flex; flex-direction:column; gap:3px; padding:4px 6px 5px; border-radius:9px; background:linear-gradient(180deg,rgba(120,80,200,.18),rgba(40,20,60,.35)); border:1px solid rgba(190,150,255,.4); }
.hw-bon .cap{ font-family:'Cinzel',serif; font-weight:800; font-size:8.5px; letter-spacing:.08em; color:#d8c0ff; }
.hw-bon .chips{ display:flex; flex-wrap:wrap; gap:4px; }
.hw-bon .chip{ display:flex; align-items:center; gap:3px; font-size:9.5px; color:#efe4ff; background:rgba(0,0,0,.4); border:1px solid rgba(190,150,255,.35); border-radius:7px; padding:1px 6px; white-space:nowrap; }
.hw-bon .chip b, .hw-bon .gift b{ font-family:'JetBrains Mono',monospace; color:#fff; }
.hw-bon .gift{ font-size:9.5px; color:#e8d8b0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hw-bonb{ position:relative; display:flex; flex-direction:column; gap:7px; padding:8px 9px 9px; border-radius:12px; overflow:hidden;
  background:radial-gradient(ellipse at 50% 0%,rgba(190,140,255,.32),transparent 70%), linear-gradient(180deg,#2a1840,#160c22); border:1.5px solid #b890ff;
  box-shadow:0 0 16px rgba(170,120,255,.35), inset 0 1px 0 rgba(240,220,255,.25); }
.hw-bonb::before{ content:''; position:absolute; inset:0; background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%); background-size:260% 100%; animation:hwShine 4s linear infinite; pointer-events:none; }
.hw-bonb .cap{ text-align:center; font-family:'Cinzel',serif; font-weight:800; font-size:10.5px; letter-spacing:.12em; color:#ecdcff; text-shadow:0 0 10px rgba(200,150,255,.9); }
.hw-bonb .mc{ display:flex; align-items:center; justify-content:center; gap:9px; padding:5px 10px; border-radius:10px; background:rgba(0,0,0,.4); border:1px solid rgba(200,160,255,.45); }
.hw-bonb .mc .ic{ font-size:24px; filter:drop-shadow(0 0 6px rgba(255,210,120,.7)); }
.hw-bonb .mc b{ display:block; font-family:'JetBrains Mono',monospace; font-size:19px; color:#ffe08a; text-shadow:0 0 8px rgba(255,200,90,.5); line-height:1.05; }
.hw-bonb .mc small{ display:block; font-size:9px; color:#d8c8f0; white-space:nowrap; }
.hw-bonb .mrow{ display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); gap:6px; }   /* 2–3 благословения в ряд (53-я) */
.hw-bonb .mrow .mc{ display:grid; grid-template-columns:auto auto; align-items:center; justify-content:center; column-gap:4px; row-gap:1px; padding:5px 2px 4px; min-width:0; }
.hw-bonb .mrow .mc > div{ display:contents; }
.hw-bonb .mrow .mc .ic{ font-size:16px; }
.hw-bonb .mrow .mc b{ font-size:15px; white-space:nowrap; }
.hw-bonb .mrow .mc small{ grid-column:1/-1; text-align:center; font-size:8px; overflow:hidden; text-overflow:ellipsis; }
/* витрина с рядом благословений (Рамсес и др., 53-я): статы и подарки чуть плотнее — иначе не влезает 21 px */
.hw-info:has(.mrow) .hw-stats.big .hw-st{ padding:5px 2px 4px; } .hw-info:has(.mrow) .hw-stats.big .hw-st b{ font-size:13.5px; }
.hw-bonb:has(.mrow){ gap:5px; padding-top:6px; padding-bottom:7px; }
.hw-bonb:has(.mrow) .tl{ padding:2px 1px 2px; } .hw-bonb:has(.mrow) .tl span{ font-size:16px; }
.hw-bonb .gt{ text-align:center; font-size:9px; font-weight:700; color:#d8c8f0; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
.hw-bonb .tiles{ display:flex; gap:6px; justify-content:center; }
.hw-bonb .tl{ flex:0 1 54px; min-width:0; display:flex; flex-direction:column; align-items:center; padding:4px 1px 3px; border-radius:8px; background:linear-gradient(180deg,#3a2a14,#1e1408); border:1px solid #a07a30; box-shadow:inset 0 1px 0 rgba(255,230,160,.2); animation:hwBob 2.4s ease-in-out infinite; }
.hw-bonb .tl span{ font-size:19px; line-height:1.1; }
.hw-bonb .tl b{ font-family:'JetBrains Mono',monospace; font-size:12.5px; color:#fff; line-height:1.1; }
.hw-bonb .tl small{ font-size:8px; color:#cdb080; white-space:nowrap; }
/* кнопки */
.hw-acts{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:6px; margin-top:auto; }
.hw-acts.one{ grid-template-columns:minmax(0,1fr); }   /* Кулак — одна кнопка во всю ширину */
.hw-btn{ position:relative; overflow:hidden; font-family:'Cinzel',serif; font-weight:800; font-size:12.5px; line-height:1.1; color:#0f1a08; text-align:center; border-radius:10px; padding:9px 6px 8px; cursor:pointer; white-space:nowrap;
  background:linear-gradient(180deg,#b8f090,#3a9a2a); border:1.5px solid #e0ffd0; box-shadow:0 3px 0 #1e4a14, 0 5px 12px rgba(0,0,0,.5); touch-action:pan-y; }
.hw-btn small{ display:block; font-family:'Inter',sans-serif; font-size:10px; font-weight:700; opacity:.85; margin-top:1px; overflow:hidden; text-overflow:ellipsis; }
.hw-btn.go::after{ content:''; position:absolute; inset:0; background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.35) 50%,transparent 58%); background-size:250% 100%; animation:hwShine 2.2s linear infinite; }
/* Кнопка «+N ур» / «Нанять» — изумруд в золоте из Gemini (09.10.2026): концы со скарабеями не тянутся, середина растягивается */
.hw-btn.go{ background:none; border-style:solid; border-width:0 15px; border-color:transparent; border-radius:999px; padding-left:2px; padding-right:2px;
  border-image:url(img/geroi/knopka.webp) 0 100 fill / 0 15px stretch; color:#fff6d8; text-shadow:0 1px 2px #000, 0 0 6px rgba(0,0,0,.6); box-shadow:none; }
.hw-btn.go small{ color:#ffe9a8; opacity:1; }
.hw-btn.off{ background:linear-gradient(180deg,#5a4a30,#2e241a); color:#a89878; border-color:#6a5a3a; box-shadow:0 3px 0 #1a120a; cursor:default; }
.hw-btn.gold{ background:linear-gradient(180deg,#fff0b0,#d8a030 60%,#9a6a10); border-color:#fff6d0; color:#2a1604; animation:hwPulseB 1.4s ease-in-out infinite; }
.hw-btn.gem{ background:linear-gradient(180deg,#c0e8ff,#3a7ad0); border-color:#e0f6ff; color:#08152a; box-shadow:0 3px 0 #1a3a6a, 0 5px 12px rgba(0,0,0,.5); }
.hw-btn.promo{ background:linear-gradient(180deg,#f8d8ff,#9a50d0); border-color:#fbeaff; color:#1e0a2a; box-shadow:0 3px 0 #4a1a6a, 0 5px 12px rgba(0,0,0,.5); }
.hw-btn.act{ background:linear-gradient(180deg,#e8d0ff,#7a40c0); border-color:#f2e6ff; color:#1a0a2a; box-shadow:0 3px 0 #3a1a5a; }
.hw-btn.sec{ background:linear-gradient(180deg,#6a5030,#3a2810); border-color:#c8a050; color:#ffe8b0; box-shadow:0 3px 0 #1a1008, 0 5px 12px rgba(0,0,0,.5); }
.hw-fx{ position:absolute; z-index:30; pointer-events:none; font-family:'JetBrains Mono',monospace; font-weight:800; font-size:12px; color:#b8f090; text-shadow:0 0 3px #000,0 1px 2px #000; animation:hwFly .8s ease-out forwards; white-space:nowrap; }
.hw-fx.big{ font-size:14px; color:#ffe08a; }

/* узкие телефоны (780×360, 800×360): ужимаем витрину, а не плашки */
/* 74-я: узкий кадр (между вырезами телефона < 820) — класс .app.uzko ставит kadrFit (медиа-запросы на кадр не смотрят) */
.app.uzko .hero-drawer.hw{ grid-template-columns:300px minmax(0,1fr); }
.app.uzko .hw-show{ grid-template-columns:150px minmax(0,1fr); }
.app.uzko .hw-hero{ width:140px; height:140px; margin-left:-70px; }
.app.uzko .hw-ped{ width:146px; margin-left:-73px; }
.app.uzko .hw-pw{ font-size:10.5px; padding:2px 6px; } .app.uzko .hw-pw small{ display:none; }
.app.uzko .hw-nm{ font-size:17px; }
.app.uzko .hw-st b{ font-size:11px; } .app.uzko .hw-st small{ font-size:7.5px; }
.app.uzko .hw-btn{ font-size:11px; } .app.uzko .hw-btn small{ font-size:8.5px; }
.app.uzko .hw-acts{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); }

@keyframes hwSpin{ to{ transform:rotate(360deg); } }
@keyframes hwPulse{ 0%,100%{ opacity:.65; transform:scale(.95); } 50%{ opacity:1; transform:scale(1.06); } }
@keyframes hwBreathe{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
@keyframes hwEnter{ from{ opacity:0; transform:translateY(14px) scale(.85); } to{ opacity:1; transform:none; } }
@keyframes hwFade{ from{ opacity:0; transform:translateX(10px); } to{ opacity:1; transform:none; } }
@keyframes hwRise{ 0%{ opacity:0; transform:translateY(0) scale(.6); } 15%{ opacity:1; } 100%{ opacity:0; transform:translateY(-190px) scale(1.1); } }
@keyframes hwShine{ from{ background-position:150% 0; } to{ background-position:-100% 0; } }
@keyframes hwBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } }
@keyframes hwGlow{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.35); } }
@keyframes hwPulseB{ 0%,100%{ box-shadow:0 3px 0 #6a4a10, 0 0 10px rgba(255,200,80,.4); } 50%{ box-shadow:0 3px 0 #6a4a10, 0 0 22px rgba(255,210,90,.9); } }
@keyframes hwFly{ from{ opacity:1; transform:translate(-50%,0); } to{ opacity:0; transform:translate(-50%,-26px); } }
/* 70-я, его слово «личный фон и красиво, а то парят в воздухе»: у героя со своим фоном (HERO_ART.fon) — фон за ним, без постамента,
   герой чуть меньше и стоит ногами у нижнего края; снизу мягкая тень-пол, сверху тёмная виньетка под плашку мощи */
.hw-stage.hfon{ background:var(--hfon) center/cover no-repeat; }
.hw-stage.hfon::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(180deg,rgba(10,6,2,.55) 0,transparent 22%,transparent 72%,rgba(10,6,2,.6) 100%); }
.hw-stage.hfon .hw-ped, .hw-stage.hfon .hw-halo{ display:none; }
.hw-stage.hfon .hw-hero.tall{ bottom:4px; width:136px; height:218px; margin-left:-68px; z-index:2;
  filter:drop-shadow(0 6px 6px rgba(0,0,0,.7)); }
.hw-stage.hfon .hw-hero.tall::before{ content:''; position:absolute; left:14%; right:14%; bottom:-2px; height:16px; border-radius:50%; z-index:-1;
  background:radial-gradient(ellipse,rgba(0,0,0,.7) 0,transparent 70%); }
.hw-stage.hfon .hw-spark{ z-index:2; }
.hw-stage.hfon .hw-pw{ z-index:3; }

/* ===== 70-я, ЕГО ВЫБОР «Б3» (макет client/maket-okno-geroya-b.html): фон героя на ВСЮ витрину, герой слева, справа фон темнеет —
   имя, звание, описание, характеристики 2×2, благословение СВИТКОМ папируса (подсвечено), «Уровень X / N · урон/сек», кнопки ===== */
.hw-show.b3{ background:#120a04 var(--sfon) center/cover no-repeat; }
.hw-show.b3::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.05) 0,rgba(0,0,0,.18) 30%,rgba(12,7,3,.88) 44%,rgba(12,7,3,.95) 100%); }
.hw-show.b3 .hw-stage, .hw-show.b3 .hw-stage.hfon{ background:none; z-index:1; }
.hw-show.b3 .hw-stage::after{ display:none; }
.hw-show.b3 .hw-info{ z-index:1; gap:5px; padding:22px 12px 10px 8px; }
.hw-show.b3 .hw-frieze{ z-index:2; }
.hw-ds{ flex-shrink:0; font:italic 10px/1.3 Georgia,serif; color:#e8d8b8; text-shadow:0 1px 2px #000;
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }   /* 16.10: 3 → 5 строк — текст Красика (его) не влезал; места под уровнем ~100 px */
.hw-stats.b3{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px 5px; }
.hw-stats.b3.one{ grid-template-columns:minmax(0,1fr); }
.hw-st4{ display:grid; grid-template-columns:16px minmax(0,1fr) auto; align-items:center; gap:4px; min-width:0; padding:2px 7px; border-radius:7px;
  background:rgba(255,255,255,.06); border-left:3px solid var(--c); }
.hw-st4 img{ width:16px; height:16px; object-fit:contain; } .hw-st4 small{ font-size:9.5px; color:#cdb080; white-space:nowrap; overflow:hidden; }
.hw-st4 b{ font-family:'JetBrains Mono',monospace; font-weight:800; font-size:12.5px; color:#fff; white-space:nowrap; min-width:0; }
/* свиток благословения */
.hw-scr{ position:relative; flex-shrink:0; margin:1px 4px; border-radius:6px; padding:4px 10px 5px; background:linear-gradient(180deg,#f0dcae,#d8bb80); color:#3a2408;
  box-shadow:0 0 12px rgba(255,210,110,.6), inset 0 0 10px rgba(120,80,20,.4); animation:hwScrGlow 2.6s ease-in-out infinite; }
@keyframes hwScrGlow{ 0%,100%{ box-shadow:0 0 8px rgba(255,210,110,.45), inset 0 0 10px rgba(120,80,20,.4); } 50%{ box-shadow:0 0 16px rgba(255,220,130,.85), inset 0 0 10px rgba(120,80,20,.4); } }
.hw-scr::before, .hw-scr::after{ content:''; position:absolute; top:-3px; bottom:-3px; width:7px; border-radius:4px; background:linear-gradient(90deg,#6a3a12,#b07a3a,#6a3a12); }
.hw-scr::before{ left:-4px; } .hw-scr::after{ right:-4px; }
.hw-scr .cap{ font:800 9.5px 'Cinzel',serif; letter-spacing:.08em; color:#7a2a06; text-align:center; }
.hw-scr .mn{ display:flex; flex-wrap:wrap; justify-content:center; gap:1px 8px; margin:1px 0 2px; }
.hw-scr .mn span{ display:inline-flex; align-items:center; gap:3px; font:800 13px 'Cinzel',serif; color:#3a1a04; white-space:nowrap; }
.hw-scr .mn small{ font:600 9px 'Inter',sans-serif; color:#6a4a1a; } .hw-scr .mn img{ width:18px; height:18px; object-fit:contain; }
.hw-scr .gl{ font:700 8.5px 'Inter',sans-serif; color:#7a3a06; text-align:center; }
.hw-scr .gs{ display:flex; justify-content:center; gap:6px; margin-top:2px; }
.hw-gt{ position:relative; width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle,#fff6d8,#e8cc90 70%);
  border:1.5px solid #a06a20; box-shadow:0 0 6px rgba(160,100,30,.5); }
.hw-gt img{ width:21px; height:21px; object-fit:contain; animation:hwGtIco 2.4s ease-in-out infinite; }
@keyframes hwGtIco{ 0%,100%{ filter:drop-shadow(0 0 1px rgba(160,100,30,.5)); } 50%{ filter:drop-shadow(0 0 5px rgba(255,200,90,1)); } }
.hw-gt b{ position:absolute; right:-4px; bottom:-5px; font:800 10px 'JetBrains Mono',monospace; color:#fff; background:#7a2a06; border:1px solid #ffd870; border-radius:5px; padding:0 3px; }
/* строка уровня */
.hw-lv1{ flex-shrink:0; display:flex; justify-content:space-between; align-items:center; gap:6px; font-size:10px; color:#cdb080; white-space:nowrap; min-width:0; }
.hw-lv1 b{ color:#fff; } .hw-lv1 > span:last-child{ min-width:0; overflow:hidden; display:flex; align-items:center; gap:3px; }
.hw-lv1 > span:last-child b{ font-family:'JetBrains Mono',monospace; font-size:11px; color:#ffe08a; }
.hw-show.b3 .hw-plq.relic{ padding:2px 8px; }
.app.uzko .hw-st4 small{ font-size:8.5px; } .app.uzko .hw-st4 b{ font-size:11px; } .app.uzko .hw-ds{ font-size:9.5px; }
.hw-st4{ padding:2px 5px; gap:3px; } .hw-st4 small{ font-size:8.5px; overflow:visible; } .hw-st4 b{ font-size:12px; }
/* 70-я, его слово: мощь — сразу после имени (табличка), номер героя перед именем убран */
.hw-nmrow{ flex-shrink:0; display:flex; align-items:center; gap:8px; min-width:0; padding-right:36px; }
.hw-nmrow .hw-nm{ padding-right:0; min-width:0; }
.hw-pwi{ flex-shrink:0; display:inline-flex; align-items:center; gap:3px; padding:2px 7px 2px 4px; border-radius:8px; background:rgba(14,8,2,.8); border:1.5px solid #8a6424; white-space:nowrap; }
.hw-pwi img{ width:15px; height:15px; object-fit:contain; } .hw-pwi b{ font-family:'JetBrains Mono',monospace; font-weight:800; font-size:11.5px; color:#ffe08a; }
.hw-pwi small{ font-size:8px; color:#cdb080; }
/* 70-я, его слово «герои очень маленькие — сделай на всё место героя»: нарисованный герой — во всю высоту и ширину сцены (кадр 9:16) */
.hw-show.b3 .hw-stage.hfon .hw-hero.tall{ left:0; right:0; bottom:0; width:auto; height:calc(100% - 16px); margin-left:0; }
.app.uzko .hw-show.b3 .hw-stage.hfon .hw-hero.tall{ width:auto; height:calc(100% - 16px); margin-left:0; }
/* 70-я: кнопки окна героев — его лист Gemini (ui-proba/geroi/knopki-okna.jpg): «+N ур»/«Нанять» — изумруд в золоте со стрелкой и скарабеем,
   неактивная — тот же камень серым, «Арсенал» — кованая бронза со скрещёнными хопешами. Концы не тянутся (border-image), середина растягивается. */
.hw-btn.go, .hw-btn.off, .hw-btn.sec{ background:none; border-style:solid; border-color:transparent; border-radius:0; box-shadow:none; padding-top:0; padding-bottom:0;
  min-height:42px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-shadow:0 1px 2px #000, 0 0 6px rgba(0,0,0,.6); }
.hw-btn.go{ border-width:0 21px; padding-left:0; padding-right:0; border-image:url(img/geroi/kn-up.webp) 0 10.5% fill / 0 21px stretch; color:#fff6d8; }
.hw-btn.go small{ color:#ffe9a8; }
.hw-btn.off{ border-width:0 21px; padding-left:0; padding-right:0; border-image:url(img/geroi/kn-up-off.webp) 0 10.5% fill / 0 21px stretch; color:#c8b898; }
.hw-btn.off small{ color:#a89878; }
.hw-btn.sec{ border-width:0 8px 0 31px; padding-left:0; padding-right:0; border-image:url(img/geroi/kn-arsenal.webp) 0 4.5% 0 17.8% fill / 0 8px 0 31px stretch; color:#ffe8c0; }
.hw-btn.go:active, .hw-btn.sec:active{ transform:scale(.97); }
.hw-btn.go, .hw-btn.off{ border-width:0 18px; border-image-width:0 18px; }
.hw-btn.sec{ border-width:0 7px 0 25px; border-image-width:0 7px 0 25px; font-size:12px; }
.hw-btn.sec small{ font-size:8.5px; }   /* скрещённые хопеши — на картинке кнопки, «⚔» из надписи убран */
/* 70-я: «▲ Возвысить» и плашки цены под героями — его второй лист (ui-proba/geroi/knopki-okna-2.jpg): золото с медалью и крылатым солнцем /
   бронза неактивная; плашка — изумруд со стрелкой / серый камень. Концы не тянутся (border-image). */
.hw-btn.gold, .hw-btn.off[data-hwdo="promote"]{ background:none; border-style:solid; border-color:transparent; border-radius:0; box-shadow:none; padding:0; min-height:42px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; border-width:0 18px; animation:none;
  border-image:url(img/geroi/kn-vozv.webp) 0 10.5% fill / 0 18px stretch; color:#3a1a02; text-shadow:0 1px 0 rgba(255,240,190,.7); }
.hw-btn.gold small{ color:#5a2a04; opacity:1; }
.hw-btn.gold{ filter:drop-shadow(0 0 6px rgba(255,200,80,.6)); }
.hw-btn.off[data-hwdo="promote"]{ border-image-source:url(img/geroi/kn-vozv-off.webp); color:#d8c8a8; text-shadow:0 1px 2px #000; filter:none; }
.hw-pl{ background:none; border-style:solid; border-color:transparent; border-radius:0; box-shadow:none; border-width:0 7px 0 20px; line-height:30px;
  border-image:url(img/geroi/kn-pl.webp) 0 3% 0 8.4% fill / 0 7px 0 20px stretch; color:#fff; text-shadow:0 1px 2px #000; }
.hw-pl.off, .hw-pl.src{ background:none; border-color:transparent; border-image-source:url(img/geroi/kn-pl-off.webp); }
.hw-pl.pro{ background:none; border-color:transparent; box-shadow:none; border-width:0 12px; border-image:url(img/geroi/kn-vozv.webp) 0 10.5% fill / 0 12px stretch; }
.hw-pl.act{ background:linear-gradient(180deg,#e8d0ff,#7a40c0); border-image:none; border-radius:9px; border:1.5px solid #f2e6ff; }

/* 16.10 (70-я): значок осколков героя — «кусок медальона» (его выбор Б), js/33-geroi-art.js oskMed() */
.osk-med{ position:relative; display:inline-block; flex:none; vertical-align:-0.22em; width:1.15em; height:1.15em; filter:drop-shadow(0 1px 1.5px #000); }
.osk-med .om-c{ position:absolute; inset:0; border-radius:50%; background:linear-gradient(160deg,#ffe9a0,#b8862a 55%,#6a4410);
  clip-path:polygon(0 0,100% 0,100% 58%,78% 64%,86% 80%,60% 78%,62% 100%,0 100%); }
.osk-med .om-in{ position:absolute; inset:9%; border-radius:50%; overflow:hidden; box-shadow:inset 0 0 0 1px #3a2408; }
.osk-med .om-in img{ position:absolute; left:-35%; top:-8%; width:170%; height:170%; object-fit:cover; display:block; max-width:none; }
.om-ln{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }   /* текст + медальон в одну строку (кнопки окна героя — столбиком) */
/* 16.10: герой с благословением и длинным описанием (Эльвинг, 4 строки) — кнопки уезжали за низ окна: плотнее только здесь */
.hw-info:has(.hw-scr){ gap:3px; }
.hw-info:has(.hw-scr) .hw-ds{ line-height:1.2; }
.hw-info:has(.hw-scr) .hw-scr .mn{ gap:0 6px; }   /* 16.10: перенос оставлен — у Рамсеса 3 бонуса, в одну строку не лезут */
.hw-info:has(.hw-scr) .hw-scr .mn span{ font-size:10.5px; }
.hw-info:has(.hw-scr) .hw-scr .mn img{ width:15px; height:15px; }
/* 16.10 (70-я): кнопка ×1…MAX — его лист (img/ui-proba/knopka-max, облик 1 «золотая с крыльями»), надпись кодом */
.hw-qty.qty-cycle-btn{ width:90px; min-width:0; height:32px; padding:0 20px 1px; border:0; border-radius:0; box-shadow:none;
  background:url(img/ramka/kn-max.webp) center/100% 100% no-repeat; color:#3a1c02; font:800 13px 'Cinzel',serif; letter-spacing:.03em;
  text-shadow:0 1px 0 rgba(255,240,190,.7); filter:drop-shadow(0 2px 2px rgba(0,0,0,.55)); }
.hw-qty.qty-cycle-btn:active{ transform:scale(.96); filter:drop-shadow(0 1px 1px rgba(0,0,0,.55)) brightness(1.08); }
/* 71-я, его слово «мощь вниз над атакой, после имени — звёзды»: звёзды картинками Арсенала («солнечный рубин»), мощь — своей строкой над статами */
.hw-zv{ flex-shrink:0; display:inline-flex; align-items:center; gap:1px; }
.hw-zv img{ width:17px; height:17px; display:block; object-fit:contain; }
.hw-zv img.on{ filter:drop-shadow(0 0 4px rgba(255,200,80,.55)); }
.hw-pwrow{ flex-shrink:0; display:flex; }
/* 71-я: рамка звания картинкой — ультра тонко (5 px), героя не закрывает; срез по его листу: бруски ≈ 30 px из 192, сверху ≈ 38 (скарабей) */
.hw-p.fr{ border:4px solid transparent; border-image:var(--fr) 38 30 30 30 / 5px 4px 4px 4px stretch; }
.hw-p.fr.sel{ box-shadow:0 0 12px var(--rc), inset 0 0 10px color-mix(in srgb,var(--rc) 45%,transparent); }