/** Halloween skin. Loaded after page styles; all rules stay scoped to this skin. */
html[data-skin="halloween"] {
    color-scheme: dark;
    --bg: #110e18;
    --surface: #1d1728;
    --border: #44334f;
    --text: #f6edf9;
    --muted: #bbabc7;
    --accent: #ffac61;
    --accent-dim: rgba(255, 172, 97, 0.12);
    --accent-ink: #281508;
    --highlight: #c9b1f4;
    --highlight-dim: rgba(201, 177, 244, 0.12);
    --banner-bg: #2b1e35;
    --glass-border: var(--border);
    --text-main: var(--text);
    --shadow-card: 0 24px 64px rgba(0, 0, 0, 0.4);
    --bs-body-color: var(--text);
    --bs-body-bg: var(--bg);
    --bs-secondary-color: var(--muted);
    --bs-border-color: var(--border);
    --bs-emphasis-color: var(--text);
    --bs-primary-rgb: 255, 172, 97;
}

html[data-skin="halloween"][data-bs-theme="light"] {
    color-scheme: light;
    --bg: #f5edf7;
    --surface: #fffaf5;
    --border: #d9c7df;
    --text: #302039;
    --muted: #715a7a;
    --accent: #a44613;
    --accent-dim: rgba(164, 70, 19, 0.09);
    --accent-ink: #ffffff;
    --highlight: #6c4599;
    --highlight-dim: rgba(108, 69, 153, 0.09);
    --banner-bg: #f4e4d8;
    --shadow-card: 0 24px 64px rgba(73, 41, 83, 0.12);
    --bs-primary-rgb: 164, 70, 19;
}

html[data-skin="halloween"] body {
    background: radial-gradient(ellipse at 15% 15%, var(--highlight-dim), transparent 50%),
        radial-gradient(ellipse at 85% 85%, var(--accent-dim), transparent 50%), var(--bg);
}

html[data-skin="halloween"] body::before {
    background-image: radial-gradient(circle, var(--highlight) 1px, transparent 1.5px);
    background-size: 48px 48px;
    opacity: 0.12;
}

html[data-skin="halloween"] .main-container {
    border-radius: 20px;
}

html[data-skin="halloween"] .main-container::after {
    height: 3px;
    background: linear-gradient(90deg, var(--highlight), var(--accent), var(--highlight));
}

html[data-skin="halloween"] .header-section {
    flex-shrink: 0;
    background: var(--surface);
}

/* A compact illustrated invitation leaves room for the learning controls. */
html[data-skin="halloween"] .newyear-banner {
    position: relative;
    flex-shrink: 0;
    min-height: 96px;
    padding: 23px 128px 20px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--banner-bg) url('../img/halloween-night.svg') no-repeat right center / 136px 96px;
    color: var(--text);
    text-align: left;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.12rem;
    font-weight: 400;
    line-height: 1.3;
    text-wrap: balance;
}

html[data-skin="halloween"] .newyear-banner::before {
    content: 'HALLOWEEN EDITION';
    display: block;
    margin-bottom: 7px;
    color: var(--accent);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

html[data-skin="halloween"] .navbar-logo {
    animation-name: halloweenGlow;
}

@keyframes halloweenGlow {
    0%, 100% { box-shadow: 0 0 0 3px var(--accent-dim); }
    50% { box-shadow: 0 0 16px var(--accent-dim); }
}

html[data-skin="halloween"] .section-title {
    color: var(--highlight);
    letter-spacing: 0.14em;
}

html[data-skin="halloween"] .navbar-logo,
html[data-skin="halloween"] .dark-mode-toggle,
html[data-skin="halloween"] .modern-checkbox,
html[data-skin="halloween"] .btn,
html[data-skin="halloween"] .btn-back,
html[data-skin="halloween"] .btn-nav,
html[data-skin="halloween"] #autocomplete,
html[data-skin="halloween"] #search,
html[data-skin="halloween"] .form-select,
html[data-skin="halloween"] .content-card,
html[data-skin="halloween"] .word-item,
html[data-skin="halloween"] #script-panel,
html[data-skin="halloween"] .list-group-item {
    border-radius: 10px;
}

html[data-skin="halloween"] .modal-content { border-radius: 18px; }

html[data-skin="halloween"] .modern-checkbox:hover,
html[data-skin="halloween"] .word-item:hover,
html[data-skin="halloween"] .list-group-item:hover {
    border-color: var(--accent);
}

html[data-skin="halloween"] .btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-active-bg: var(--accent);
    --bs-btn-active-border-color: var(--accent);
    --bs-btn-color: var(--accent-ink);
    --bs-btn-hover-color: var(--accent-ink);
    --bs-btn-active-color: var(--accent-ink);
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    box-shadow: 0 4px 18px var(--accent-dim);
}

html[data-skin="halloween"] .controls-wrapper .btn-info,
html[data-skin="halloween"] .controls-wrapper .btn-success,
html[data-skin="halloween"] .dark-mode-toggle:hover,
html[data-skin="halloween"] .btn-list-fav:hover,
html[data-skin="halloween"] .btn-back:hover,
html[data-skin="halloween"] .nav-buttons .btn-nav:hover:not(:disabled),
html[data-skin="halloween"] .back-to-top,
html[data-skin="halloween"] .speed-pill.active {
    color: var(--accent-ink);
}

html[data-skin="halloween"] .word-item { background: var(--highlight-dim); }
html[data-skin="halloween"] .word-item .type-tag { background: var(--accent-dim); }

html[data-skin="halloween"] .btn-favorite:hover,
html[data-skin="halloween"] .btn-favorite.is-favorite,
html[data-skin="halloween"] .favorites-link:hover {
    color: var(--accent) !important;
}

html[data-skin="halloween"] :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

html[data-skin="halloween"] .scroll-area { min-height: 0; }

@media (max-width: 480px) {
    html[data-skin="halloween"] .main-container { border-radius: 0; }
}

@media (max-width: 360px) {
    html[data-skin="halloween"] .newyear-banner {
        padding-right: 108px;
        background-size: 112px 84px;
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-skin="halloween"] *,
    html[data-skin="halloween"] *::before,
    html[data-skin="halloween"] *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}