/* Ивент «13 свечей» (Хеллоуин 2026) — баннер и окно. Анимируются только transform/opacity. */
.hw13-banner {
    display: flex; align-items: center; gap: 12px; width: calc(100% - 24px); margin: 10px 12px 4px;
    padding: 12px 14px; border: 1px solid rgba(255, 140, 40, .35); border-radius: 16px; cursor: pointer;
    background: radial-gradient(120% 140% at 0% 50%, rgba(255, 120, 20, .22), transparent 60%), linear-gradient(135deg, #1a0f14, #0d0a12);
    color: #fff; text-align: left; font: inherit; box-shadow: 0 6px 22px rgba(255, 100, 0, .12), inset 0 0 0 1px rgba(255, 255, 255, .03);
    -webkit-tap-highlight-color: transparent;
}
.hw13-banner:active { transform: scale(.98); }
.hw13-b-flames { display: flex; gap: 4px; align-items: flex-end; height: 28px; }
.hw13-b-flames i {
    width: 7px; height: 18px; border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%;
    background: radial-gradient(circle at 50% 70%, #fff6c2 0 20%, #ffb43a 45%, #ff5a1a 80%, transparent 82%);
    animation: hw13-flick 1.6s ease-in-out infinite; transform-origin: 50% 100%;
}
.hw13-b-flames i:nth-child(2) { height: 24px; animation-delay: -.5s; }
.hw13-b-flames i:nth-child(3) { animation-delay: -1.1s; }
.hw13-b-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hw13-b-text b { font-size: 16px; letter-spacing: .3px; color: #ffcf8a; }
.hw13-b-text small { font-size: 12px; color: rgba(255, 255, 255, .65); }
.hw13-b-go { font-size: 24px; color: rgba(255, 207, 138, .7); }
.hw13-b-dot {
    min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #ff6a1a; color: #fff;
    font-size: 12px; font-weight: 700; display: grid; place-items: center; animation: hw13-pulse 1.8s ease-in-out infinite;
}

.hw13-modal {
    position: fixed; inset: 0; z-index: 100040; display: flex; align-items: flex-end; justify-content: center;
    background: rgba(0, 0, 0, .7); opacity: 0; pointer-events: none; transition: opacity .2s;
}
.hw13-modal.active { opacity: 1; pointer-events: auto; }
.hw13-sheet {
    position: relative; width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; overscroll-behavior: contain;
    border-radius: 22px 22px 0 0; padding: 22px 16px calc(20px + env(safe-area-inset-bottom));
    background: radial-gradient(90% 50% at 50% 0%, rgba(255, 110, 20, .16), transparent 70%), #0c0a10;
    color: #f4ece4; transform: translateY(30px); transition: transform .25s ease;
    border-top: 1px solid rgba(255, 140, 40, .25);
}
.hw13-modal.active .hw13-sheet { transform: translateY(0); }
.hw13-x {
    position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 0;
    background: rgba(255, 255, 255, .07); color: #fff; font-size: 15px; cursor: pointer;
}
.hw13-head { text-align: center; margin-bottom: 18px; }
.hw13-title { font-size: 26px; font-weight: 800; letter-spacing: 1px; color: #ffcf8a; text-shadow: 0 0 18px rgba(255, 120, 20, .45); }
.hw13-sub { font-size: 13px; color: rgba(255, 255, 255, .55); margin-top: 2px; }

.hw13-row { display: grid; grid-template-columns: repeat(13, 1fr); gap: 3px; align-items: end; height: 92px; padding: 0 2px; }
.hw13-c { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.hw13-wax {
    width: 70%; max-width: 16px; height: 46px; border-radius: 3px 3px 2px 2px;
    background: linear-gradient(90deg, #3a3036, #57494f 45%, #2c2328);
}
.hw13-c.mark .hw13-wax { height: 56px; }
.hw13-fl {
    width: 55%; max-width: 12px; height: 22px; margin-bottom: 2px; opacity: 0; transform: scale(.4);
    border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%; transform-origin: 50% 100%;
    background: radial-gradient(circle at 50% 70%, #fff6c2 0 20%, #ffb43a 45%, #ff5a1a 80%, transparent 82%);
    transition: opacity .4s, transform .4s;
}
.hw13-c.lit .hw13-fl { opacity: 1; transform: scale(1); animation: hw13-flick 1.7s ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
.hw13-c.lit .hw13-wax { background: linear-gradient(90deg, #7a6253, #e9d6bf 45%, #8d7462); box-shadow: 0 -6px 14px rgba(255, 140, 40, .35); }
.hw13-c em { position: absolute; bottom: -18px; font-style: normal; font-size: 10px; color: #ffb45e; font-weight: 700; }
.hw13-count { text-align: center; margin-top: 26px; font-size: 15px; }
.hw13-count b { color: #ffcf8a; font-size: 20px; }
.hw13-timer { text-align: center; margin-top: 6px; font-size: 12px; color: rgba(255, 255, 255, .55); line-height: 1.4; }

.hw13-tiers { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.hw13-tier {
    display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 14px;
    background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06);
}
.hw13-tier.ready { border-color: rgba(255, 140, 40, .55); background: rgba(255, 120, 20, .1); }
.hw13-tier.done { opacity: .6; }
.hw13-at { font-weight: 800; color: #ffb45e; min-width: 40px; }
.hw13-tt { flex: 1; font-size: 14px; }
.hw13-btn {
    border: 0; border-radius: 10px; padding: 8px 14px; font: inherit; font-weight: 700; font-size: 13px; color: #1a0d05;
    background: linear-gradient(180deg, #ffcf8a, #ff8a2a); cursor: pointer;
}
.hw13-btn:disabled { opacity: .6; }
.hw13-ok { font-size: 12px; color: #7ee2a0; }
.hw13-lock { font-size: 12px; color: rgba(255, 255, 255, .45); }

.hw13-how { margin-top: 18px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .03); }
.hw13-how-t { font-size: 13px; color: rgba(255, 255, 255, .7); margin-bottom: 8px; }
.hw13-how-g { display: flex; flex-wrap: wrap; gap: 6px; }
.hw13-how-g span { font-size: 12px; padding: 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, .06); }

.hw13-toast {
    position: sticky; bottom: 0; margin-top: 14px; padding: 11px 14px; border-radius: 12px; text-align: center; font-size: 13px;
    background: #1f3a2a; color: #d6ffe4; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s;
}
.hw13-toast.err { background: #3a1f22; color: #ffd8dc; }
.hw13-toast.show { opacity: 1; transform: translateY(0); }

@keyframes hw13-flick {
    0%, 100% { transform: scale(1, 1) rotate(-2deg); opacity: 1; }
    35% { transform: scale(.92, 1.08) rotate(2deg); opacity: .9; }
    60% { transform: scale(1.05, .94) rotate(-1deg); opacity: 1; }
}
@keyframes hw13-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
    .hw13-b-flames i, .hw13-c.lit .hw13-fl, .hw13-b-dot { animation: none; }
}