/* Ночь соблазнов. A seasonal layer over the familiar street and member UI. */
html.halloween-season {
  --hw-night: #100b17;
  --hw-pumpkin: #ff9b45;
  --hw-gold: #c9a76d;
  --hw-bone: #f0dec5;
  --hw-jade: #6cab9f;
  --bg: #100b17;
  --panel-hard: #19111f;
  --member-surface: #19111f;
  --member-surface-soft: #211827;
  --member-field: #100b17;
  --member-border: #73513f;
  --member-border-soft: #4b3644;
  --member-text: #f0dec5;
  --member-muted: #c9b6c3;
  --member-focus: #ffb76c;
  --hw-loader: url('/halloween/loader-lantern.png');
  scrollbar-color: #674451 #100b17;
}
body.halloween-season { background-color: var(--hw-night); }
.halloween-season ::selection { background: #994828; color: #fff6e8; }
.halloween-season input, .halloween-season textarea { caret-color: var(--hw-pumpkin); }
.halloween-season ::-webkit-scrollbar-thumb { background: #674451; }
.halloween-season ::-webkit-scrollbar-track { background: #100b17; }
.halloween-season :is(button, a, input, select, textarea):focus-visible { outline-color: #ffb76c; }

/* Light belongs to the street edges, leaving controls and photographs clear. */
.halloween-season #scene .sky {
  background: radial-gradient(90% 65% at 12% 100%, #71331b40, transparent 72%), radial-gradient(75% 60% at 100% 4%, #45355760, transparent 72%), linear-gradient(#100b17, #160e1c 64%, #23121b);
}
body.halloween-season.on-login { background: #100b17; }
body.halloween-season #scene .landing-cinema-image { background-image: var(--hw-street, url('/halloween/street.webp')); }
body.halloween-season.on-login .landing-cinema-bg::after {
  background: linear-gradient(180deg, #100b1740, #100b1710 34%, #100b1730 64%, #100b17f5), linear-gradient(90deg, #24102238, transparent 58%, #100b1768);
}
.halloween-street-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; user-select: none; }
.halloween-street-decor * { pointer-events: none; }
.halloween-moonlight { position: absolute; top: -20%; right: -16%; width: 55%; height: 70%; background: radial-gradient(ellipse, #d7c3a31c, transparent 66%); }
.halloween-bat { position: absolute; width: 58px; color: #120c19; opacity: .82; }
.halloween-bat svg { display: block; width: 100%; height: auto; }
.halloween-bat-wing { transform-box: view-box; transform-origin: 50% 55%; }
.halloween-bat-wing-left { transform-origin: 48% 55%; }
.halloween-bat-wing-right { transform-origin: 52% 55%; }
.halloween-bat-0 { left: 13%; top: 26%; width: 39px; }
.halloween-bat-1 { right: 14%; top: 17%; width: 57px; }
.halloween-bat-2 { right: 5%; top: 42%; width: 32px; opacity: .64; }
.halloween-street-decor:not(.is-scene-still) .halloween-bat { will-change: transform; }
.halloween-street-decor:not(.is-scene-still) .halloween-bat-wing { will-change: transform; }
.halloween-chain { position: absolute; top: -30px; width: 36px; color: #a88a624f; }
.halloween-chain svg { display: block; width: 100%; height: 220px; }
.halloween-chain-left { left: 5%; transform: rotate(-12deg); transform-origin: center top; }
.halloween-chain-right { right: 5%; transform: rotate(12deg); transform-origin: center top; }
.halloween-corner { position: absolute; bottom: 3%; width: 157px; height: 160px; color: #21141e; }
.halloween-corner-left { left: 2%; }
.halloween-corner-right { right: 2%; transform: scaleX(-1) scale(.8); transform-origin: right bottom; }
.halloween-corner::before { content: ''; position: absolute; inset: -22% -20% -12%; background: radial-gradient(ellipse at 50% 72%, #ff9b4529, transparent 65%); }
.halloween-pumpkin { position: absolute; width: 117px; height: auto; bottom: 0; left: 0; }
.halloween-candles { position: absolute; width: 76px; height: 126px; bottom: 16px; right: -3px; }
.halloween-candle-flame { transform-origin: center bottom; opacity: .86; }
body.halloween-season:not(.on-login) .halloween-street-decor { opacity: .5; }

/* The title is a second line on the existing sign, without changing its name. */
.halloween-season #view-login.landing { --landing-ink: #f0dec5; --landing-muted: #d0bac8; --landing-line: #73513f; }
.halloween-season .landing-brand #loginSiteName { color: #f5e4d2; background: none; filter: none; text-shadow: 0 3px 20px #0a0614; }
.halloween-landing-title { margin: 3px auto 8px; color: #ffc083; font: 400 clamp(24px, 2.6vw, 32px)/1.2 var(--font-d, Georgia, serif); text-shadow: 0 2px 10px #100b17; }
.halloween-season .landing-nav > * { color: #f0dec5; }
.halloween-season .landing-nav > *:hover { color: #ffc083; }
.halloween-season .landing-auth { background: #19111fe8; border-color: #815b49; }
.halloween-season .landing-auth-intro h2 { color: #f0dec5; }
.halloween-season .landing-portrait::after { border-color: #c9a76d61; background: linear-gradient(135deg, #e7be7b0d, transparent 36%, transparent 75%, #230c2040); }
.halloween-season .landing-street-line { color: #f0dec5; }
.halloween-season .landing .landing-footer { border-top-color: #73513f; }

/* Route ornament is kept below the heading, in normal flow. */
.halloween-route-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: calc(100% - 56px); max-width: 1264px; min-height: 28px; margin: 0 auto 6px; color: #e1b77f; }
.halloween-route-label { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; line-height: 1.4; }
.halloween-route-label > svg { flex: 0 0 22px; width: 22px; height: 22px; color: #ffb76c; }
.halloween-route-label small { color: #c9b6c3; font-size: 11px; margin-left: 8px; white-space: nowrap; }
.halloween-season .landing-header .halloween-route-tools { justify-content: center; gap: 0; width: 100%; min-height: 24px; margin: 0 auto 1px; }
.halloween-season .landing-header .halloween-route-label { font-size: 11px; }
.halloween-season .landing-header .halloween-route-label > svg { width: 18px; height: 18px; flex-basis: 18px; }
.halloween-season .landing-community-slot { min-height: 32px; padding: 2px 0 4px; }
.halloween-season .view > .topbar { border-bottom-color: #815b49; }
.halloween-season .catalog-brand #catalogIntro { color: #c9b6c3; }
.halloween-season .brand-nav .bn-link:hover, .halloween-season .cab-nav .bn-link:hover { color: #ffc083; }

/* The seasonal shelf is a distinct collection. Its artwork remains available
   in received gifts and history when the date-based page theme is inactive. */
.halloween-gift-collection { margin: 24px 0 30px; }
.halloween-gift-head { padding: 0 0 14px; border-bottom: 1px solid #73513f; }
.halloween-gift-head h4 { margin: 0 0 8px; color: #ffc083; font: 400 30px/1.2 var(--font-d, Georgia, serif); letter-spacing: 0; }
.halloween-gift-note { max-width: 63ch; margin: 0; color: #d0bac8; font-size: 12px; line-height: 1.7; text-wrap: pretty; }
.ordinary-gift-collection > h4 { margin: 0 0 12px; padding-top: 7px; color: #f0dec5; font: 400 24px/1.3 var(--font-d, Georgia, serif); letter-spacing: 0; }
.halloween-gift-collection .gift-grid { margin-top: 18px; }

/* Received gifts can be replayed all year. These controls are independent of
   the calendar theme and never change the established gift tiles. */
.gift-shelf-entry { display: flex; flex: 0 0 88px; flex-direction: column; gap: 5px; min-width: 0; scroll-snap-align: start; }
.gift-shelf-entry > .gift-item { width: 100%; }
.gift-shelf-entry > .gift-reveal { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 6px 7px; border: 1px solid #73513f; border-radius: 8px; background: #211827; color: #f0dec5; font-size: 11px; line-height: 1.3; animation: none; }
.gift-shelf-entry > .gift-reveal:hover { background: #32222d; border-color: #c9a76d; }
.gift-shelf-entry > .gift-reveal:focus-visible, #view-pm .pm-gift-reveal:focus-visible { outline: 2px solid #ffb76c; outline-offset: 3px; }
#view-pm .pm-gift-message.pm-gift-seasonal > .pm-gift-reveal { position: relative; display: grid; place-items: center; flex: 0 0 64px; width: 64px; height: 64px; min-width: 44px; min-height: 44px; padding: 4px; border: 1px solid #73513f; border-radius: 10px; background: #211827; }
#view-pm .pm-gift-message.pm-gift-seasonal > .pm-gift-reveal:hover { background: #32222d; border-color: #c9a76d; }
#view-pm .pm-gift-reveal::after { content: ''; position: absolute; right: 5px; bottom: 5px; width: 0; height: 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 5px solid #ffc083; pointer-events: none; }
#view-pm .pm-gift-message.pm-gift-seasonal > .pm-gift-reveal > .g-art { width: 56px; height: 56px; }
#view-pm .pm-gift-message.pm-gift-seasonal > span { min-width: 0; overflow-wrap: anywhere; }
#view-pm .pm-quick-gift.pm-gift-seasonal > .pm-gift-art { display: grid; place-items: center; width: 36px; height: 36px; }
#view-pm .pm-quick-gift.pm-gift-seasonal > .pm-gift-art > .g-art { width: 36px; height: 36px; }
#view-pm .pm-quick-gift.pm-gift-seasonal b { line-height: 1.35; overflow-wrap: anywhere; }

/* The existing loading states retain their status text and real completion time. */
html.halloween-season #view-restore { background: linear-gradient(#100b1759, #100b17e8), var(--hw-street, url('/halloween/street.webp')) center / cover #100b17; }
html.halloween-season #view-restore .session-restore-mark { position: relative; isolation: isolate; display: grid; place-items: center; width: 184px; height: 184px; padding-top: 28px; font-size: 82px; line-height: 1; color: #ffd29d; text-shadow: 0 3px 18px #ff9b4547; }
.halloween-season .session-restore-mark::before { content: ''; position: absolute; z-index: -1; inset: 0; background: var(--hw-loader) center / contain no-repeat, radial-gradient(ellipse at 50% 60%, #743e252e, #27131d19 48%, transparent 70%); }
.halloween-season .session-restore-mark::after { content: ''; position: absolute; z-index: -2; inset: -50%; background: radial-gradient(ellipse, #ff9b4524, transparent 65%); animation: halloween-candlelight 5.5s ease-in-out infinite alternate; }
.halloween-loader-decor { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.halloween-loader-decor > span { position: absolute; width: 56px; color: #c9a76d; opacity: .38; }
.halloween-loader-decor > span:first-child { left: 15%; top: 26%; transform: rotate(-15deg); }
.halloween-loader-decor > span:last-child { right: 15%; bottom: 25%; width: 35px; transform: rotate(12deg); }
.halloween-season :is(.work-load-state[role='status'], #cabLoadMessage[role='status']:not(:empty))::before { content: 'Ц'; display: grid; place-items: center; width: 92px; height: 92px; margin: 0 auto 14px; padding-top: 14px; background: var(--hw-loader) center / contain no-repeat, radial-gradient(ellipse at 50% 60%, #743e252e, #27131d19 48%, transparent 70%); color: #ffd29d; font: 400 41px/1 var(--font-d, Georgia, serif); }
.halloween-season #cabLoadMessage[role='status']:not(:empty) { text-align: center; }
@keyframes halloween-candlelight { from { opacity: .6; transform: scale(.95); } to { opacity: .88; transform: scale(1.04); } }
html.halloween-paused .session-restore-mark::after { animation-play-state: paused; }
html.halloween-static .session-restore-mark::after { animation: none; }

@media (max-width: 760px) {
  .halloween-landing-title { margin-top: 2px; margin-bottom: 4px; }
  .halloween-season .landing-header { padding-top: 24px; }
  .halloween-route-tools { width: calc(100% - 32px); gap: 10px; margin-bottom: 8px; }
  .halloween-route-label { font-size: 11px; }
  .halloween-route-label small { margin-left: 5px; font-size: 10px; }
  .halloween-season .landing-header .halloween-route-label { font-size: 11px; }
  .halloween-gift-head h4 { font-size: 27px; }
  .halloween-gift-note { font-size: 11px; }
  .gift-shelf-entry { flex-basis: 84px; }
  .halloween-chain { width: 23px; top: -75px; opacity: .7; }
  .halloween-chain-left { left: -4px; }
  .halloween-chain-right { right: -4px; }
  .halloween-bat-0 { left: 2%; top: 28%; width: 30px; }
  .halloween-bat-1 { right: 3%; top: 21%; width: 36px; }
  .halloween-bat-2 { display: none; }
  .halloween-corner { bottom: 8%; width: 105px; height: 120px; }
  .halloween-corner-left { left: -27px; }
  .halloween-corner-right { right: -20px; }
  .halloween-pumpkin { width: 90px; }
  .halloween-candles { width: 54px; height: 90px; right: -12px; }
  .halloween-corner-right .halloween-candles { display: none; }
  .halloween-loader-decor > span:first-child { left: 7%; top: 22%; width: 40px; }
  .halloween-loader-decor > span:last-child { right: 8%; bottom: 20%; width: 28px; }
}
@media (max-width: 350px) {
  .halloween-season .landing-header { padding-top: 18px; }
  .halloween-season .landing-header .halloween-route-label { gap: 5px; }
  .halloween-route-label small { display: block; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .halloween-season .session-restore-mark::after { animation: none; }
  .halloween-street-decor .halloween-bat, .halloween-street-decor .halloween-bat-wing { will-change: auto; }
}