/* ═══════════════════════════════════════════════════════════════════════
   Космический Оракул — v1.50 «Окно между мирами» (Хэллоуин-ивент Самайн)
   Баннер ивента + лёгкая сезонная амбиент-тема. Подключается hw_banner.php.
   Стиль сайта: холодный вакуум, срезанные углы, тонкие линии — но в
   самайнском настроении: фиолет портала + тыквенный янтарь.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --hw-violet: #8b5cf6;
    --hw-violet-deep: #2a1554;
    --hw-pumpkin: #ff8a2a;
    --hw-pumpkin-hot: #ffb347;
    --hw-ink: #0a0614;
}

/* ── Сезонная амбиент-тема: тихая виньетка по краям вьюпорта ───────── */
body.hw-on::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background:
        radial-gradient(60vw 42vh at 0% 0%, rgba(139, 92, 246, .10), transparent 62%),
        radial-gradient(52vw 40vh at 100% 100%, rgba(255, 138, 42, .08), transparent 60%);
    mix-blend-mode: screen;
}

/* ── Баннер ─────────────────────────────────────────────────────────── */
.hw-banner {
    position: relative;
    width: min(1080px, calc(100% - 32px));
    margin: 18px auto 6px;
    display: grid;
    grid-template-columns: 168px 1fr;
    gap: 8px 26px;
    align-items: center;
    padding: 22px 56px 22px 26px;
    color: #efe7ff;
    background:
        radial-gradient(120% 160% at 8% 0%, rgba(139, 92, 246, .22), transparent 55%),
        radial-gradient(110% 150% at 96% 110%, rgba(255, 138, 42, .14), transparent 55%),
        linear-gradient(160deg, #120a26 0%, var(--hw-ink) 58%, #14092a 100%);
    border: 1px solid rgba(139, 92, 246, .38);
    clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
    box-shadow: 0 0 0 1px rgba(255, 138, 42, .08), 0 18px 60px -22px rgba(139, 92, 246, .45);
    overflow: hidden;
    animation: hw-in .7s cubic-bezier(.2, .8, .2, 1) both;
}
/* display:grid/flex перебивает браузерное [hidden] — даём явное скрытие
   (крестик баннера и свёртывание формы кода полагаются на hidden). */
.hw-banner[hidden],
.hw-code-form[hidden] { display: none !important; }
.hw-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 179, 71, .06) 46%, transparent 60%);
    background-size: 240% 100%;
    animation: hw-sheen 7s linear infinite;
}
@keyframes hw-in {
    from { opacity: 0; transform: translateY(-14px); }
}
@keyframes hw-sheen {
    from { background-position: 130% 0; }
    to   { background-position: -130% 0; }
}

/* Портал */
.hw-portal {
    position: relative;
    width: 150px;
    height: 150px;
    justify-self: center;
    filter: drop-shadow(0 0 22px rgba(139, 92, 246, .5));
}
.hw-ring,
.hw-ring.r2 {
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    border: 2px solid rgba(139, 92, 246, .75);
    border-top-color: var(--hw-pumpkin);
    border-right-color: rgba(255, 138, 42, .35);
    animation: hw-spin 9s linear infinite;
}
.hw-ring.r2 {
    inset: 26%;
    border-width: 1px;
    border-top-color: var(--hw-pumpkin-hot);
    border-right-color: rgba(139, 92, 246, .5);
    animation-duration: 5.5s;
    animation-direction: reverse;
}
.hw-core {
    position: absolute;
    inset: 40%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 22px;
    color: #fff;
    background: radial-gradient(circle at 38% 34%, #b28cff, var(--hw-violet) 55%, #4b1e9e);
    box-shadow: 0 0 26px rgba(139, 92, 246, .85), inset 0 0 14px rgba(255, 179, 71, .5);
    animation: hw-pulse 2.6s ease-in-out infinite;
}
.hw-wisp {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--hw-pumpkin-hot);
    box-shadow: 0 0 12px 2px rgba(255, 138, 42, .8);
    opacity: .85;
    animation: hw-float 6.5s ease-in-out infinite;
}
.hw-wisp.w2 { background: #c9a6ff; box-shadow: 0 0 12px 2px rgba(139, 92, 246, .8); animation-delay: -2.2s; }
.hw-wisp.w3 { width: 5px; height: 5px; animation-delay: -4.4s; animation-duration: 8s; }
@keyframes hw-spin   { to { transform: rotate(360deg); } }
@keyframes hw-pulse  { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes hw-float  {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(46px, -34px) scale(1.25); }
    100% { transform: translate(0, 0) scale(1); }
}

/* Копия */
.hw-copy { min-width: 0; }
.hw-kicker {
    margin: 0 0 6px;
    font: 600 11px/1.4 'Onest', sans-serif;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--hw-pumpkin-hot);
}
.hw-title {
    margin: 0 0 8px;
    font: 700 clamp(19px, 2.6vw, 27px)/1.2 'Unbounded', sans-serif;
    background: linear-gradient(92deg, #e9dcff 8%, var(--hw-pumpkin-hot) 55%, var(--hw-pumpkin) 92%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hw-sub, .hw-note {
    margin: 0 0 6px;
    font: 400 14px/1.55 'Onest', sans-serif;
    color: rgba(239, 231, 255, .82);
}
.hw-note { color: rgba(255, 179, 71, .9); font-style: italic; }
.hw-count {
    margin: 8px 0 0;
    font: 600 12.5px/1.5 'Onest', sans-serif;
    letter-spacing: .04em;
    color: rgba(239, 231, 255, .72);
}
.hw-count b { color: var(--hw-pumpkin-hot); font-variant-numeric: tabular-nums; }

/* Кнопки */
.hw-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    align-items: center;
    margin-top: 12px;
}
.hw-btn {
    cursor: pointer;
    border: 1px solid rgba(255, 138, 42, .55);
    background: linear-gradient(160deg, rgba(255, 138, 42, .18), rgba(139, 92, 246, .16));
    color: #ffe9d2;
    font: 600 13px/1 'Onest', sans-serif;
    letter-spacing: .04em;
    padding: 11px 18px;
    clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.hw-btn:hover { transform: translateY(-2px); filter: brightness(1.15); }
.hw-btn:active { transform: translateY(0); }
.hw-btn:disabled { opacity: .55; cursor: default; transform: none; filter: none; }
.hw-gift { box-shadow: 0 0 22px -6px rgba(255, 138, 42, .65); animation: hw-gift-glow 2.8s ease-in-out infinite; }
@keyframes hw-gift-glow {
    0%, 100% { box-shadow: 0 0 22px -6px rgba(255, 138, 42, .65); }
    50%      { box-shadow: 0 0 30px -4px rgba(255, 138, 42, .95); }
}
.hw-code-btn { border-color: rgba(139, 92, 246, .6); color: #e6dbff; }
.hw-chip {
    font: 600 11.5px/1 'Onest', sans-serif;
    letter-spacing: .08em;
    color: #ffd9ae;
    border: 1px dashed rgba(255, 138, 42, .55);
    padding: 7px 12px;
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

/* Форма кода */
.hw-code-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
.hw-code-form input {
    flex: 1 1 200px;
    max-width: 280px;
    background: rgba(10, 6, 20, .75);
    border: 1px solid rgba(139, 92, 246, .5);
    color: #f3edff;
    font: 500 14px/1.2 'Onest', sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 11px 14px;
    outline: none;
}
.hw-code-form input:focus { border-color: var(--hw-pumpkin); box-shadow: 0 0 0 3px rgba(255, 138, 42, .15); }
.hw-msg {
    margin: 10px 0 0;
    min-height: 18px;
    font: 500 13px/1.45 'Onest', sans-serif;
    color: #b8f5c8;
}
.hw-msg.err { color: #ff9d9d; }

/* Закрыть */
.hw-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid rgba(139, 92, 246, .4);
    border-radius: 50%;
    color: rgba(239, 231, 255, .7);
    cursor: pointer;
    transition: color .2s, border-color .2s, transform .2s;
}
.hw-close:hover { color: #fff; border-color: var(--hw-pumpkin); transform: rotate(90deg); }

/* Полёт монеты к счёту — мини-фейерверк на кнопке */
.hw-btn.won { animation: hw-won .9s cubic-bezier(.2, .8, .2, 1) both; border-color: #9ff0b0; }
@keyframes hw-won {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.07); box-shadow: 0 0 34px -2px rgba(120, 240, 150, .8); }
    100% { transform: scale(1); }
}
.hw-shake { animation: hw-shake .5s ease both; }
@keyframes hw-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    55% { transform: translateX(5px); }
    80% { transform: translateX(-3px); }
}

/* ── Чип множителя на странице чар (charm.php) ─────────────────────── */
.ch-hw-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 600 11px/1 'Onest', sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--hw-pumpkin-hot);
    border: 1px dashed rgba(255, 138, 42, .6);
    padding: 6px 12px;
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
    animation: hw-chip-pulse 3s ease-in-out infinite;
}
@keyframes hw-chip-pulse {
    0%, 100% { box-shadow: 0 0 0 rgba(255, 138, 42, 0); }
    50%      { box-shadow: 0 0 18px -4px rgba(255, 138, 42, .8); }
}

/* ── Адаптив ────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .hw-banner {
        grid-template-columns: 96px 1fr;
        gap: 6px 16px;
        padding: 18px 44px 18px 16px;
        width: calc(100% - 20px);
        margin-top: 12px;
    }
    .hw-portal { width: 92px; height: 92px; }
    .hw-core { font-size: 15px; }
    .hw-title { font-size: 17px; }
    .hw-sub, .hw-note { font-size: 13px; }
    .hw-btn { padding: 10px 14px; font-size: 12.5px; }
}

/* ── Бережём тех, кто просил меньше движения ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hw-banner, .hw-banner::after { animation: none; }
    .hw-ring, .hw-ring.r2, .hw-core, .hw-wisp, .hw-gift, .ch-hw-chip { animation: none !important; }
    .hw-btn, .hw-close { transition: none; }
}