/* Seasonal homepage skin, enabled by the existing halloween_world_on setting. */
html.halloween-home {
    color-scheme: dark;
    --sky: #151c26;
    --sky-2: #1c2531;
    --sky-3: #26313e;
    --sky-soft: #1c2531;
    --ink: #f2e9dc;
    --muted: #b9b5af;
    --primary: #ffc180;
    --primary-d: #ffb36b;
    --line: #78604b;
    --line-2: #45433f;
    --accent: #ffc180;
    --red: #ffab99;
    --red-d: #ffab99;
    --good: #8ed6ae;
    --surface: #1c232d;
    --surface-2: #242e3a;
    --shadow: 0 2px 4px #0003, 0 8px 24px #0003;
    --shadow-lg: 0 16px 44px #0006;
}
.halloween-home body {
    background-color: #101720;
    background-image: radial-gradient(ellipse at 12% 15%, #bf6b2220, transparent 50%),
        linear-gradient(180deg, #101720e8, #101720e0 48%, #101720f0),
        url('/img/wallpaper_pixel.webp');
    background-position: center top;
    background-size: auto, auto, cover;
    background-repeat: no-repeat;
}
.halloween-home #bg { opacity: .06; }
.halloween-home ::selection { background: #ffb36b; color: #23180f; }
.halloween-home :is(a, button, input):focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.halloween-home .nav,
.halloween-home .nav.scrolled { background: #121a25ee; border-bottom-color: var(--line-2); box-shadow: 0 4px 18px #0003; }
.halloween-home .nav__links a:hover { background: #ffc18014; }
.halloween-home .nav__cta { color: #23180f !important; box-shadow: 0 4px 16px #e8862420; }
.halloween-home .hero { border-bottom: 1px solid #ffc18025; }
.halloween-home .hero::before,
.halloween-home .hero::after { content: ''; position: absolute; pointer-events: none; z-index: 0; background-repeat: no-repeat; }
.halloween-home .hero::before {
    inset: 0 0 auto;
    height: 160px;
    background-image: url('/img/events/halloween-web-left.svg'), url('/img/events/halloween-web-right.svg');
    background-position: left top, right top;
    background-size: 150px 126px, 150px 126px;
    opacity: .6;
}
.halloween-home .hero::after {
    inset: auto max(22px, calc((100% - 1250px) / 2)) 10px;
    height: 84px;
    background-image: url('/img/events/halloween-lantern-left.svg'), url('/img/events/halloween-lantern.webp');
    background-position: left bottom, right bottom;
    background-size: 96px auto, 96px auto;
    filter: drop-shadow(0 0 18px #f2953628);
}
.halloween-home .hero__in { padding-bottom: 110px; }
.halloween-home .hero h1 { text-shadow: 0 2px 12px #0004; }
.halloween-home :is(.btn, .card__h) { font-family: 'Baloo 2', 'Inter', system-ui, sans-serif; }
.halloween-home .hero p.lead { color: #ccc7bf; }
.halloween-home :is(.eyebrow, .chip, .btn-ghost) { background: var(--surface); }
.halloween-home .auth { border-color: #856448; box-shadow: 0 0 30px #d77a1810, var(--shadow-lg); }
.halloween-home :is(.btn-primary, .btn-amber, .foot__test, .rrow .rk.top) { color: #23180f; }
.halloween-home :is(.btn-primary, .btn-amber) { box-shadow: 0 6px 22px #ce731e25; }
.halloween-home :is(.btn-primary, .btn-amber):hover { background: #ffd09c; box-shadow: 0 8px 26px #ce731e35; }
.halloween-home .btn::after { background: radial-gradient(circle 130px at var(--mx, 50%) var(--my, 50%), #ffe4c229, transparent 62%); }
.halloween-home .btn-ghost:hover { background: var(--surface-2); }
.halloween-home .field input:focus { background: var(--surface-2); box-shadow: 0 0 0 3px #ffc18026; }
.halloween-home .field input::placeholder { color: var(--muted); opacity: 1; }
.halloween-home .auth__msg.err { background: #4a292a; color: #ffc5b9; }
.halloween-home .auth__msg.ok { background: #233e33; color: #b2e9cc; }
.halloween-home .auth__social-label,
.halloween-home .tgm-close { color: var(--muted); }
.halloween-home :is(.card, .news-item):hover { box-shadow: 0 12px 30px #0005; }
.halloween-home .card__h { background: linear-gradient(180deg, #2a3037, var(--surface)); }
.halloween-home .news-item__date .ic { stroke: var(--primary); }
.halloween-home .news-item__body.is-clamped::after { background: linear-gradient(180deg, #1c232d00, var(--surface)); }
.halloween-home .news-more { background: var(--surface-2); }
.halloween-home .news-more:hover { background: #303c49; }
/* Older news and rank colours were written for a white background. */
.halloween-home .news-item__body [style*="background:#fff4e6"] { background: var(--surface-2) !important; border-color: var(--line) !important; color: var(--ink) !important; }
.halloween-home .rrow .rn[style*="#1E3955"] { color: var(--ink) !important; }
.halloween-home .rrow .rn[style*="#9b8a42"] { color: #e0c583 !important; }
.halloween-home .rrow .rn[style*="#970000"] { color: #ffb4a9 !important; }
.halloween-home .foot { position: relative; background: #101720; color: var(--muted); border-top: 1px solid var(--line-2); }
.halloween-home .foot__links a { color: var(--muted); }
.halloween-home .foot__links a:hover { color: var(--primary); }
.halloween-home .foot [style*="color:#4a6a8a"] { color: var(--muted) !important; }
.halloween-home .tgm-overlay { background: #090d16cc; }
.halloween-home .tgm-box { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.halloween-home .tgm-box ol { color: var(--ink); }
@media (max-width: 960px) {
    .halloween-home .hero__in { padding: 40px 20px 98px; }
    .halloween-home .hero::after { height: 72px; background-size: 78px auto, 78px auto; }
}
@media (max-width: 680px) {
    .halloween-home .nav__links { background: #19222e; }
    .halloween-home .hero::before { background-size: 84px 72px, 84px 72px; opacity: .45; }
    .halloween-home .hero::after { left: 20px; right: 20px; height: 60px; background-image: url('/img/events/halloween-lantern.webp'); background-size: 66px auto; background-position: right bottom; }
    .halloween-home .hero__in { padding-bottom: 82px; }
    .halloween-home .auth { padding: 20px; }
    .halloween-home .auth__foot { gap: 12px; flex-wrap: wrap; }
    .halloween-home .layout { padding-top: 28px; }
}