/* ============================================================
   UCFL — Autumn layer
   Scoped to <html class="au">. Without the class nothing here applies,
   except that the seasonal elements (.au-leaf-brand, .au-strip, .au-fox,
   canvases) stay hidden. The class is set server-side by SeasonalMode
   (15 Sep – 20 Nov, Kyiv time, except the Halloween week; ?au=1 / ?au=0 override).
   The display fonts are linked from App.razor only while the mode is available.

   Selector map from the design replica to the real site:
     .table-card  -> .claimed-board (the first one on the page gets the roof pile)
     tbody tr     -> .claimed-board .standings-table tbody tr
     .team-name   -> the team cell (td.table-cell.fw-semibold)
     .pos         -> .place-badge
     .f.W         -> .form-dot.form-win
     .brand       -> .page-header-title h5
     .season      -> the season <select> in .page-header-right
     .page        -> .nxl-content (only the gust sway; the scroll container
                     .nxl-container is fixed and comes after the canvases in the DOM)
     body bg      -> a tint on the sky canvas, so the stadium photo and light theme stay
   ============================================================ */

:root {
  --au-amber:  #e8a33c;
  --au-honey:  #f6c86a;
  --au-rust:   #c8502a;
  --au-maroon: #7a2e1e;
  --au-olive:  #8a7a2a;
  --au-cream:  #f4e6c8;
  --au-dusk:   #1a1424;
  --au-night:  #120f1c;
  /* Fraunces has Latin only; Playfair Display takes over for Cyrillic (uk). */
  --au-font:   'Fraunces', 'Playfair Display', 'Georgia', 'Times New Roman', serif;
}

/* --- 1. Palette: the site's gold warms into amber ---
   As in halloween.css, --brand-cyan (the site's gold, never defined) recolors tabs,
   buttons, links, breadcrumbs and pagination at once. */
html.au {
  --accent: var(--au-amber);
  --accent-soft: rgba(232, 163, 60, .16);
  --brand-cyan: var(--au-amber);
  --brand-cyan-hover: var(--au-honey);
}
html.au.app-skin-dark {
  --bs-primary-rgb: 232, 163, 60;
}
html.au .stat-details__main { background: rgba(232, 163, 60, .16); }
html.au .stat-details-table thead .stat-details__main { background: rgba(232, 163, 60, .20); }
html.au.app-skin-dark .transfer-countdown {
  --cd-border: rgba(232, 163, 60, .25);
  --cd-label-color: rgba(246, 200, 106, .75);
  --cd-value-color: var(--au-honey);
  --cd-value-gradient: linear-gradient(180deg, var(--au-honey) 0%, var(--au-amber) 100%);
  --cd-seconds-gradient: linear-gradient(180deg, var(--au-honey) 0%, var(--au-rust) 100%);
  --cd-separator-color: rgba(232, 163, 60, .35);
  --cd-unit-color: rgba(246, 200, 106, .55);
}

/* --- 2. Fixed layers: rays + sky (back), front leaves/rain. All ignore pointer events. --- */
.au-layer { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
html.au .au-layer { display: block; }
#au-rays  { z-index: 0; overflow: hidden; }
/* Clouds, birds, far leaves. The dusk tint lives here instead of on <body>. */
#au-sky {
  z-index: 0;
  background:
    radial-gradient(1300px 600px at 8% -10%, rgba(232, 163, 60, .22), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(200, 80, 42, .12), transparent 60%);
  transition: background-color .8s;
}
html.au:not(.app-skin-dark) #au-sky {
  background:
    radial-gradient(1300px 600px at 8% -10%, rgba(232, 163, 60, .16), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(200, 80, 42, .07), transparent 60%);
}
#au-front { z-index: 6; }   /* near leaves, rain, piles */

/* Golden-hour rays from the top-left, slowly turning */
#au-rays::before {
  content: ""; position: absolute; left: -30vmax; top: -30vmax; width: 120vmax; height: 120vmax;
  background: repeating-conic-gradient(from 0deg, rgba(246, 200, 106, .10) 0 3deg, transparent 3deg 11deg, rgba(232, 163, 60, .06) 11deg 13deg, transparent 13deg 22deg);
  -webkit-mask: radial-gradient(circle at 25% 25%, #000 0, rgba(0,0,0,.6) 25%, transparent 60%);
          mask: radial-gradient(circle at 25% 25%, #000 0, rgba(0,0,0,.6) 25%, transparent 60%);
  animation: au-turn 90s linear infinite; transform-origin: 25% 25%;
  transition: opacity .8s;
}
@keyframes au-turn { to { transform: rotate(22deg); } }
/* ground mist */
#au-rays::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28vh;
  background: linear-gradient(180deg, transparent, rgba(232, 163, 60, .07) 60%, rgba(244, 230, 200, .10));
}

/* --- 3. Brand: the page title (UCFL on the home page) glows warm, a maple leaf flutters next to it --- */
html.au .page-header-title h5 {
  color: var(--au-honey);
  text-shadow: 0 0 8px rgba(232, 163, 60, .55), 0 0 22px rgba(200, 80, 42, .3);
}
html.au:not(.app-skin-dark) .page-header-title h5 { color: #b4531c; text-shadow: 0 0 10px rgba(232, 163, 60, .35); }
/* Same separator move as halloween.css: "UCFL [leaf] | Home". */
html.au .page-header .page-header-title {
  display: inline-flex; align-items: center;
  margin-right: 8px; padding-right: 10px; border-right: 1px solid #cdd4e8;
}
html.au .page-header .page-header-title h5 { margin-right: 0; padding-right: 0; border-right: 0; }
.au-leaf-brand {
  display: none; width: 18px; height: 18px; margin: -10px 0 0 6px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c8502a' d='M12 1.5l1.6 4.2 4.3-1.2-1.8 4 3.9 2.1-3.8 2 1.5 4.1-4.2-1.3L12 20.5l-1.5-4.1-4.2 1.3 1.5-4.1-3.8-2 3.9-2.1-1.8-4 4.3 1.2z'/%3E%3Cpath stroke='%23f6c86a' stroke-width='.8' d='M12 4v16M12 12l-5-4M12 12l5-4M12 15l-3-2M12 15l3-2'/%3E%3C/svg%3E") center / contain no-repeat;
  transform-origin: 50% 100%; animation: au-flutter 3.5s ease-in-out infinite;
}
html.au .au-leaf-brand { display: inline-block; }
@keyframes au-flutter { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg) translateY(-1px); } }

/* --- 4. Golden Autumn strip (above the standings tabs): click it for a leaf storm --- */
.au-strip {
  display: none; align-items: center; gap: 6px 18px; flex-wrap: wrap; cursor: pointer; user-select: none;
  margin: 0 0 14px; padding: 12px 18px; position: relative; overflow: hidden;
  border: 1px solid rgba(232, 163, 60, .32); border-radius: 8px;
  background: linear-gradient(90deg, rgba(232, 163, 60, .14), rgba(200, 80, 42, .12) 55%, rgba(18, 15, 28, 0));
}
html.au .au-strip { display: flex; }
.au-strip::after { /* warm light sweep */
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 160px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(246, 200, 106, .14), transparent);
  animation: au-sweep 7s linear infinite;
}
/* transform instead of `left`, so the sweep stays on the compositor */
@keyframes au-sweep { from { transform: translateX(-180px); } to { transform: translateX(110vw); } }
.au-strip h2 {
  margin: 0; font: italic 900 clamp(20px, 2.8vw, 30px)/1.1 var(--au-font); font-variation-settings: "opsz" 144;
  letter-spacing: .01em; text-wrap: balance;
  background: linear-gradient(100deg, var(--au-rust) 0%, var(--au-amber) 35%, var(--au-honey) 50%, var(--au-amber) 65%, var(--au-rust) 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: au-shimmer 6s linear infinite;
  filter: drop-shadow(0 1px 0 rgba(60, 20, 0, .7));
}
@keyframes au-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.au-strip .au-sub { color: #d9c7a8; font-size: 13px; }
html:not(.app-skin-dark) .au-strip .au-sub { color: #7a4a2a; }
html:not(.app-skin-dark) .au-strip h2 { filter: none; }
.au-strip .au-hint {
  margin-left: auto; padding: 0; border: 0; background: none; position: relative; z-index: 1;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--au-honey); opacity: .85; cursor: pointer;
}
html:not(.app-skin-dark) .au-strip .au-hint { color: #b4531c; }
.au-strip .au-hint::before { content: "🍂 "; }
.au-strip .au-hint:focus-visible { outline: 2px solid var(--au-amber); outline-offset: 3px; border-radius: 2px; }

/* --- 5. Table: warm glass, amber hover, leaves settle on the roof (canvas) --- */
html.au .claimed-board {
  border-color: rgba(232, 163, 60, .24);
  box-shadow: 0 0 0 1px rgba(232, 163, 60, .06), 0 30px 70px -30px rgba(232, 120, 40, .35), inset 0 1px 0 rgba(255, 230, 180, .12);
}
html.au .claimed-board .standings-table tbody tr {
  animation: au-drift .8s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 50ms);
}
@keyframes au-drift { from { opacity: 0; transform: translateX(-14px) rotate(-.4deg); } to { opacity: 1; transform: none; } }
html.au .claimed-board .standings-table tbody tr:hover {
  background: linear-gradient(90deg, rgba(232, 163, 60, .16), rgba(232, 163, 60, .03) 60%, transparent);
  box-shadow: inset 3px 0 0 var(--au-amber);
}
html.au .claimed-board .standings-table tbody tr:hover td.table-cell.fw-semibold { color: var(--au-honey); text-shadow: 0 0 10px rgba(232, 163, 60, .5); }
html.au:not(.app-skin-dark) .claimed-board .standings-table tbody tr:hover td.table-cell.fw-semibold { color: #b4531c; text-shadow: none; }
html.au .claimed-board .standings-table tbody tr:nth-child(-n+3) .place-badge { color: var(--au-amber); }
html.au .claimed-board .standings-table tbody tr:first-child .place-badge::after {
  content: ""; display: inline-block; width: 11px; height: 11px; margin-left: 6px; vertical-align: -1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f6c86a' d='M12 1.5l1.6 4.2 4.3-1.2-1.8 4 3.9 2.1-3.8 2 1.5 4.1-4.2-1.3L12 20.5l-1.5-4.1-4.2 1.3 1.5-4.1-3.8-2 3.9-2.1-1.8-4 4.3 1.2z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: au-flutter 3.5s ease-in-out infinite;
}
/* The fox's kick lands on a row; the class is set by autumn.js. */
html.au .claimed-board .standings-table tbody tr.au-hit { animation: au-rustle .5s ease-out; }
@keyframes au-rustle { 0% { transform: translateX(0); } 25% { transform: translateX(4px); } 55% { transform: translateX(-3px); } 100% { transform: translateX(0); } }
html.au .form-dot.form-win { box-shadow: 0 0 6px rgba(34, 165, 89, .45); }

/* Season switcher glows like a harvest lamp */
html.au .page-header-right .form-select {
  border-color: rgba(232, 163, 60, .5); color: var(--au-honey);
  animation: au-glow 3s ease-in-out infinite;
}
html.au:not(.app-skin-dark) .page-header-right .form-select { color: #b4531c; }
@keyframes au-glow { 0%, 100% { box-shadow: 0 0 10px rgba(232, 163, 60, .2); } 50% { box-shadow: 0 0 20px rgba(232, 163, 60, .45); } }

/* --- 6. Fox mascot (bottom-right) --- */
.au-fox {
  position: fixed; right: max(14px, env(safe-area-inset-right, 0px)); bottom: max(8px, env(safe-area-inset-bottom, 0px));
  width: 96px; height: 78px; z-index: 8; cursor: pointer; display: none; user-select: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5));
}
html.au .au-fox { display: block; }
.au-fox:focus-visible { outline: 2px solid var(--au-amber); outline-offset: 4px; border-radius: 30px; }
.au-fox .body { position: absolute; left: 14px; bottom: 6px; width: 64px; height: 36px; border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  background: linear-gradient(180deg, #ef7f2c, #c8502a); transform-origin: 50% 100%; animation: au-breathe 3.2s ease-in-out infinite; }
.au-fox .body::after { content: ""; position: absolute; left: 18px; right: 10px; bottom: 0; height: 14px; border-radius: 50% 50% 0 0; background: var(--au-cream); }
@keyframes au-breathe { 50% { transform: scaleY(1.04); } }
.au-fox .head { position: absolute; left: 44px; bottom: 30px; width: 44px; height: 36px; border-radius: 50% 50% 55% 55% / 50% 50% 60% 60%;
  background: linear-gradient(180deg, #f08a34, #d8602b); transform-origin: 20% 100%; animation: au-tilt 6s ease-in-out infinite; }
@keyframes au-tilt { 0%, 80%, 100% { transform: rotate(0); } 88% { transform: rotate(-9deg); } 94% { transform: rotate(5deg); } }
.au-fox .head::before { /* muzzle */ content: ""; position: absolute; left: 14px; right: 4px; bottom: 0; height: 15px; border-radius: 50% 50% 60% 60%; background: var(--au-cream); }
.au-fox .head::after { /* nose */ content: ""; position: absolute; right: 7px; bottom: 7px; width: 6px; height: 5px; border-radius: 50%; background: #2b1a14; }
.au-fox .ear { position: absolute; top: -12px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 18px solid #d8602b; transform-origin: 50% 100%; }
.au-fox .ear.l { left: 4px; transform: rotate(-14deg); } .au-fox .ear.r { left: 22px; transform: rotate(10deg); animation: au-twitch 5s infinite; }
.au-fox .ear::after { content: ""; position: absolute; left: -4px; top: 6px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 10px solid #2b1a14; }
@keyframes au-twitch { 0%, 60%, 100% { transform: rotate(10deg); } 63% { transform: rotate(-4deg); } 66% { transform: rotate(10deg); } }
.au-fox .eye { position: absolute; top: 14px; width: 5px; height: 5px; border-radius: 50%; background: #2b1a14; animation: au-blink 4.5s infinite; }
.au-fox .eye.l { left: 13px; } .au-fox .eye.r { left: 27px; }
@keyframes au-blink { 0%, 92%, 100% { transform: scaleY(1); } 95%, 98% { transform: scaleY(.1); } }
.au-fox .tail { position: absolute; left: -8px; bottom: 14px; width: 44px; height: 22px; border-radius: 60% 40% 40% 60% / 70% 60% 40% 30%;
  background: linear-gradient(90deg, var(--au-cream) 0 28%, #ef7f2c 28%); transform-origin: 100% 60%; animation: au-wag 2.2s ease-in-out infinite; }
@keyframes au-wag { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(12deg); } }
.au-fox .leg { position: absolute; bottom: 0; width: 9px; height: 14px; border-radius: 3px 3px 4px 4px; background: #2b1a14; }
.au-fox .leg.a { left: 24px; } .au-fox .leg.b { left: 60px; }
.au-fox.kick .leg.b { animation: au-kick .45s ease-out; transform-origin: 50% 0; }
@keyframes au-kick { 40% { transform: rotate(-70deg) translateX(-4px); } }
.au-fox.kick .body { animation: au-hop .45s ease-out; }
@keyframes au-hop { 40% { transform: translateY(-6px); } }
.au-fox.sleep .eye { transform: scaleY(.1); animation: none; }
.au-fox.sleep .head { transform: rotate(6deg); animation: none; }
.au-fox.sleep .tail { animation-duration: 6s; }
.au-fox .zz { position: absolute; left: 70px; bottom: 66px; font: italic 700 13px var(--au-font); color: var(--au-cream); opacity: 0; }
html:not(.app-skin-dark) .au-fox .zz { color: #7a4a2a; }
.au-fox.sleep .zz { animation: au-zz 2.4s ease-out infinite; }
@keyframes au-zz { 0% { opacity: 0; transform: translate(0, 0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, -22px); } }

.au-bubble {
  position: absolute; right: 0; bottom: 86px; width: max-content; max-width: min(270px, 70vw);
  padding: 9px 12px; border-radius: 10px 10px 2px 10px;
  background: var(--au-cream); color: #2b1a14; font: 500 12.5px/1.35 Inter, system-ui, sans-serif;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(6px) scale(.96); transform-origin: 100% 100%;
  transition: opacity .25s, transform .25s; pointer-events: none;
}
.au-bubble::after { content: ""; position: absolute; right: 14px; bottom: -6px; border: 6px solid transparent; border-top-color: var(--au-cream); border-bottom: 0; }
.au-bubble.show { opacity: 1; transform: none; }

/* --- 7. Welcome toast (once per browser session) --- */
.au-toast {
  position: fixed; left: 50%; top: calc(14px + env(safe-area-inset-top, 0px)); z-index: 1090; transform: translate(-50%, -20px); opacity: 0;
  display: flex; align-items: center; gap: 12px; max-width: min(560px, calc(100vw - 32px)); padding: 10px 12px 10px 14px;
  background: rgba(32, 22, 20, .86); color: #f4e6c8; border: 1px solid rgba(232, 163, 60, .4); border-radius: 10px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 12px 40px -12px rgba(0, 0, 0, .6);
  font: 400 13px/1.35 Inter, system-ui, sans-serif; transition: opacity .45s, transform .45s;
}
.au-toast.show { opacity: 1; transform: translate(-50%, 0); }
.au-toast b { color: var(--au-honey); font-weight: 600; white-space: nowrap; }
.au-toast span { color: #cdb996; }
.au-toast button { flex: none; width: 26px; height: 26px; border: 0; border-radius: 6px; background: rgba(255,255,255,.08); color: #fff; font-size: 16px; cursor: pointer; }
.au-toast button:focus-visible { outline: 2px solid var(--au-amber); }

/* --- 8. Rain state + gust ---
   The rain dims the sky behind the content instead of a veil over it, so the table stays readable. */
html.au.au-rain #au-sky { background-color: rgba(40, 40, 70, .22); }
html.au.au-rain #au-rays::before { opacity: .25; }
html.au.au-gust .nxl-content { animation: au-gust-sway 2.4s ease-in-out; }
@keyframes au-gust-sway { 20% { transform: translateX(-4px) rotate(-.15deg); } 50% { transform: translateX(3px); } 80% { transform: translateX(-1px); } }

/* --- 9. Header toggle: autumn <-> regular theme (same look as the Halloween one) ---
   Hidden unless the server marked the mode as available for this request. */
.au-toggle { display: none; }
html[data-au-available] .au-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;
}
.au-toggle:focus-visible { outline: 2px solid var(--au-amber); outline-offset: 2px; }
.au-toggle .knob { width: 26px; height: 14px; border-radius: 8px; background: #3a4258; position: relative; transition: background .3s; flex: none; }
.au-toggle .knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: transform .3s; }
html.au .au-toggle { border-color: var(--au-amber); color: var(--au-honey); }
html.au:not(.app-skin-dark) .au-toggle { color: #b4531c; }
html.au .au-toggle .knob { background: var(--au-amber); }
html.au .au-toggle .knob::after { transform: translateX(12px); }
@media (max-width: 575.98px) {
  html[data-au-available] .au-toggle { padding: 0 8px; }
  .au-toggle .au-toggle-label { display: none; }
}

@media (max-width: 767.98px) {
  .au-fox { transform: scale(.8); transform-origin: 100% 100%; }
  .au-strip { padding: 8px 12px; }
  .au-strip .au-hint { margin-left: 0; }
}

/* --- 10. 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.au .au-leaf-brand,
  html.au .au-strip h2,
  html.au .claimed-board .standings-table tbody tr,
  html.au .claimed-board .standings-table tbody tr:first-child .place-badge::after,
  html.au .page-header-right .form-select,
  html.au .au-fox *,
  html.au #au-rays::before { animation: none !important; }
  html.au .au-strip::after, #au-front { display: none !important; }
}