/* ================= Магазин: «Лавка на Агоре» ================= */
.page-shop { padding-bottom: 40px; overflow-x: hidden; }
/* поля по бокам — под ярлыки «−30%», выступающие за угол карточки */
.shop { display: flex; flex-direction: column; gap: 14px; padding: 0 6px; }

/* баланс в шапке страницы */
.shop-bal { display: flex; gap: 6px; margin-left: auto; }
.sb-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 6px; border-radius: 8px;
  background: rgba(0,0,0,.4); border: 1px solid var(--line); color: #fff;
  font-family: var(--font-display); font-size: 15px; letter-spacing: .5px; font-variant-numeric: tabular-nums;
}
.sb-pill .sc-cur { width: 24px; height: 24px; }

/* ---------- лавка сверху: сцена во всю ширину (shopHero.js), реплика — справа у рта торговца ---------- */
.shop-hero {
  position: relative; height: 230px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, #4a2a16, #24140a);
  box-shadow: inset 0 0 0 1px rgba(255,200,120,.18), 0 10px 30px rgba(0,0,0,.35);
}
.sh-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.shop-hero { container-type: inline-size; } /* узкая шапка — правила в конце файла */
/* реплика торговца — облачко сбоку от лица, хвостик на высоте рта (--tail — от верха облачка).
   Появляется на 5 с (.show): само раз в 30 с или по клику на торговца. 5 видов — .bs-0…4 (shopHero.js) */
.sh-bubble {
  --bg: #fff7e6; --ink: #3a2008; --bd: #3a2008;
  position: absolute; left: 0; top: 0; z-index: 2; padding: 6px 11px; border-radius: 12px; border: 2px solid var(--bd); cursor: pointer;
  background: var(--bg); color: var(--ink); font: 700 13px/1.25 var(--font-body, inherit); text-align: left; max-width: 230px; width: max-content;
  box-shadow: 0 4px 0 rgba(58,32,8,.5);
  opacity: 0; pointer-events: none; transform: scale(.85); transform-origin: left var(--tail, 50%);
  transition: opacity .25s, transform .25s cubic-bezier(.3,1.5,.6,1);
}
.sh-bubble.show { opacity: 1; pointer-events: auto; transform: none; }
/* острый хвостик влево, ко рту: ::before — контур (цвет рамки), ::after — заливка поверх, вписана так,
   чтобы рамка по краям хвостика была той же толщины до самого острия и сливалась с рамкой облачка */
.sh-bubble::before, .sh-bubble::after {
  content: ''; position: absolute; top: var(--tail, 50%); width: 0; height: 0; border-style: solid; border-color: transparent;
}
.sh-bubble::before { left: -18px; margin-top: -9px; border-width: 9px 18px 9px 0; border-right-color: var(--bd); }
.sh-bubble::after { left: -12.5px; margin-top: -7px; border-width: 7px 14.5px 7px 0; border-right-color: var(--bg); }
.sh-bubble.show.pop { animation: shPop .3s ease-out; }
@keyframes shPop { 0% { transform: scale(.9); } 60% { transform: scale(1.04); } }
/* 1. Свиток: пергамент с накрученными краями, курсив с засечками */
.sh-bubble.bs-1 {
  --bg: #f3e0b3; --ink: #4a2a10; --bd: #8a5a2a;
  border-radius: 4px; border-width: 2px 0; padding: 9px 20px;
  background: linear-gradient(180deg, #f8ebc8, #e9cf96);
  box-shadow: inset 7px 0 0 -1px #c9a66b, inset -7px 0 0 -1px #c9a66b, inset 9px 0 6px -4px rgba(90,50,10,.5), inset -9px 0 6px -4px rgba(90,50,10,.5), 0 4px 10px rgba(0,0,0,.35);
  font: italic 700 15px/1.3 Georgia, 'Times New Roman', serif;
}
.sh-bubble.bs-1::after { border-right-color: #e9d6a6; }
/* 2. Мраморная табличка с золотой рамкой */
.sh-bubble.bs-2 {
  --bg: #f4f0e8; --ink: #3a2a14; --bd: #d4a63a;
  border-radius: 6px; border-width: 2px; background: linear-gradient(180deg, #ffffff, #e8e2d6);
  box-shadow: inset 0 0 0 3px #f4f0e8, inset 0 0 0 4px rgba(212,166,58,.6), 0 4px 0 #8a6a2a, 0 8px 16px rgba(0,0,0,.35);
  font: 13.5px/1.35 'Russo One', var(--font-display); letter-spacing: .2px; padding: 10px 16px;
}
/* 3. Комикс: жирный контур, лёгкий наклон, тень-штрих */
.sh-bubble.bs-3 { --bg: #ffffff; --ink: #111; --bd: #111; border-width: 3px; border-radius: 20px; font-weight: 800; box-shadow: 4px 4px 0 #111; }
.sh-bubble.bs-3.show { transform: rotate(-1.5deg); }
.sh-bubble.bs-3::before { left: -20px; margin-top: -10px; border-width: 10px 20px 10px 0; }
.sh-bubble.bs-3::after { left: -12px; margin-top: -6.5px; border-width: 6.5px 14px 6.5px 0; }
/* 4. Тёмное золото — как плашки интерфейса */
.sh-bubble.bs-4 {
  --bg: #24130a; --ink: #ffe08a; --bd: #e8b830;
  border-width: 1.5px; border-radius: 10px; background: linear-gradient(180deg, #3a210f, #1e1008);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 18px rgba(255,190,80,.35), inset 0 1px 0 rgba(255,230,150,.25);
}
.sh-strip {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34px; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(90deg, rgba(20,10,4,.85), rgba(60,32,12,.85), rgba(20,10,4,.85)); border-top: 1px solid rgba(255,200,120,.25);
  color: #f3dcb6; font-size: 13px; font-weight: 700;
}
.sh-strip i { display: inline-flex; color: #ffcf6b; }
.shop-timer { color: #ffe08a; font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: .5px; }

/* ---------- вкладки разделов: липнут к верху при прокрутке ---------- */
.shop-tabs {
  position: sticky; top: 0; z-index: 5; display: flex; gap: 4px; padding: 5px; border-radius: 12px; overflow-x: auto; scrollbar-width: none;
  background: rgba(15,18,32,.92); backdrop-filter: blur(6px); border: 1px solid var(--line);
}
.shop-tabs::-webkit-scrollbar { display: none; }
.shop-tab {
  flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 8px; border: none; cursor: pointer;
  background: transparent; color: var(--muted); font-weight: 700; font-size: 13.5px; transition: color .15s, background .15s;
}
.shop-tab i { display: inline-flex; }
.shop-tab:hover { color: #fff; background: rgba(255,255,255,.05); }
.shop-tab.on { background: linear-gradient(180deg, #ffd864, #e8a21c); color: #3a2008; box-shadow: 0 2px 10px rgba(255,190,60,.35); }

.shop-content { display: flex; flex-direction: column; gap: 22px; }

/* ---------- витрина главного: две большие карточки ---------- */
.shop-feats { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; }
.shop-feat {
  position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 16px; cursor: pointer; text-align: left; color: var(--text); overflow: hidden;
  background:
    radial-gradient(circle at 18% 50%, color-mix(in srgb, var(--rc) 45%, transparent), transparent 55%),
    linear-gradient(135deg, color-mix(in srgb, var(--rc) 22%, #171b28), #0e121b 75%);
  border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .15s, box-shadow .15s;
}
.shop-feat::before { /* блик, пробегает по карточке */
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.12), transparent); animation: shShine 5s ease-in-out infinite;
}
@keyframes shShine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.shop-feat:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 24px color-mix(in srgb, var(--rc) 35%, transparent); }
.sf-art { flex: none; display: flex; filter: drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
.sf-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sf-kicker { align-self: flex-start; padding: 2px 9px; border-radius: 999px; background: var(--rc); color: #12060a; font-family: var(--font-display); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.sf-info h3 { margin: 4px 0 0; font-family: 'Russo One', var(--font-display); font-size: 26px; line-height: 1.1; color: #fff; }
.sf-rar { color: var(--rc); font-weight: 700; font-size: 13px; }
.sf-info p { margin: 4px 0 8px; font-size: 13px; line-height: 1.4; color: #c5cad6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-bottom { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sf-left { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12.5px; }
.sf-left i { display: inline-flex; }
.shop-feat .sc-price { font-size: 19px; padding: 7px 16px; }

/* ---------- раздел ---------- */
.ss-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,200,120,.14); }
.ss-head h3 { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 20px; letter-spacing: 1.5px; text-transform: uppercase; color: #fff3dc; }
.ss-head h3 i { display: inline-flex; color: #ffc83a; }
.ss-timer, .ss-note { margin-left: auto; font-size: 13px; color: var(--muted); }
.ss-timer { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 999px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,200,120,.2); color: #f3dcb6; font-weight: 700; }
.ss-timer i { display: inline-flex; color: #ffcf6b; }
.ss-more { margin-left: auto; background: none; border: none; color: #ffcf6b; font-weight: 700; font-size: 13px; cursor: pointer; }
.ss-more::after { content: ' ›'; }
.ss-more:hover { color: #fff; }

.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 12px; }
.shop-grid.g-wide { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.shop-grid.g-fit { grid-template-columns: repeat(auto-fit, minmax(156px, 1fr)); }

/* ---------- карточка товара ---------- */
.shop-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 10px 12px; border-radius: 14px; cursor: pointer; color: var(--text);
  background: linear-gradient(180deg, #1d2232, #131722);
  border: 1px solid color-mix(in srgb, var(--rc) 35%, rgba(255,255,255,.06));
  box-shadow: 0 6px 16px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.shop-card:hover { transform: translateY(-3px); border-color: var(--rc); box-shadow: 0 10px 22px rgba(0,0,0,.4), 0 0 18px color-mix(in srgb, var(--rc) 30%, transparent); }
.sc-art {
  position: relative; width: 100%; aspect-ratio: 1.2; display: flex; align-items: center; justify-content: center; border-radius: 10px; overflow: hidden;
  background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--rc) 40%, transparent), transparent 70%), #0d121c;
}
.sc-art::after { /* полоса редкости снизу */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--rc); box-shadow: 0 0 10px var(--rc);
}
.k-bundle .sc-art, .wide .sc-art { aspect-ratio: 2; }
.sc-name { margin-top: 4px; font-weight: 800; font-size: 14.5px; text-align: center; line-height: 1.2; color: #fff; }
/* снизу место под зачёркнутую старую цену — чтобы цены в ряду стояли на одной высоте */
.sc-sub { display: flex; align-items: center; gap: 5px; margin-bottom: 16px; font-size: 11.5px; color: var(--muted); text-align: center; }
.sc-stock {
  position: absolute; left: 6px; top: 6px; padding: 2px 7px; border-radius: 6px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,200,120,.3);
  color: #ffcf6b; font-size: 11px; font-weight: 700;
}
.sc-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 6px var(--rc); }

/* цена — золотая «таблетка», как кнопки в лавке */
.sc-price {
  margin-top: auto; position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 5px 14px; min-width: 90px; justify-content: center;
  border-radius: 10px; background: linear-gradient(180deg, #ffe17a, #f0a71e); color: #3a2008; border: 1px solid #ffe9a8;
  box-shadow: 0 3px 0 #9a5c0a, inset 0 1px 0 rgba(255,255,255,.6);
  font-family: var(--font-display); font-size: 16px; font-variant-numeric: tabular-nums;
}
.sc-price s { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); color: #ff8a7a; font-size: 12px; text-decoration-thickness: 2px; white-space: nowrap; text-shadow: 0 1px 2px #000; }
.sc-price.cur-rub { background: linear-gradient(180deg, #d6ff6a, #8fd41e); border-color: #eaffb0; box-shadow: 0 3px 0 #4f7a0a, inset 0 1px 0 rgba(255,255,255,.6); color: #18300a; }
.sc-price.is-owned { background: rgba(46,204,113,.15); border-color: rgba(46,204,113,.5); color: #7dffb0; box-shadow: none; }
.sc-price.is-owned i { display: inline-flex; }
.sc-cur { display: inline-flex; width: 20px; height: 20px; flex: none; }
.sc-cur svg { width: 100%; height: 100%; }
.is-owned .sc-art { filter: saturate(.55) brightness(.8); }

/* ярлыки в углу */
.sc-tag {
  position: absolute; top: -6px; right: -6px; z-index: 2; padding: 3px 9px; border-radius: 8px; transform: rotate(6deg);
  font-family: var(--font-display); font-size: 12.5px; letter-spacing: .5px; text-transform: uppercase; color: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,.4);
}
.sc-tag.t-sale { background: linear-gradient(180deg, #ff5a5a, #c81e3a); }
.sc-tag.t-new { background: linear-gradient(180deg, #d6ff6a, #7fc41e); color: #18300a; }
.sc-tag.t-hit { background: linear-gradient(180deg, #ff9d3a, #e0601a); }
.sc-tag.t-best { background: linear-gradient(180deg, #ffe17a, #f0a71e); color: #3a2008; }
.shop-feat .sc-tag { top: 12px; left: 12px; right: auto; transform: rotate(-6deg); font-size: 14px; padding: 4px 12px; }
.shop-feat .sc-price s { top: -16px; }
.shop-feat .sf-bottom { margin-top: 12px; }

/* набор — предметы веером */
.sc-bundle { display: flex; align-items: center; justify-content: center; }
.sb-it {
  display: flex; margin: 0 -9px; border-radius: 12px; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 35%, #141a26), #0d121c 75%);
  border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent); box-shadow: 0 4px 10px rgba(0,0,0,.45);
  transform: rotate(calc((var(--i) - 1.5) * 5deg)) translateY(calc((var(--i) - 1.5) * (var(--i) - 1.5) * 3px));
}
.sc-bundle.n3 .sb-it { transform: rotate(calc((var(--i) - 1) * 7deg)) translateY(calc((var(--i) - 1) * (var(--i) - 1) * 4px)); }

/* капсула и «×5» */
.sc-caps { position: relative; display: flex; }
.sc-count {
  position: absolute; right: -6px; bottom: 4px; padding: 1px 8px; border-radius: 8px; background: #fff; color: #1a0f2a;
  font-family: 'Russo One', var(--font-display); font-size: 15px; box-shadow: 0 3px 0 rgba(0,0,0,.4);
}

/* горка монеток / билетов: чем больше пак, тем выше горка */
.sc-pile { position: relative; width: 96px; height: 76px; }
.sc-pile i {
  position: absolute; width: 46px; height: 46px; left: calc(25px + (var(--i) - 2) * 15px); top: calc(16px - (var(--i) % 2) * 10px);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); animation: curFloat 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.4s);
}
.sc-pile.n1 i { left: 25px; width: 54px; height: 54px; }
.sc-pile.n2 i { left: calc(12px + var(--i) * 24px); }
.sc-pile.n3 i { left: calc(6px + var(--i) * 20px); }
.sc-pile i svg { width: 100%; height: 100%; }

/* ---------- окно товара ---------- */
.shop-modal .sm-box {
  position: relative; width: min(400px, 94vw); max-height: 92vh; overflow-y: auto; padding: 20px 22px 20px; border-radius: 18px; text-align: center; color: var(--text);
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rc) 40%, #171b28), #10131c 65%);
  border: 1px solid color-mix(in srgb, var(--rc) 50%, transparent);
  box-shadow: 0 24px 70px rgba(0,0,0,.65), 0 0 40px color-mix(in srgb, var(--rc) 20%, transparent);
}
.sm-x { position: absolute; top: 10px; right: 10px; z-index: 3; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: none; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; transform: rotate(45deg); }
.sm-x:hover { background: rgba(255,255,255,.18); }
.sm-art { display: flex; justify-content: center; min-height: 150px; align-items: center; filter: drop-shadow(0 10px 18px rgba(0,0,0,.5)); }
.sm-art .sc-pile { transform: scale(1.6); margin: 30px 0; }
.sm-rar { color: var(--rc); font-family: var(--font-display); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }
.sm-box h3 { margin: 2px 0 0; font-family: 'Russo One', var(--font-display); font-size: 28px; color: #fff; }
.sm-sub { color: var(--muted); font-size: 13px; }
.sm-box p { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: #d0d5e0; }
.sm-list { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.3); text-align: left; display: flex; flex-direction: column; gap: 5px; }
.sm-list small { color: var(--muted); font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 2px; }
.sm-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: color-mix(in srgb, var(--rc) 60%, #fff); }
.sm-row em { margin-left: auto; font-style: normal; font-weight: 400; font-size: 12px; color: var(--muted); }
.sm-row.has em { color: #7dffb0; }
.sm-save { margin-top: 12px; color: #ff9a8a; font-weight: 700; font-size: 13px; }
.sm-buy {
  margin-top: 14px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, #ffe17a, #f0a71e); color: #3a2008; border: 1px solid #ffe9a8; box-shadow: 0 4px 0 #9a5c0a, inset 0 1px 0 rgba(255,255,255,.6);
  font-family: var(--font-display); font-size: 19px; letter-spacing: .5px; transition: transform .1s, filter .15s;
}
.sm-buy b { font-weight: 700; }
.sm-buy .sc-cur { width: 24px; height: 24px; }
.sm-buy:hover { filter: brightness(1.08); }
.sm-buy:active { transform: translateY(2px); box-shadow: 0 2px 0 #9a5c0a; }
.sm-buy:disabled { background: rgba(46,204,113,.15); border-color: rgba(46,204,113,.5); color: #7dffb0; box-shadow: none; cursor: default; }

/* ---------- телефоны ---------- */
@media (max-width: 760px) {
  .shop-feats { grid-template-columns: 1fr; }
  .shop-feat { padding: 12px 14px; gap: 10px; }
  .shop-feat .sf-art canvas { width: 110px !important; height: 110px !important; }
  .sf-info h3 { font-size: 21px; }
  .sf-info p { display: none; }
  .shop-feat .sc-price { font-size: 17px; padding: 6px 14px; }
}
@media (max-width: 560px) {
  .shop-hero { height: 200px; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .shop-grid.g-wide { grid-template-columns: 1fr; }
  .shop-bal { display: none; }
  .shop-tab { padding: 7px 11px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .shop-hero { height: 150px; }
  .sh-bubble { font-size: 12px; padding: 5px 9px; }
}
/* узкая шапка (телефон) — по ширине самой шапки, а не окна */
@container (max-width: 560px) {
  .sh-bubble { font-size: 12px; padding: 5px 9px; }
}

/* ---------- баннер лавки по референсу (shopBanner.js): тёмная сцена, герой справа; заголовок слева вверху,
   баланс справа вверху, у торговца — горка монет и под ней кнопка «Забрать» ---------- */
.shop-banner {
  --acc: #5fb8ff;
  position: relative; height: 340px; border-radius: 16px; overflow: hidden; container-type: inline-size; color: #fff;
  background: #15171d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.35);
}
.bn-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bn-head { position: absolute; left: 24px; top: 22px; z-index: 1; max-width: 56%; pointer-events: none; }
.bn-title { margin: 0; font: 400 48px/1.05 'Russo One', var(--font-display); letter-spacing: .5px; color: #fff; text-shadow: 0 4px 18px rgba(0,0,0,.5); }
.bn-sub { margin: 8px 0 0; font: 800 15px/1.3 var(--font-body, inherit); letter-spacing: .8px; text-transform: uppercase; color: #9aa1ae; }
.bn-wallet { position: absolute; right: 20px; top: 20px; z-index: 2; }
.bn-wallet .cur-pill.bn-gain { border-color: #ffc83a; }
.bn-wallet .cur-pill.bn-gain .cur-ico { animation: bnGain .28s ease-out; }
@keyframes bnGain { 0% { transform: scale(1); } 40% { transform: scale(1.35) rotate(-8deg); filter: drop-shadow(0 0 6px #ffd23f); } 100% { transform: scale(1); } }

/* ---------- «Забрать» на горке монет (место считает shopBanner.js): золотая плашка, сама манит — тёплый ореол
   пульсирует, кнопка слегка «дышит»; пока ждём следующего раза — серый таймер ---------- */
.cp-btn {
  position: absolute; left: 0; top: 0; z-index: 2; display: inline-flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 18px; border: none; border-radius: 9px; cursor: pointer; white-space: nowrap;
  font: 500 15px var(--font-display); letter-spacing: .8px; transition: filter .15s, box-shadow .15s;
}
.cp-btn.ready {
  color: #3a2008; background: linear-gradient(180deg, #ffe17a, #f0a71e);
  box-shadow: 0 3px 0 #9a5c0a, inset 0 1px 0 rgba(255,255,255,.6);
  animation: cpCall 1.8s ease-in-out infinite;
}
.cp-btn.ready:hover { filter: brightness(1.1); animation-play-state: paused; }
.cp-btn.ready:active { box-shadow: 0 2px 0 #9a5c0a; translate: 0 2px; }
@keyframes cpCall {
  0%, 100% { scale: 1; box-shadow: 0 3px 0 #9a5c0a, inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 0 rgba(255,200,80,.6); }
  50% { scale: 1.05; box-shadow: 0 3px 0 #9a5c0a, inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 9px rgba(255,200,80,0); }
}
.cp-btn:disabled {
  cursor: default; font-variant-numeric: tabular-nums; animation: none; filter: none;
  background: rgba(10,12,16,.75); color: #a9afbc; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
/* «+20» всплывает над плашкой монет и тает */
.bn-wallet .cur-pill { position: relative; }
.bn-plus {
  position: absolute; left: 50%; top: 100%; pointer-events: none; white-space: nowrap;
  font: 400 18px 'Russo One', var(--font-display); color: #ffe08a; text-shadow: 0 2px 0 #6b3a0c, 0 0 10px rgba(255,190,70,.7);
  animation: bnPlus 1.4s ease-out forwards;
}
@keyframes bnPlus { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.7); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 70% { opacity: 1; transform: translate(-50%, -2px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -8px); } }

@container (max-width: 620px) {
  .bn-head { left: 14px; top: 56px; max-width: 70%; }
  .bn-title { font-size: 30px; }
  .bn-sub { margin-top: 6px; font-size: 11.5px; }
  .bn-wallet { right: 12px; top: 12px; }
  .cp-btn { height: 30px; padding: 0 14px; font-size: 13.5px; }
}
@media (max-width: 560px) { .shop-banner { height: 320px; } }
/* в магазине баннер пониже — сцена прежнего размера, но обрезана сверху почти по голову торговца, чтобы витрина
   была видна сразу; баланс — только в шапке страницы */
.shop .shop-banner { height: 190px; }
.shop .shop-banner .bn-scene { top: auto; bottom: 0; height: 270px; }
@media (max-width: 560px) { .shop .shop-banner { height: 180px; } .shop .shop-banner .bn-scene { height: 250px; } }
@container (max-width: 620px) { .shop-banner.no-wallet .bn-head { top: 16px; } }
/* содержимое капсулы/набора: плитки (картинка, название цветом редкости, шанс); наведение — предпросмотр */
.sm-list { flex: 0 0 auto; }
.sm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; align-content: start; }
.sm-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 6px; border-radius: 10px; text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 16%, transparent), rgba(0,0,0,.15)); border-top: 2px solid var(--rc); cursor: default; }
.sm-tile:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 28%, transparent), rgba(0,0,0,.15)); }
.sm-tile .sm-art { display: inline-flex; width: 44px; height: 44px; }
.sm-tile .sm-art canvas { width: 44px !important; height: 44px !important; }
.sm-tile b { font-size: 12px; line-height: 1.15; color: color-mix(in srgb, var(--rc) 55%, #fff); }
.sm-tile em { font-style: normal; font-size: 12px; font-weight: 800; color: #ffe08a; }
.sm-tile .sm-have { position: absolute; top: 4px; right: 4px; display: inline-flex; color: #7dffb0; }

/* ================= Окно капсулы — баннер: сцена на всю ширину, легендарка справа, остальное слева ================= */
.cs-modal { backdrop-filter: blur(6px); }
.cs-sheet {
  --rc: #e4ae39;
  position: relative; width: min(1060px, 96vw); height: min(620px, 92vh); border-radius: 18px; overflow: hidden; background: #0b0e16;
  border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent);
  box-shadow: 0 30px 80px rgba(0,0,0,.75), 0 0 60px color-mix(in srgb, var(--rc) 25%, transparent);
  animation: csIn .35s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes csIn { from { transform: scale(.94) translateY(12px); opacity: 0; } }
.cs-scene { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 78px); display: block; } /* земля сцены — у нижней панели */
.cs-x { position: absolute; top: 14px; right: 14px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.45); color: #fff; display: inline-flex; align-items: center; justify-content: center; transform: rotate(45deg); cursor: pointer; }
.cs-x:hover { background: rgba(0,0,0,.7); }
.cs-left {
  position: absolute; left: 0; top: 0; bottom: 78px; z-index: 2; width: 56%; padding: 30px 34px 18px; overflow-y: auto;
  display: flex; flex-direction: column;
  background: linear-gradient(90deg, rgba(7,9,15,.94) 0%, rgba(7,9,15,.82) 62%, rgba(7,9,15,0) 100%);
}
.cs-kicker { font: 700 12px/1 Inter, sans-serif; letter-spacing: 3px; text-transform: uppercase; color: var(--rc); }
.cs-title { margin: 8px 0 6px; font: 400 44px/1.05 'Russo One', var(--font-display); letter-spacing: .5px; color: #fff;
  text-shadow: 0 3px 0 rgba(0,0,0,.5), 0 0 30px color-mix(in srgb, var(--rc) 35%, transparent); }
.cs-desc { margin: 0 0 18px; max-width: 470px; font-size: 14px; line-height: 1.45; color: #b9c2d3; }
.cs-rest-h { margin: auto 0 10px; font: 700 11.5px/1 Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #8e9ab0; }
.cs-rest { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; }
.cs-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px 9px; border-radius: 12px; text-align: center; cursor: default;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 24%, rgba(18,22,34,.9)), rgba(10,12,20,.92));
  border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08); transition: transform .15s, box-shadow .15s;
}
.cs-tile:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 8px 22px color-mix(in srgb, var(--rc) 30%, transparent); }
.cs-art { display: inline-flex; width: 64px; height: 64px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.cs-art canvas { width: 64px !important; height: 64px !important; }
.cs-tile b { margin-top: 4px; font-size: 13px; line-height: 1.15; color: #fff; }
.cs-tile small { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: color-mix(in srgb, var(--rc) 75%, #fff); }
.cs-tile em { margin-top: 3px; font-style: normal; font-size: 14px; font-weight: 800; color: #ffe08a; }
.cs-have { position: absolute; top: 6px; right: 6px; display: inline-flex; color: #7dffb0; }
/* легендарка: подпись над головой героя (он стоит на 76% ширины сцены), иконки — столбиком справа от него */
.cs-hero { position: absolute; z-index: 2; top: 30px; left: 76%; transform: translateX(-50%); text-align: center; pointer-events: none; white-space: nowrap; }
.cs-hero-r { display: block; font: 700 12px/1 Inter, sans-serif; letter-spacing: 3px; text-transform: uppercase; color: var(--rc); text-shadow: 0 0 12px color-mix(in srgb, var(--rc) 50%, transparent); }
.cs-hero-name { display: block; margin-top: 8px; font: 400 44px/1.05 'Russo One', var(--font-display); letter-spacing: .5px; color: #fff; text-shadow: 0 3px 12px rgba(0,0,0,.85); }
.cs-hero-line { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 2px; pointer-events: auto; }
.cs-hero-line em { font-style: normal; font-size: 22px; font-weight: 900; color: #ffe08a; text-shadow: 0 2px 8px rgba(0,0,0,.8); cursor: help; }
.cs-hero-have { display: inline-flex; color: #7dffb0; }
.cs-feats { position: absolute; z-index: 2; right: 26px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 16px; }
.cs-foot-gap { flex: 1; }
.cs-feat { display: inline-flex; padding: 0; border: none; background: none; color: var(--rc); filter: drop-shadow(0 2px 3px rgba(0,0,0,.9)); }
.cs-feats .cs-feat svg { width: 26px; height: 26px; }
.cs-feat.can-play { cursor: pointer; transition: transform .12s; }
.cs-feat.can-play:hover { transform: scale(1.2); color: #fff; }
.cs-foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 78px; padding: 0 22px 0 34px; display: flex; align-items: center; gap: 16px;
  background: linear-gradient(180deg, rgba(6,8,14,.75), rgba(6,8,14,.95)); border-top: 1px solid color-mix(in srgb, var(--rc) 30%, transparent);
}
.cs-save { font-size: 13px; font-weight: 800; color: #7dffb0; }
.cs-buy {
  display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 30px; border: none; border-radius: 12px; cursor: pointer;
  font: 800 17px Inter, sans-serif; color: #2a1a00; background: linear-gradient(180deg, #ffe27a, #f2b632); box-shadow: 0 5px 0 #a8700c, 0 10px 24px rgba(242,182,50,.35);
  transition: transform .1s, filter .15s;
}
.cs-buy:hover { filter: brightness(1.07); transform: translateY(-1px); }
.cs-buy:active { transform: translateY(3px); box-shadow: 0 2px 0 #a8700c; }
.cs-buy .sc-cur { width: 22px; height: 22px; }
.cs-buy b { font-size: 20px; }
@media (max-width: 760px) {
  .cs-left { width: 100%; background: linear-gradient(180deg, rgba(7,9,15,.6), rgba(7,9,15,.92) 45%); padding: 20px; }
  .cs-title { font-size: 30px; }
  .cs-hero { left: auto; right: 64px; transform: none; text-align: right; } .cs-hero-name { font-size: 22px; } .cs-feats { right: 12px; }
  .cs-foot { padding: 0 14px; }
}