/* паутина на нике */
.hw-web { --hw-web: rgba(96, 104, 118, .6); }
[data-theme="dark"] .hw-web { --hw-web: rgba(226, 230, 240, .5); }
.hw-web > :first-child { position: relative; isolation: isolate; }
.hw-web > :first-child::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -.4em;
  right: -.35em;
  bottom: -.4em;
  left: -.35em;
  background: var(--hw-web);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40' fill='none' stroke='%23000' stroke-width='.9' stroke-linecap='round'%3E%3Cpath d='M40 20L0 4M40 20L0 36M40 20L80 4M40 20L80 36M40 20L22 0M40 20L58 0M40 20L22 40M40 20L58 40M40 20L0 20M40 20L80 20'/%3E%3Cpath d='M31 17Q34 14 36 12Q40 13 44 12Q46 14 49 17Q48 20 49 23Q46 26 44 28Q40 27 36 28Q34 26 31 23Q32 20 31 17Z'/%3E%3Cpath d='M20 12Q27 9 30 4Q40 7 50 4Q53 9 60 12Q58 20 60 28Q53 31 50 36Q40 33 30 36Q27 31 20 28Q22 20 20 12Z'/%3E%3Cpath d='M8 7Q18 5 23 0M57 0Q62 5 72 7M8 33Q18 35 23 40M57 40Q62 35 72 33M9 7Q10 20 9 33M71 7Q70 20 71 33'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40' fill='none' stroke='%23000' stroke-width='.9' stroke-linecap='round'%3E%3Cpath d='M40 20L0 4M40 20L0 36M40 20L80 4M40 20L80 36M40 20L22 0M40 20L58 0M40 20L22 40M40 20L58 40M40 20L0 20M40 20L80 20'/%3E%3Cpath d='M31 17Q34 14 36 12Q40 13 44 12Q46 14 49 17Q48 20 49 23Q46 26 44 28Q40 27 36 28Q34 26 31 23Q32 20 31 17Z'/%3E%3Cpath d='M20 12Q27 9 30 4Q40 7 50 4Q53 9 60 12Q58 20 60 28Q53 31 50 36Q40 33 30 36Q27 31 20 28Q22 20 20 12Z'/%3E%3Cpath d='M8 7Q18 5 23 0M57 0Q62 5 72 7M8 33Q18 35 23 40M57 40Q62 35 72 33M9 7Q10 20 9 33M71 7Q70 20 71 33'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  pointer-events: none;
}

/* истории на главной */
.story-scroll-container::before { content: ""; position: absolute; z-index: 3; top: 0; right: 0; width: 84px; height: 86px; background: url(/games/halloween/img/web.webp?v=1) right top / contain no-repeat; transform: scaleX(-1); pointer-events: none; }
.story-scroll-container::after { content: ""; position: absolute; z-index: 4; top: 20px; right: 12px; width: 28px; height: 40px; background: url(/games/halloween/img/spider.webp?v=1) center top / contain no-repeat; transform-origin: 50% 0; animation: hwSwing 3.4s ease-in-out infinite; pointer-events: none; }
@keyframes hwSwing {
  0%, 100% { transform: rotate(8deg); }
  50% { transform: rotate(-8deg) translateY(2px); }
}
@media (prefers-reduced-motion: reduce) {
  .story-scroll-container::after, .hw-pw::after, .hw-toast__ic { animation: none; }
}
/* тыква сверху */
.hw-toast__a { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 44px 12px 12px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 20px; background: linear-gradient(135deg, #2a1650, #4a1f6e 55%, #a2400f); color: #fff; text-decoration: none; }
.hw-toast.is-purple .hw-toast__a { background: linear-gradient(135deg, #1d1236, #4b1f84 60%, #4f7a10); }
.hw-toast.is-gold .hw-toast__a { background: linear-gradient(135deg, #3a2306, #8a5a06 55%, #d99a0b); }
.hw-toast__ic { display: flex; flex: none; align-items: center; justify-content: center; width: 56px; height: 56px; animation: hwRoll 2.4s ease-in-out infinite; }
.hw-toast__ic img { width: 56px; height: 56px; object-fit: contain; }
.hw-toast__ic .hw-emo { font-size: 42px; line-height: 1; }
.hw-toast__t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hw-toast__t small { color: #ffb347; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.hw-toast__t b { color: #fff; font-size: 15px; }
.hw-toast__t span { color: rgba(255, 255, 255, .82); font-size: 12px; }
.hw-toast .toast2026-close-btn { background: rgba(255, 255, 255, .18); color: #fff; }
.hw-toast.is-caught { opacity: .6; }
@keyframes hwRoll {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-3px) rotate(-12deg); }
  60% { transform: translateX(3px) rotate(10deg); }
}

.hw-boo { position: fixed; inset: 0; z-index: 100002; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 20px; background: rgba(10, 6, 25, 0); transition: background .3s, opacity .35s; }
.hw-boo.is-on { background: rgba(10, 6, 25, .8); }
.hw-boo.is-off { opacity: 0; }
.hw-boo__ghost { width: min(64vw, 280px); transform: translateX(-130vw); }
.hw-boo__ghost img { display: block; width: 100%; height: auto; }
.hw-boo__ghost .hw-emo { font-size: 160px; }
.hw-boo.is-on .hw-boo__ghost { animation: hwBoo .9s cubic-bezier(.2, 1.2, .4, 1) forwards, hwHover 2.6s ease-in-out .9s infinite; }
.hw-boo__card { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; max-width: 340px; padding: 16px; border-radius: 20px; background: #1d1631; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); color: #fff; text-align: center; opacity: 0; transform: translateY(20px); transition: opacity .3s .55s, transform .3s .55s; }
.hw-boo.is-on .hw-boo__card { opacity: 1; transform: none; }
.hw-boo__h { font-size: 44px; font-weight: 900; letter-spacing: .06em; line-height: 1; }
.hw-boo__t { font-size: 15px; }
.hw-boo__t b { color: #ffb347; }
.hw-boo__g { padding: 4px 12px; border-radius: 999px; background: rgba(255, 138, 31, .22); color: #ffd28a; font-size: 14px; font-weight: 800; }
.hw-boo__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.hw-boo .hw-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-size: 14px; font-weight: 800; text-decoration: none; cursor: pointer; }
.hw-boo .hw-btn.is-main { background: linear-gradient(180deg, #ffa63d, #ff7a12); }
@keyframes hwBoo {
  0% { transform: translateX(-130vw) scale(.6) rotate(-12deg); }
  60% { transform: translateX(5vw) scale(1.12) rotate(6deg); }
  80% { transform: translateX(-2vw) scale(1) rotate(-3deg); }
  100% { transform: translateX(0) scale(1) rotate(0); }
}
@keyframes hwHover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.hw-pw-box { position: relative; }
.hw-pw { position: absolute; z-index: 2; top: 0; right: 0; width: 100px; height: 102px; -webkit-tap-highlight-color: transparent; }
.hw-pw::before { content: ""; position: absolute; inset: 0; background: url(/games/halloween/img/web.webp?v=1) right top / contain no-repeat; transform: scaleX(-1); }
.hw-pw::after { content: ""; position: absolute; top: 26px; right: 14px; width: 32px; height: 44px; background: url(/games/halloween/img/spider.webp?v=1) center top / contain no-repeat; transform-origin: 50% 0; animation: hwSwing 3.4s ease-in-out infinite; }
.hw-pw:active::after { animation-duration: .6s; }

/* плитка на главной */
.hw-tile { display: flex; align-items: center; gap: 12px; margin: 0 8px 8px; padding: 10px 14px 10px 10px; border-radius: 14px; background: #fff; box-shadow: 0 2px 6px 0 rgba(44, 61, 120, .07); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform .2s; }
.hw-tile:active { transform: scale(.985); }
.hw-tile__logo { flex: none; width: 31%; max-width: 112px; height: auto; }
.hw-tile__t { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.hw-tile__t b { color: #1b1f24; font-size: 15.5px; font-weight: 700; }
.hw-tile__t span { margin-top: 1px; color: #818c99; font-size: 12.5px; }
.hw-tile__t .is-hot { color: #ff7a12; font-weight: 700; }
.hw-tile__btn { flex: none; padding: 9px 14px; border-radius: 12px; background: #ff8a1f; color: #fff; font-size: 14px; font-weight: 700; }
[data-theme="dark"] .hw-tile { background: var(--fon_korob, #10151c); }
[data-theme="dark"] .hw-tile__t b { color: #e6e8eb; }
[data-theme="dark"] .hw-tile__t span { color: #9aa4b2; }
@media (max-width: 881px) { .hw-tile { margin: 0 0 8px; } }