/* ==========================================================================
   Statia Nova — redesign layer
   Loaded after sc.css inside the "nova" theme only (see index.html). Every
   selector below is scoped under .nova-home (added around home.html's
   content) or .js-league (home.html's existing wrapper class) so that pages
   which aren't part of this prototype keep the original sc.css look intact.
   ========================================================================== */

/* ---------- 1. Tokens: cool duotone accent, deep surfaces, bigger scale ---------- */
:root{
    --nova-accent-1: #7C3AED;
    --nova-accent-2: #22D3EE;
    --nova-gradient-accent: linear-gradient(135deg, var(--nova-accent-1) 0%, var(--nova-accent-2) 100%);
    --nova-gradient-accent-soft: linear-gradient(135deg, rgba(124,58,237,.14), rgba(34,211,238,.14));
    --nova-glow: 0 0 32px rgba(124,58,237,.20), 0 0 64px rgba(34,211,238,.12);
    --nova-glow-strong: 0 8px 24px rgba(10,12,24,.16), 0 0 48px rgba(124,58,237,.28), 0 0 90px rgba(34,211,238,.18);
    --nova-border-accent: rgba(124,58,237,.35);

    --nova-bg: #F2F3FA;
    --nova-card-bg: #ffffff;
    --nova-card-bg-soft: rgba(124,58,237,.04);
    --nova-card-border: rgba(18,17,31,.08);
    --nova-text: #12111F;
    --nova-text-secondary: #55586E;
    --nova-text-muted: #8B8EA3;

    --nova-fs-display: clamp(2.5rem, 5vw, 4.25rem);
    --nova-fs-h1: clamp(2rem, 3.2vw, 2.75rem);
    --nova-fs-h2: clamp(1.5rem, 2.2vw, 1.875rem);
    --nova-fs-kpi: clamp(2.25rem, 4vw, 3.25rem);
    --nova-fs-body: 1rem;
    --nova-fs-body-sm: .875rem;
    --nova-fs-caption: .75rem;

    --nova-space-1: 4px;
    --nova-space-2: 8px;
    --nova-space-3: 16px;
    --nova-space-4: 24px;
    --nova-space-5: 40px;
    --nova-space-6: 64px;

    --nova-radius-md: 18px;
    --nova-radius-lg: 26px;
    --nova-radius-pill: 999px;

    --nova-ease: cubic-bezier(.16,1,.3,1);
    --nova-dur-fast: 180ms;
    --nova-dur-base: 420ms;
    --nova-dur-slow: 900ms;
}
[data-theme="dark"]{
    --nova-bg: #0B0E1C;
    --nova-card-bg: rgba(255,255,255,.045);
    --nova-card-bg-soft: rgba(124,58,237,.08);
    --nova-card-border: rgba(255,255,255,.12);
    --nova-text: #F3F5FC;
    --nova-text-secondary: #ABB2CC;
    --nova-text-muted: #767CA0;
    --nova-glow: 0 0 40px rgba(124,58,237,.35), 0 0 80px rgba(34,211,238,.22);
    --nova-glow-strong: 0 10px 30px rgba(0,0,0,.4), 0 0 64px rgba(124,58,237,.45), 0 0 120px rgba(34,211,238,.3);
    --nova-border-accent: rgba(34,211,238,.4);
}

/* ---------- 2. Reveal / motion utilities (only act on elements the templates opt into) ---------- */
.sta-reveal{
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--nova-dur-base) var(--nova-ease), transform var(--nova-dur-base) var(--nova-ease);
}
.sta-reveal.sta-revealed{
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce){
    .sta-reveal{
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==========================================================================
   HOME — .nova-home wrapper added around home.html's redesigned sections
   ========================================================================== */

.nova-home .title__h1{
    font-size: var(--nova-fs-display);
    letter-spacing: -0.02em;
    line-height: 1.05;
    background: var(--nova-gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
.nova-home .title__h2{
    font-size: var(--nova-fs-h2);
    letter-spacing: -0.01em;
}

/* --- Hero composite: keep the existing 3-col/2-row grid math (.block1__cnt)
   already in sc.css — it's a considered bento layout — but replace the
   material/palette/depth language entirely. --- */
.nova-home .block1__i{
    background: var(--nova-card-bg);
    border: 1px solid var(--nova-card-border);
    border-radius: var(--nova-radius-lg);
    box-shadow: none;
    transition: box-shadow var(--nova-dur-base) var(--nova-ease), transform var(--nova-dur-base) var(--nova-ease), border-color var(--nova-dur-base) var(--nova-ease);
}
.nova-home .block1__i:hover{
    box-shadow: var(--nova-glow-strong);
    border-color: var(--nova-border-accent);
    transform: translateY(-4px);
}
.nova-home .block1__h{
    font-size: 1.75rem;
    letter-spacing: -0.01em;
}
.nova-home .block1__btn{
    background: var(--nova-gradient-accent);
    border-radius: var(--nova-radius-pill);
    box-shadow: none;
}
.nova-home .block1__btn:hover{
    box-shadow: var(--nova-glow);
}
.nova-home .js-hero-swiper .sta-hero-nav:hover{
    background: var(--nova-gradient-accent);
}

/* AI-prediction card headline number gets the ring treatment (canvas injected
   by sc-redesign.js next to .hml__percent, see staInitProgressRings) */
.nova-home .hml__percent{
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--nova-space-3);
}
.nova-ring-wrap{
    position: relative;
    width: 56px;
    height: 56px;
    flex: none;
}
.nova-ring-wrap canvas{
    display: block;
    width: 100%;
    height: 100%;
}

/* --- KPI tool tiles (home only — league's identical .tools__wrap markup for
   its tab bar is handled separately under .js-league, never here) --- */
.nova-home .tools:not(.tools__active){
    margin-top: var(--nova-space-5);
    gap: var(--nova-space-4);
}
.nova-home .tools:not(.tools__active) .tools__wrap{
    background: var(--nova-card-bg);
    border: 1px solid var(--nova-card-border);
    border-radius: var(--nova-radius-lg);
    box-shadow: none;
    transition: box-shadow var(--nova-dur-base) var(--nova-ease), transform var(--nova-dur-base) var(--nova-ease), border-color var(--nova-dur-base) var(--nova-ease);
}
.nova-home .tools:not(.tools__active) .tools__wrap:hover{
    background-image: none;
    background-color: var(--nova-card-bg);
    box-shadow: var(--nova-glow-strong);
    border-color: var(--nova-border-accent);
    transform: translateY(-4px);
}
.nova-home .tools:not(.tools__active) .tools__wrap:hover .tools__title,
.nova-home .tools:not(.tools__active) .tools__wrap:hover .tools__text,
.nova-home .tools:not(.tools__active) .tools__wrap:hover .tools__text span,
.nova-home .tools:not(.tools__active) .tools__wrap:hover .tools__stat-num,
.nova-home .tools:not(.tools__active) .tools__wrap:hover .tools__stat-label{
    color: var(--nova-text);
}
.nova-home .tools__card{
    max-width: none;
    min-height: 148px;
    padding: var(--nova-space-4) var(--nova-space-4) var(--nova-space-4) var(--nova-space-4);
}
.nova-home .tools__title{
    font-size: 1.0625rem;
    color: var(--nova-text-secondary);
    font-weight: 600;
}
.nova-home .tools__stat-num{
    font-size: var(--nova-fs-kpi);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--nova-text);
    line-height: 1;
    display: inline-block;
}
.nova-home .tools__stat_live .tools__stat-num{
    background: var(--nova-gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.nova-home .tools__stat_live .tools__stat-label{
    color: var(--nova-accent-1);
}
.nova-home .tools__stats{
    margin-top: var(--nova-space-3);
    gap: var(--nova-space-4);
}

/* --- Top leagues / top teams cards --- */
.nova-home .teams__wrap{
    background: var(--nova-card-bg);
    border: 1px solid var(--nova-card-border);
    border-radius: var(--nova-radius-lg);
    box-shadow: none;
    margin-right: var(--nova-space-4);
    transition: box-shadow var(--nova-dur-base) var(--nova-ease), transform var(--nova-dur-base) var(--nova-ease), border-color var(--nova-dur-base) var(--nova-ease);
}
.nova-home .teams__wrap:hover{
    background-image: none;
    box-shadow: var(--nova-glow-strong);
    border-color: var(--nova-border-accent);
    transform: translateY(-4px);
}
.nova-home .teams__wrap:hover .teams__title,
.nova-home .teams__wrap:hover .teams__text{
    color: var(--nova-text);
}
.nova-home .teams__card{
    height: 128px;
    padding: var(--nova-space-4);
}
.nova-home .teams__title{
    font-size: 1.125rem;
}

/* ==========================================================================
   LEAGUE — everything scoped under the template's own .js-league wrapper,
   which also covers the AJAX-rendered content of league_stats.html /
   league_rating_teams.html / league_rating_referees.html (they're injected
   into .js-league-cnt panels that live inside .js-league).
   ========================================================================== */

.js-league .title__h1{
    font-size: var(--nova-fs-h1);
    letter-spacing: -0.01em;
}

/* --- Sticky pinned tab bar with sliding underline. The underline element
   itself (.nova-tab-underline) is injected by sc-redesign.js as a child of
   .tools.tools__active so it rides along with Swiper's own transform instead
   of needing separate transform math. --- */
.js-league .mySwiper{
    position: sticky !important;
    top: 68px;
    z-index: 2;
    padding: var(--nova-space-2) 0;
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: var(--nova-space-4);
    padding-left: 15px;
    padding-right: 15px;
    background: var(--nova-bg);
}
[data-theme="dark"] .js-league .mySwiper{
    background: #0B0E1C;
}
.js-league .tools.tools__active{
    position: relative;
    gap: var(--nova-space-2);
}
.js-league .tools__active .tools__wrap{
    min-width: 0;
    flex-shrink: 0;
    background: var(--nova-card-bg-soft);
    border: 1px solid transparent;
    border-radius: var(--nova-radius-pill);
    box-shadow: none;
    transition: background var(--nova-dur-fast) var(--nova-ease), border-color var(--nova-dur-fast) var(--nova-ease);
}
.js-league .tools__active .tools__card{
    background-image: none !important;
    max-width: none;
    min-height: 0;
    padding: 12px 22px;
    display: flex;
    align-items: center;
    gap: var(--nova-space-2);
}
.js-league .tools__active .tools__icon{
    position: static;
    inset: auto;
    width: 20px;
    height: 20px;
    opacity: .7;
    flex: none;
}
.js-league .tools__active .tools__text{
    display: none;
}
.js-league .tools__active .tools__title{
    font-size: var(--nova-fs-body-sm);
    font-weight: 600;
    color: var(--nova-text-secondary);
    white-space: nowrap;
}
.js-league .tools__active .tools__wrap.active{
    background: var(--nova-card-bg);
    border-color: var(--nova-border-accent);
}
.js-league .tools__active .tools__wrap.active .tools__title{
    color: var(--nova-text);
}
.nova-tab-underline{
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 2px;
    width: 0;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-gradient-accent);
    transform: translateX(0);
    transition: transform var(--nova-dur-base) var(--nova-ease), width var(--nova-dur-base) var(--nova-ease);
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce){
    .nova-tab-underline{ transition: none; }
}

/* --- Standings / stat tables: swap the flat divider-row look for spaced
   "glass row" cards, keep the existing grid-template-columns math (.table__h,
   .table__row, .table__statistic etc. in sc.css) so column counts stay intact --- */
.js-league .table{
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: var(--nova-space-2);
}
.js-league .table__row:not(.hide__bb):has(+ .table__row),
.js-league .table__h{
    border-bottom: none;
}
.js-league .table__h,
.js-league .table__row{
    background: var(--nova-card-bg);
    border: 1px solid var(--nova-card-border);
    border-radius: var(--nova-radius-md);
    padding: 12px 20px;
    transition: border-color var(--nova-dur-fast) var(--nova-ease), transform var(--nova-dur-fast) var(--nova-ease);
}
.js-league .table__h{
    background: transparent;
    border: none;
    padding: 4px 20px;
    color: var(--nova-text-muted);
    font-size: var(--nova-fs-caption);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.js-league .table__row:hover{
    background-color: var(--nova-card-bg);
    border-color: var(--nova-border-accent);
    transform: translateX(2px);
}
.js-league .table__name{
    color: var(--nova-text);
    font-weight: 600;
}
.js-league .table__bg_y:not(:empty){
    background: rgba(124,58,237,.16);
    color: var(--nova-accent-1);
    font-weight: 700;
}
[data-theme="dark"] .js-league .table__bg_y:not(:empty){
    color: #C9A6FF;
}
.js-league .table__bg_g:not(:empty){
    background: rgba(61,193,141,.18);
}
.js-league .table__bg_r:not(:empty){
    background: rgba(244,63,94,.16);
}

/* Home/away segmented toggle ("Все / Дома / В гостях") — recolor to accent */
.js-league .btn.active,
.js-league .btn.selected{
    background: var(--nova-gradient-accent);
}

/* --- Stats averages rows --- */
.js-league .table__statistic{
    align-items: center;
}
.js-league .table__stat{
    color: var(--nova-text);
}

/* --- Betting-probability sparkline bar: replaces the flat inline background
   tint with an animated fill sized from --sta-prob-pct (set by
   sc-redesign.js from data-win-pct, mirroring the existing
   .has-stat-bar/--stat-bar-pct convention already used elsewhere in sc.css) --- */
.js-league .table__prob{
    position: relative;
    overflow: hidden;
    background: var(--nova-card-bg-soft);
    border: 1px solid var(--nova-card-border);
}
.js-league .table__prob::before{
    content: '';
    position: absolute;
    inset: 0;
    width: var(--sta-prob-pct, 0%);
    background: var(--nova-gradient-accent);
    opacity: .35;
    transition: width var(--nova-dur-slow) var(--nova-ease);
}
.js-league .table__prob > *{
    position: relative;
    z-index: 1;
}
.js-league .table__win{
    color: var(--nova-text);
    font-weight: 600;
}

@media (max-width: 992px){
    .js-league .mySwiper{
        top: 60px;
    }
}