/* ============================================================
   UCFL — Halloween layer
   Scoped to <html class="hw">. Without the class nothing here applies,
   except that the seasonal elements (.hw-pumpkin, .hw-strip, canvases)
   stay hidden. The class is set server-side by SeasonalMode
   (24 Oct – 1 Nov, Kyiv time; ?hw=1 / ?hw=0 override).
   The display fonts are linked from App.razor only while the mode is on.

   Selector map from the design replica to the real site:
     .table-card  -> .claimed-board (wraps the standings table)
     tbody tr     -> .claimed-board .standings-table tbody tr
     .team-name   -> the team cell (td.table-cell.fw-semibold)
     .pos         -> .place-badge
     .f.L         -> .form-dot.form-loss
     .brand       -> .page-header-title h5
     .season      -> the season <select> in .page-header-right
     .page        -> not needed: the scroll container (.nxl-container) is
                     positioned and comes after the canvases in the DOM.
   ============================================================ */

:root {
  --hw-orange: #ff7a1a;
  --hw-ember:  #ff4500;
  --hw-amber:  #ffb347;
  --hw-purple: #5b2a9e;
  --hw-blood:  #c8102e;
  --hw-moon:   #f3eedd;
  --hw-night:  #0b0f1e;
  /* Creepster has Latin only; Rubik Wet Paint takes over for Cyrillic (uk). */
  --hw-font:   'Creepster', 'Rubik Wet Paint', 'Impact', 'Arial Narrow', sans-serif;
}

/* --- 1. Palette shift: gold accent -> pumpkin ---
   The site's gold is var(--brand-cyan, #c9a84c) everywhere (tabs, buttons,
   My Team, links, breadcrumbs, pagination), but --brand-cyan itself is never
   defined, so defining it here recolors all of them at once. */
html.hw {
  --accent: var(--hw-orange);
  --accent-soft: rgba(255, 122, 26, .16);
  --brand-cyan: var(--hw-orange);
  --brand-cyan-hover: var(--hw-amber);
}
/* Literal gold values that do not go through --brand-cyan. */
html.hw.app-skin-dark {
  --bs-primary-rgb: 255, 122, 26;
}
html.hw .stat-details__main { background: rgba(255, 122, 26, .16); }
html.hw .stat-details-table thead .stat-details__main { background: rgba(255, 122, 26, .20); }
html.hw.app-skin-dark .transfer-countdown {
  --cd-border: rgba(255, 122, 26, .25);
  --cd-label-color: rgba(255, 179, 71, .75);
  --cd-value-color: var(--hw-amber);
  --cd-value-gradient: linear-gradient(180deg, var(--hw-amber) 0%, var(--hw-orange) 100%);
  --cd-seconds-gradient: linear-gradient(180deg, var(--hw-amber) 0%, var(--hw-ember) 100%);
  --cd-separator-color: rgba(255, 122, 26, .35);
  --cd-unit-color: rgba(255, 179, 71, .55);
}

/* Neon tab underline: the active tab's line becomes a glowing tube, and a spark runs
   along it each time a tab becomes active (the rule starts matching, so the one-shot
   animation replays). The site's own 3px border stays underneath. */
html.hw .nav-tabs-wrapper .nav-tabs-custom-style .nav-item .nav-link { position: relative; }
html.hw .nav-tabs-wrapper .nav-tabs-custom-style .nav-item .nav-link.active::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; border-radius: 3px;
  background: #ffc58a; pointer-events: none;
  box-shadow: 0 0 4px #ff8a1a, 0 0 12px rgba(255, 110, 20, .85), 0 -6px 18px rgba(255, 90, 0, .35);
}
html.hw .nav-tabs-wrapper .nav-tabs-custom-style .nav-item .nav-link.active::after {
  content: ""; position: absolute; bottom: -5px; left: 0; width: 18px; height: 7px; margin-left: -9px;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, #fff, #ffd27a 45%, rgba(255, 140, 30, 0));
  animation: hw-spark .7s cubic-bezier(.3, .1, .3, 1) 1 both;
}
@keyframes hw-spark {
  0%   { left: 0; opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
html.hw .nav-tabs-wrapper .nav-tabs-custom-style .nav-item .nav-link.active {
  text-shadow: 0 0 10px rgba(255, 140, 40, .45);
}

/* --- 2. Fixed layers: sky (back), fog (front). Both ignore pointer events. --- */
.hw-layer {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; display: none;
}
html.hw .hw-layer { display: block; }
/* The night tint lives on the sky canvas instead of <body>, so the stadium
   photo (body::before) stays visible and the light theme stays readable. */
#hw-sky {
  z-index: 0;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(91, 42, 158, .35), transparent 60%),
    radial-gradient(900px 400px at 10% 110%, rgba(255, 69, 0, .14), transparent 60%);
}
#hw-fog { z-index: 5; mix-blend-mode: screen; opacity: .9; }

/* Lantern: a warm pool of light following the cursor over the stadium. */
#hw-lantern {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; display: none;
  background: radial-gradient(420px 420px at var(--hw-mx, 50%) var(--hw-my, 40%),
    rgba(255, 150, 60, .13), rgba(255, 110, 20, .05) 35%, transparent 70%);
  transition: opacity .6s;
}
html.hw #hw-lantern { display: block; }

/* Lightning: a full-screen layer above the sky and below the content, so the flash
   lights up the stadium behind the table. halloween.js flashes it every 20-40 s with
   two short pulses (well under the 3-flashes-per-second limit), dark theme only. */
#hw-flash {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; display: none; opacity: 0;
  background:
    radial-gradient(900px 500px at var(--hw-fx, 30%) -10%, rgba(220, 225, 255, .9), transparent 70%),
    linear-gradient(180deg, rgba(190, 200, 255, .35), rgba(190, 200, 255, 0) 70%);
  mix-blend-mode: screen;
}
html.hw.app-skin-dark #hw-flash { display: block; }

/* --- 3. Brand: the page title (UCFL on the home page) smoulders --- */
html.hw .page-header-title h5 {
  color: var(--hw-amber);
  text-shadow: 0 0 6px rgba(255, 120, 30, .9), 0 0 18px rgba(255, 90, 0, .55), 0 0 40px rgba(255, 60, 0, .25);
  animation: hw-smoulder 3.2s ease-in-out infinite;
}
@keyframes hw-smoulder {
  0%, 100% { text-shadow: 0 0 6px rgba(255,120,30,.9), 0 0 18px rgba(255,90,0,.55), 0 0 40px rgba(255,60,0,.25); }
  38%      { text-shadow: 0 0 4px rgba(255,120,30,.7), 0 0 10px rgba(255,90,0,.35), 0 0 22px rgba(255,60,0,.15); }
  41%      { text-shadow: 0 0 9px rgba(255,160,60,1),  0 0 28px rgba(255,90,0,.7),  0 0 60px rgba(255,60,0,.35); }
  70%      { text-shadow: 0 0 5px rgba(255,120,30,.8), 0 0 14px rgba(255,90,0,.45), 0 0 30px rgba(255,60,0,.2); }
}
/* The theme draws the title separator as the heading's right border. Move it to
   the title block so the pumpkin sits before it: "UCFL [pumpkin] | Home". */
html.hw .page-header .page-header-title {
  display: inline-flex; align-items: center;
  margin-right: 8px; padding-right: 10px; border-right: 1px solid #cdd4e8;
}
html.hw .page-header .page-header-title h5 { margin-right: 0; padding-right: 0; border-right: 0; }

/* Jack-o'-lantern next to the title. The artwork is pumpkin.svg (its face flickers
   by itself); as a background it is only downloaded while html.hw is set. */
.hw-pumpkin { display: none; width: 30px; height: 28px; margin-left: 10px; flex: none; }
html.hw .hw-pumpkin {
  display: inline-block;
  background: url('pumpkin.svg') center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(255, 140, 30, .55));
}

@keyframes hw-candle {
  0%, 60%, 100% { filter: brightness(1); }
  18%           { filter: brightness(1.18); }
  22%           { filter: brightness(.92); }
  45%           { filter: brightness(1.1); }
}

/* --- 4. Halloween Matchday strip (above the standings tabs) --- */
.hw-strip {
  display: none; align-items: center; gap: 16px;
  margin: 0 0 14px; padding: 10px 16px;
  border: 1px solid rgba(255, 122, 26, .35);
  background:
    radial-gradient(160px 90px at calc(100% - 50px) 50%, rgba(255, 150, 40, .28), transparent 70%),
    linear-gradient(90deg, rgba(255, 69, 0, .12), rgba(91, 42, 158, .18) 60%, rgba(11, 15, 30, 0));
  border-radius: 8px; position: relative; overflow: hidden;
}
.hw-strip-text { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; min-width: 0; flex: 1; }
/* Big glowing pumpkin at the right end of the banner; the candle glow pulses. */
.hw-strip-pumpkin {
  flex: none; width: 70px; height: 64px; margin: -4px 4px -4px auto;
  filter: drop-shadow(0 0 10px rgba(255, 140, 30, .6)) drop-shadow(0 0 22px rgba(255, 90, 0, .35));
  animation: hw-lantern-glow 2.4s ease-in-out infinite;
  position: relative; z-index: 1;
}
html.hw .hw-strip-pumpkin { background: url('pumpkin.svg') center / contain no-repeat; }
@keyframes hw-lantern-glow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 140, 30, .6)) drop-shadow(0 0 22px rgba(255, 90, 0, .35)); }
  50%      { filter: drop-shadow(0 0 14px rgba(255, 160, 40, .8)) drop-shadow(0 0 30px rgba(255, 90, 0, .5)); }
}
html.hw .hw-strip { display: flex; }
.hw-strip::after { /* ember drift across the strip */
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 120px;
  background: linear-gradient(90deg, transparent, rgba(255, 170, 70, .18), transparent);
  pointer-events: none;
  animation: hw-sweep 6s linear infinite;
}
/* transform instead of `left`, so the sweep stays on the compositor */
@keyframes hw-sweep { from { transform: translateX(-140px); } to { transform: translateX(110vw); } }
.hw-strip h2 {
  margin: 0; font: 400 clamp(22px, 3.4vw, 34px)/1 var(--hw-font);
  letter-spacing: .04em; color: var(--hw-amber);
  text-shadow: 0 2px 0 #7a2e00, 0 0 16px rgba(255, 120, 30, .6);
  text-wrap: balance;
}
.hw-strip .hw-sub { color: #c9bfd9; font-size: 13px; }
html:not(.app-skin-dark) .hw-strip .hw-sub { color: #5b4a73; }
html:not(.app-skin-dark) .hw-strip h2 { color: #d85a08; text-shadow: 0 1px 0 #ffd8b0; }

/* --- 5. Table: rows rise out of the fog, hover ignites, L badge bleeds --- */
html.hw .claimed-board { position: relative; }

/* Neon frame: an orange tube around the standings card with a purple halo.
   The glow is painted once; only opacity animates (a short buzz every ~7s, like
   a tired neon sign), so it stays on the compositor. */
html.hw .claimed-board::before {
  content: ""; position: absolute; inset: -3px; border-radius: 19px; pointer-events: none; z-index: 2;
  border: 1.5px solid #ffc58a;
  box-shadow:
    0 0 4px 1px rgba(255, 140, 40, .9),
    0 0 14px 2px rgba(255, 100, 20, .55),
    0 0 34px 6px rgba(140, 60, 220, .28),
    inset 0 0 10px rgba(255, 120, 30, .35);
  will-change: opacity;
  animation: hw-neon-buzz 7s linear infinite;
}
@keyframes hw-neon-buzz {
  0%, 61%, 64.5%, 66%, 100% { opacity: 1; }
  62%   { opacity: .35; }
  63%   { opacity: .9; }
  64%   { opacity: .2; }
  65.5% { opacity: .75; }
}
html:not(.app-skin-dark).hw .claimed-board::before {
  border-color: #ff9a4a;
  box-shadow: 0 0 6px rgba(255, 122, 26, .6), 0 0 18px rgba(140, 60, 220, .18);
}

/* Neon zone markers: a glowing edge on the first cell of the top three rows (orange)
   and of the bottom three (toxic green). Purely decorative; it does not know the
   league's real promotion or relegation rules. Tables shorter than 7 rows get no
   green edge, so a row is never marked twice. */
html.hw .claimed-board .standings-table tbody td:first-child { position: relative; }
html.hw .claimed-board .standings-table tbody tr:nth-child(-n+3) td:first-child::before,
html.hw .claimed-board .standings-table tbody tr:nth-last-child(-n+3):nth-child(n+4) td:first-child::before {
  content: ""; position: absolute; left: 6px; top: 22%; bottom: 22%; width: 3px; border-radius: 3px;
  pointer-events: none;
}
html.hw .claimed-board .standings-table tbody tr:nth-child(-n+3) td:first-child::before {
  background: #ffd2a1;
  box-shadow: 0 0 4px #ff8a1a, 0 0 10px rgba(255, 110, 20, .8), 0 0 18px rgba(255, 80, 0, .45);
}
html.hw .claimed-board .standings-table tbody tr:nth-last-child(-n+3):nth-child(n+4) td:first-child::before {
  background: #c9ffb8;
  box-shadow: 0 0 4px #57ff3a, 0 0 10px rgba(80, 255, 60, .7), 0 0 18px rgba(40, 200, 40, .4);
}
html.hw .claimed-board .standings-table tbody tr {
  animation: hw-rise .7s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes hw-rise { from { opacity: 0; transform: translateY(14px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
html.hw .claimed-board .standings-table tbody tr:hover {
  background: linear-gradient(90deg, rgba(255, 122, 26, .14), rgba(255, 122, 26, .03) 60%, transparent);
  box-shadow: inset 3px 0 0 var(--hw-orange);
}
html.hw .claimed-board .standings-table tbody tr:hover td.table-cell.fw-semibold {
  color: var(--hw-amber); text-shadow: 0 0 10px rgba(255, 120, 30, .5);
}
html.hw .claimed-board .standings-table tbody tr:nth-child(-n+3) .place-badge { color: var(--hw-orange); }
html.hw .claimed-board .standings-table tbody tr:first-child .place-badge::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%;
  background: var(--hw-amber); box-shadow: 0 0 8px var(--hw-amber); vertical-align: middle;
  animation: hw-candle 1.7s steps(1, end) infinite;
}
/* L result: a slow red drip. It shares ::after with the site's data-title
   tooltip, so it steps aside on hover and the tooltip can show. */
html.hw .form-dot.form-loss { position: relative; overflow: visible; }
html.hw .form-dot.form-loss:not(:hover)::after {
  content: ""; position: absolute; left: 50%; bottom: -2px; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 0 0 4px 4px; background: var(--hw-blood);
  animation: hw-drip 3.4s ease-in infinite; animation-delay: calc(var(--i, 0) * .37s);
}
@keyframes hw-drip {
  0%, 55% { height: 3px; opacity: 1; transform: translateY(0); }
  75%     { height: 8px; opacity: 1; }
  100%    { height: 3px; opacity: 0; transform: translateY(14px); }
}

/* Season switcher becomes a candle in a window */
html.hw .page-header-right .form-select {
  border-color: rgba(255, 122, 26, .5); color: var(--hw-amber);
  animation: hw-glowpulse 2.6s ease-in-out infinite;
}
@keyframes hw-glowpulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 122, 26, .25); }
  50%      { box-shadow: 0 0 22px rgba(255, 122, 26, .55); }
}

/* Light theme: amber on white is too faint, so the title and switcher use a
   darker pumpkin with a softer glow. */
html.hw:not(.app-skin-dark) .page-header-title h5 {
  color: #c2410c; animation: none;
  text-shadow: 0 0 10px rgba(255, 122, 26, .35);
}
html.hw:not(.app-skin-dark) .page-header-right .form-select { color: #c2410c; }

/* Cobwebs anchored to the table corners (SVG injected by halloween.js) */
.hw-web { position: absolute; width: 150px; height: 150px; pointer-events: none; opacity: 0; transition: opacity 1s; z-index: 1; }
html.hw .hw-web { opacity: .3; }
.hw-web.tl { top: -1px; left: -1px; }
.hw-web.tr { top: -1px; right: -1px; transform: scaleX(-1); }
.hw-web line, .hw-web path { stroke: #d9d2ea; stroke-width: .8; fill: none; }
.hw-web .spider { fill: #0b0f1e; stroke: #cfc6e3; stroke-width: .6; transform-origin: center; animation: hw-spider 7s ease-in-out infinite; }
@keyframes hw-spider { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(18px); } }
html:not(.app-skin-dark) .hw-web line, html:not(.app-skin-dark) .hw-web path { stroke: #6b5a85; }

@media (max-width: 767.98px) {
  .hw-web { width: 90px; height: 90px; }
  .hw-strip { padding: 8px 12px; gap: 10px; }
  .hw-strip-pumpkin { width: 48px; height: 44px; margin: 0; }
  .hw-pumpkin { margin-left: 8px; }
}

/* --- 6. Header toggle: Halloween <-> regular theme (as in the mockup) ---
   Hidden unless the server marked the mode as available for this request. */
.hw-toggle { display: none; }
html[data-hw-available] .hw-toggle {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px;
  border: 1px solid var(--bs-border-color, rgba(255, 255, 255, .1)); border-radius: 4px;
  background: transparent; color: var(--bs-body-color, #cacfd6);
  font: 500 11px/1 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
}
.hw-toggle:focus-visible { outline: 2px solid var(--hw-orange); outline-offset: 2px; }
.hw-toggle .knob { width: 26px; height: 14px; border-radius: 8px; background: #3a4258; position: relative; transition: background .3s; flex: none; }
.hw-toggle .knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: transform .3s; }
html.hw .hw-toggle { border-color: var(--hw-orange); color: var(--hw-amber); }
html.hw:not(.app-skin-dark) .hw-toggle { color: #c2410c; }
html.hw .hw-toggle .knob { background: var(--hw-orange); }
html.hw .hw-toggle .knob::after { transform: translateX(12px); }
@media (max-width: 575.98px) {
  html[data-hw-available] .hw-toggle { padding: 0 8px; }
  .hw-toggle .hw-toggle-label { display: none; }
}

/* --- 7. Reduced motion: keep the look, drop the movement ---
   Limited to the seasonal elements so the site's own spinners keep working. */
@media (prefers-reduced-motion: reduce) {
  html.hw .page-header-title h5,
  html.hw .hw-strip-pumpkin,
  html.hw .hw-strip::after,
  html.hw .claimed-board .standings-table tbody tr,
  html.hw .claimed-board .standings-table tbody tr:first-child .place-badge::after,
  html.hw .form-dot.form-loss:not(:hover)::after,
  html.hw .page-header-right .form-select,
  html.hw .hw-web .spider,
  html.hw .claimed-board::before { animation: none !important; }
  html.hw .nav-tabs-wrapper .nav-tabs-custom-style .nav-item .nav-link.active::after,
  #hw-flash { display: none !important; }
  html.hw .hw-strip::after, html.hw .form-dot.form-loss:not(:hover)::after { display: none; }
  #hw-fog, #hw-lantern { display: none !important; }
}