/* Хэллоуин: баннер на главной, чипы категорий, экран ивента с магазином конфет */
:root { --hw: #ff7a1a; --hw2: #a855f7; }

/* баннер */
.hw-banner { width: 100%; display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 10px 14px 10px 10px; border: 0; border-radius: 18px; cursor: pointer; text-align: left; position: relative; overflow: hidden;
  background: radial-gradient(120% 150% at 0% 40%, rgba(255, 122, 26, .32), transparent 60%), radial-gradient(90% 130% at 100% 0%, rgba(168, 85, 247, .28), transparent 60%), linear-gradient(135deg, #2a1216, #1a0f22 60%, #120a18);
  box-shadow: inset 0 0 0 1px rgba(255, 140, 40, .35), inset 0 1px 0 rgba(255, 255, 255, .07), 0 10px 26px rgba(0, 0, 0, .4); transition: transform .25s cubic-bezier(.22, .9, .3, 1); }
.hw-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 180, 90, .16) 50%, transparent 60%); transform: translateX(-100%); animation: hwShine 5s ease-in-out infinite; pointer-events: none; }
@keyframes hwShine { 55%, 100% { transform: translateX(100%); } }
.hw-banner:active { transform: scale(.98); }
.hw-banner[hidden] { display: none; }
.hw-pump { width: 46px; height: 46px; flex: none; animation: hwFloat 3.4s ease-in-out infinite; filter: drop-shadow(0 6px 12px rgba(255, 110, 20, .5)); }
@keyframes hwFloat { 50% { transform: translateY(-3px) rotate(-4deg); } }
.hw-banner-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hw-banner-txt b { font: 800 15px/1 var(--fh); color: #fff; letter-spacing: .3px; }
.hw-banner-txt small { font: 600 12px/1.25 var(--fb); color: #f0b98a; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hw-banner-candy { display: flex; align-items: center; gap: 5px; padding: 7px 10px; border-radius: 12px; background: rgba(0, 0, 0, .38); box-shadow: inset 0 0 0 1px rgba(255, 150, 60, .35); }
.hw-banner-candy b { font: 900 italic 15px/1 'Exo 2', sans-serif; color: #ffb066; }
.hw-banner-candy img { width: 18px; height: 18px; }

/* экран ивента */
.hw { position: fixed; inset: 0; z-index: 9500; overflow-y: auto; -webkit-overflow-scrolling: touch; opacity: 0; transform: translateY(18px); transition: opacity .28s ease, transform .32s cubic-bezier(.22, .9, .3, 1);
  background: radial-gradient(110% 45% at 50% 0%, rgba(255, 122, 26, .2), transparent 60%), radial-gradient(80% 40% at 100% 40%, rgba(168, 85, 247, .16), transparent 70%), var(--bg); }
.hw.in { opacity: 1; transform: none; }
.hw.hidden { display: none; }
.hw-wrap { max-width: 520px; margin: 0 auto; padding: calc(14px + env(safe-area-inset-top)) 14px calc(28px + env(safe-area-inset-bottom)); }
.hw-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.hw-back { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 0; border-radius: 13px; color: #fff; cursor: pointer; background: linear-gradient(180deg, #2a1a22, #1a1018); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.hw-back:active { transform: scale(.92); }
.hw-title { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.hw-title b { font: 800 21px/1 var(--fh); color: #fff; text-transform: uppercase; letter-spacing: .6px; }
.hw-title span { font: 600 12px/1 var(--fb); color: var(--mute); }
.hw-bal { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 13px; background: rgba(255, 122, 26, .14); box-shadow: inset 0 0 0 1px rgba(255, 140, 50, .4); }
.hw-bal b { font: 900 italic 17px/1 'Exo 2', sans-serif; color: #ffb066; }
.hw-bal img { width: 20px; height: 20px; }
.hw-hero { display: flex; align-items: center; gap: 14px; padding: 14px; margin-bottom: 16px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 122, 26, .16), rgba(168, 85, 247, .1)), var(--card); box-shadow: inset 0 0 0 1px rgba(255, 140, 50, .25), 0 10px 28px rgba(0, 0, 0, .35); }
.hw-hero-pump { width: 64px; height: 64px; flex: none; filter: drop-shadow(0 8px 16px rgba(255, 110, 20, .5)); }
.hw-hero div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hw-hero span { font: 600 12.5px/1.45 var(--fb); color: #f2d8c4; }
.hw-goto { align-self: flex-start; padding: 9px 16px; border: 0; border-radius: 11px; cursor: pointer; font: 800 13px/1 var(--fh); color: #2a1000;
  background: linear-gradient(135deg, #ffb84d, #ff6a1a); box-shadow: 0 6px 16px rgba(255, 120, 20, .4); }
.hw-shop-title { margin: 4px 4px 10px; font: 800 16px/1 var(--fh); color: #fff; text-transform: uppercase; letter-spacing: .5px; }
.hw-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.hw-card { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 10px; border-radius: 18px; background: var(--card);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 8px 20px rgba(0, 0, 0, .3); transition: transform .2s; }
.hw-card.off { opacity: .62; }
.hw-card-img { width: 74px; height: 74px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .45)); }
.hw-card-name { text-align: center; font: 700 12.5px/1.2 var(--fb); color: #fff; max-width: 100%; }
.hw-card-val { font: 700 12px/1 'Exo 2', sans-serif; font-style: italic; color: #ffcf5a; }
.hw-buy { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; height: 38px; margin-top: auto; border: 0; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, #ff9d3d, #ff5f1a); box-shadow: 0 6px 16px rgba(255, 110, 20, .35); }
.hw-buy b { font: 900 italic 14px/1 'Exo 2', sans-serif; color: #2a1000; }
.hw-buy img { width: 17px; height: 17px; }
.hw-buy:disabled { cursor: default; background: #26262c; box-shadow: none; }
.hw-buy:disabled b { color: #7a7a82; }
.hw-buy:not(:disabled):active { transform: scale(.95); }
.hw-hint { margin: 14px 4px 0; font: 500 12px/1.45 var(--fb); color: var(--mute); }

/* лёгкая атмосфера на главной: оранжево-фиолетовое свечение по краям */
.cases_characters .category_chip[data-group="theme"] { border-color: rgba(255, 122, 26, .45); }

/* атмосфера ивента: тёплое свечение снизу, туман и силуэты летучих мышей у верхнего края (не перекрывают интерфейс) */
body.hw-on::before { content: ''; position: fixed; inset: auto 0 0 0; height: 38vh; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 100% at 20% 100%, rgba(255, 110, 20, .1), transparent 70%), radial-gradient(60% 90% at 90% 100%, rgba(168, 85, 247, .1), transparent 70%); }
body.hw-on::after { content: ''; position: fixed; top: 60px; left: 0; right: 0; height: 90px; z-index: 1; pointer-events: none; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 90'%3E%3Cg fill='%23120a16'%3E%3Cpath d='M40 30c6-8 12-10 18-6 2-4 5-4 6 0 6-4 12-2 18 6-6-2-10 0-12 4-3-3-6-3-9 0-2-4-6-6-12-4z'/%3E%3Cpath d='M300 18c5-6 10-8 15-5 2-3 4-3 5 0 5-3 10-1 15 5-5-2-8 0-10 3-2-2-5-2-7 0-2-3-5-5-10-3z'/%3E%3Cpath d='M190 55c4-5 8-6 12-4 1-2 3-2 4 0 4-2 8-1 12 4-4-1-7 0-8 3-2-2-4-2-6 0-1-3-4-4-8-3z'/%3E%3C/g%3E%3C/svg%3E") center / 400px 90px repeat-x;
  animation: hwBats 40s linear infinite; }
@keyframes hwBats { from { background-position: 0 0; } to { background-position: 400px 0; } }