/* ============================================================
   ACCUEIL MOBILE HOME — téléphone uniquement (≤768px)
   ------------------------------------------------------------
   Remplace le calendrier/hors-saison/corps du dashboard bureau
   (accueil-dash.css) par un écran à 4 modes réels, sourcé de la
   maquette Claude Design "NHL Pool Home.dc.html" (projectId
   3cff4323-8774-4865-93ed-faf57f54c9ac). Portée strictement
   limitée à .fz-mobile-home : jetons préfixés --fzm-*, aucun jeton
   partagé (--primary, --fzd-*, etc.) n'est touché — même principe
   que accueil-dash.css et les reskins draftActif/classement/trade.
   ============================================================ */

.fz-mobile-home {
    --fzm-bg: #EAE8E4;
    --fzm-panel: #F4F3F1;
    --fzm-surface: #ffffff;
    --fzm-ink: #17171A;
    --fzm-ink-soft: rgba(23, 23, 26, 0.5);
    --fzm-ink-faint: rgba(23, 23, 26, 0.4);
    --fzm-border: rgba(23, 23, 26, 0.1);
    --fzm-red: #E42027;
    --fzm-red-soft: #FCE4E4;
    --fzm-green: #0F8A3E;
    /* --fzm-ink sert aussi d'aplat plein (onglet actif, bouton de tuile) :
       ce rôle-là s'inverse avec le fond, pas avec le texte. */
    --fzm-solid: #17171A;
    --fzm-on-solid: #ffffff;
    --fzm-avatar-a: #EDEBE7;
    --fzm-avatar-b: #F6F5F3;

    display: none; /* accueil-dash.js (renderDash) le révèle avec un pool actif */
    background: var(--fzm-bg);
    margin: 0 -16px;
    padding: 18px 16px 8px;
    font-family: 'Archivo', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--fzm-ink);
}

/* ------------------------------------------------------------ */
/* Thème sombre — mêmes jetons, valeurs inversées. Ce bloc était  */
/* figé en papier : c'était le seul rectangle blanc de l'accueil  */
/* sur téléphone en thème sombre. Le rouge de marque ne bouge pas */
/* (il porte du blanc à 4,5:1 dans les deux thèmes) ; seuls les   */
/* neutres basculent.                                             */
/* ------------------------------------------------------------ */
html[data-theme="dark"] .fz-mobile-home {
    --fzm-bg: #131316;
    --fzm-panel: #1e1e22;
    --fzm-surface: #1e1e22;
    --fzm-ink: #F2F2F0;
    --fzm-ink-soft: rgba(242, 242, 240, 0.62);
    --fzm-ink-faint: rgba(242, 242, 240, 0.45);
    --fzm-border: rgba(242, 242, 240, 0.14);
    --fzm-red-soft: #3a1618;
    --fzm-green: #4FBE7B;
    --fzm-solid: #F0EEE9;
    --fzm-on-solid: #17171A;
    --fzm-avatar-a: #2a2a2f;
    --fzm-avatar-b: #232328;
}

.fz-mobile-home * { box-sizing: border-box; }
.fz-mobile-home a { color: inherit; text-decoration: none; }

/* Carrousels horizontaux : pas de scrollbar visible, comme le reste du site. */
.fzm-scroll-row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}
.fzm-scroll-row::-webkit-scrollbar { display: none; }

/* ---------------------------------------------------------- */
/* HÉROS — un seul actif à la fois (direct / repêchage / avant-  */
/* saison). Rendu par renderHero() (accueil-dash.js) dans        */
/* #fzmHeroSlot : même balisage .fz-dash-hero que le bureau, la  */
/* mise en page bureau/téléphone se règle plus bas dans          */
/* accueil-dash.css. .fzm-live-dot reste ici : fzmGameCard        */
/* (matchs du jour) le réutilise pour son propre indicateur.      */
/* ---------------------------------------------------------- */
.fzm-live-dot {
    width: 7px; height: 7px; border-radius: 50%; background: currentColor;
    animation: fzm-pulse 1.6s ease-in-out infinite;
}
@keyframes fzm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------------------------------------------------------- */
/* CLASSEMENT                                                  */
/* ---------------------------------------------------------- */
.fzm-rank-strip {
    background: var(--fzm-panel); border-radius: 16px; padding: 16px 18px; margin-bottom: 14px;
    display: flex; align-items: center; justify-content: space-between;
}
.fzm-rank-eyebrow { font: 600 11px/1 'Archivo', sans-serif; color: var(--fzm-ink-soft); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.fzm-rank-pos-row { display: flex; align-items: baseline; gap: 10px; }
.fzm-rank-pos { font: 800 26px/1 'Archivo', sans-serif; letter-spacing: -.02em; }
.fzm-rank-pts { font: 600 14px/1 'Archivo', sans-serif; color: var(--fzm-ink-soft); }
.fzm-rank-side { text-align: right; }
.fzm-rank-trend { font: 700 12px/1 'Archivo', sans-serif; margin-bottom: 3px; color: var(--fzm-ink-soft); }
.fzm-rank-trend.is-up { color: var(--fzm-green); }
.fzm-rank-trend.is-down { color: var(--fzm-red); }
.fzm-rank-gap { font: 500 11px/1 'Archivo', sans-serif; color: var(--fzm-ink-faint); }

/* ---------------------------------------------------------- */
/* SECTIONS GÉNÉRIQUES — titres + carrousels/listes             */
/* ---------------------------------------------------------- */
.fzm-section { margin-bottom: 18px; }
.fzm-section-title { font: 700 15px/1 'Archivo', sans-serif; margin-bottom: 10px; }
.fzm-empty { font: 500 12.5px/1.4 'Archivo', sans-serif; color: var(--fzm-ink-faint); margin: 0; }


/* Joueurs */
.fzm-player-card { flex-shrink: 0; width: 128px; background: var(--fzm-surface); border: 1px solid var(--fzm-border); border-radius: 12px; padding: 12px; }
.fzm-player-avatar { width: 36px; height: 36px; border-radius: 50%; background: repeating-linear-gradient(135deg, var(--fzm-avatar-a) 0 4px, var(--fzm-avatar-b) 4px 8px); margin-bottom: 8px; }
.fzm-player-name { font: 700 12.5px/1.2 'Archivo', sans-serif; margin-bottom: 2px; }
.fzm-player-meta { font: 500 10.5px/1 'Archivo', sans-serif; color: var(--fzm-ink-faint); margin-bottom: 7px; }
.fzm-player-tag { display: inline-block; font: 700 9.5px/1 'Archivo', sans-serif; letter-spacing: .03em; padding: 3px 7px; border-radius: 6px; background: var(--fzm-panel); color: var(--fzm-ink-soft); }
.fzm-player-tag.is-live { background: var(--fzm-red-soft); color: var(--fzm-red); }
.fzm-player-line { font: 600 11px/1 'Archivo', sans-serif; color: var(--fzm-ink); margin-top: 6px; opacity: .75; }

/* Listes (activité de la ligue) */
.fzm-list-card { background: var(--fzm-surface); border: 1px solid var(--fzm-border); border-radius: 12px; overflow: hidden; }
.fzm-list-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid rgba(23,23,26,.06); }
.fzm-list-row:last-child { border-bottom: none; }

/* Tuile "Repêchage ouvre" (avant-saison, avant le début du repêchage) */
.fzm-tile-row {
    background: var(--fzm-panel); border-radius: 14px; padding: 14px 16px; margin-bottom: 18px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.fzm-tile-title { font: 700 13px/1 'Archivo', sans-serif; margin-bottom: 2px; }
.fzm-tile-sub { font: 500 11.5px/1 'Archivo', sans-serif; color: var(--fzm-ink-soft); }
.fzm-tile-btn { flex-shrink: 0; background: var(--fzm-solid); color: var(--fzm-on-solid); border-radius: 9px; padding: 9px 13px; font: 700 12px/1 'Archivo', sans-serif; }

/* Joueurs à surveiller */
.fzm-watch-card { flex-shrink: 0; width: 150px; background: var(--fzm-surface); border: 1px solid var(--fzm-border); border-radius: 12px; padding: 13px; }
.fzm-watch-logo { width: 20px; height: 20px; object-fit: contain; margin-bottom: 6px; }
.fzm-watch-name { font: 700 13px/1 'Archivo', sans-serif; margin-bottom: 2px; }
.fzm-watch-team { font: 500 11px/1 'Archivo', sans-serif; color: var(--fzm-ink-faint); }
.fzm-watch-note { font: 500 10.5px/1.35 'Archivo', sans-serif; color: var(--fzm-ink-faint); margin-top: 6px; }

/* Activité */
.fzm-activity-row { display: block; padding: 11px 14px; }
.fzm-activity-time { font: 500 10.5px/1 'Archivo', sans-serif; color: var(--fzm-ink-faint); margin-bottom: 3px; }
.fzm-activity-text { font: 500 12.5px/1.4 'Archivo', sans-serif; }
.fzm-toggle-btn { display: block; margin: 8px auto 0; background: none; border: none; font: 600 12px/1 'Archivo', sans-serif; color: var(--fzm-red); cursor: pointer; padding: 4px; }

/* Actualités LNH */
/* Dans la LNH — onglets Tout / Échanges / Signatures / Blessés au-dessus
   d'un carrousel de cartes, calqué sur .fzd-off-* du bureau. */
.fzm-league-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 10px;
}
.fzm-league-head .fzm-section-title { margin-bottom: 0; }
.fzm-league-nav { display: flex; gap: 6px; flex-shrink: 0; }
.fzm-league-nav-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    background: none; border: 1px solid var(--fzm-border); border-radius: 999px;
    font: 400 15px/1 'Archivo', sans-serif; color: var(--fzm-ink-soft);
    cursor: pointer;
    transition: opacity .15s ease;
}
.fzm-league-nav-btn:disabled { opacity: .3; cursor: default; }

.fzm-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.fzm-tab {
    /* 26px de haut auparavant : sous la cible tactile de 44px que DESIGN.md
       impose au reste de la navigation, sur le seul écran qui soit
       exclusivement tactile. */
    flex: 1; min-height: 40px; padding: 7px 4px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--fzm-border); border-radius: 8px;
    background: var(--fzm-surface); color: var(--fzm-ink-soft);
    font: 600 11.5px/1 'Archivo', sans-serif; cursor: pointer; white-space: nowrap;
}
.fzm-tab.is-active { background: var(--fzm-solid); border-color: var(--fzm-solid); color: var(--fzm-on-solid); }
.fzm-tab-count { font-weight: 700; opacity: .55; margin-left: 3px; }

/* « Dans la LNH » a quatre onglets (Tout / Échanges / Signatures / Blessés) :
   un cran plus petits que les barres à trois, avec le droit de passer à deux
   lignes si « Signatures » plus son compteur ne rentre pas sur un petit écran. */
#fzmLeagueTabs { flex-wrap: wrap; }
#fzmLeagueTabs .fzm-tab { flex: 1 1 auto; min-width: 74px; padding-left: 3px; padding-right: 3px; font-size: 11px; }

/* Piste — une carte par mouvement, on feuillette au doigt (scroll-snap),
   la carte suivante dépasse pour signaler qu'il y a une suite. */
.fzm-league-track {
    display: flex; gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.fzm-league-track::-webkit-scrollbar { display: none; }
.fzm-league-track.is-empty { display: block; }
.fzm-league-track > .fzm-empty {
    background: var(--fzm-surface); border: 1px solid var(--fzm-border);
    border-radius: 12px; padding: 16px;
}

.fzm-off-card {
    flex: 0 0 84%; max-width: 320px;
    scroll-snap-align: start;
    display: flex; flex-direction: column; gap: 11px;
    padding: 14px;
    background: var(--fzm-surface);
    border: 1px solid var(--fzm-border);
    border-radius: 12px;
}
.fzm-off-card-top { display: flex; align-items: center; gap: 8px; }
.fzm-off-card-date {
    margin-left: auto;
    font: 700 9px/1 'Archivo', sans-serif;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--fzm-ink-faint);
}
.fzm-off-tag {
    font: 700 9px/1 'Archivo', sans-serif;
    letter-spacing: .09em; text-transform: uppercase;
    padding: 5px 8px; border-radius: 5px;
    background: var(--fzm-panel); color: var(--fzm-ink-soft);
}
.fzm-off-tag.is-trade { background: var(--fzm-solid); color: var(--fzm-on-solid); }
.fzm-off-tag.is-injury { background: var(--fzm-red-soft); color: var(--fzm-red); }

.fzm-off-card-name { font: 700 16px/1.15 'Archivo', sans-serif; }
.fzm-off-card-club {
    display: flex; align-items: center; gap: 7px;
    font: 500 11.5px/1.3 'Archivo', sans-serif; color: var(--fzm-ink-soft);
}
.fzm-off-card-club img { width: 18px; height: 18px; flex-shrink: 0; object-fit: contain; }

.fzm-off-card-stats {
    display: flex; gap: 10px;
    margin-top: auto; padding-top: 10px;
    border-top: 1px solid var(--fzm-border);
}
.fzm-off-stat { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fzm-off-stat-lbl {
    font: 700 8.5px/1 'Archivo', sans-serif;
    letter-spacing: .11em; text-transform: uppercase;
    color: var(--fzm-ink-faint);
}
.fzm-off-stat-val { font: 700 12.5px/1.2 'Archivo', sans-serif; }
/* Le rouge est réservé aux absences fermes ; le « jour le jour » reste neutre
   pour ne pas crier au loup sur un joueur qui joue peut-être ce soir. */
.fzm-off-stat-val[data-status="Out"],
.fzm-off-stat-val[data-status="Injured Reserve"] { color: var(--fzm-red); }

/* Carte d'échange : réutilise .fzm-deal-* (les deux colonnes de clubs). */
.fzm-off-card .fzm-deal-grid { margin-top: 2px; }

.fzm-league-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.fzm-league-dots:empty { display: none; }
.fzm-league-dot {
    width: 6px; height: 6px; padding: 0;
    border: none; border-radius: 999px;
    background: var(--fzm-ink-faint); cursor: pointer;
    transition: width .2s ease, background .2s ease;
}
.fzm-league-dot.is-active { width: 16px; background: var(--fzm-red); }

/* Un club par rangée : le logo et l'abréviation gardent assez de place
   à côté d'« Acquiert », même dans les petites cartes du téléphone. */
.fzm-deal-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.fzm-deal-col { min-width: 0; }
.fzm-deal-col + .fzm-deal-col { padding-top: 12px; border-top: 1px solid var(--fzm-border); }
.fzm-deal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding-bottom: 6px; margin-bottom: 7px;
    border-bottom: 1px solid var(--fzm-border);
}
.fzm-deal-club { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fzm-deal-logo { width: 18px; height: 18px; flex-shrink: 0; object-fit: contain; }
.fzm-deal-club-abbr { font: 700 12px/1 'Archivo', sans-serif; letter-spacing: .03em; }
.fzm-deal-acq {
    flex-shrink: 0;
    font: 700 8.5px/1 'Archivo', sans-serif;
    letter-spacing: .13em; text-transform: uppercase;
    color: var(--fzm-ink-faint);
}
.fzm-deal-assets { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.fzm-deal-asset { font: 600 11.5px/1.35 'Archivo', sans-serif; overflow-wrap: anywhere; }
.fzm-deal-asset.is-empty { font-weight: 500; font-style: italic; color: var(--fzm-ink-faint); }
.fzm-deal-pos { font-weight: 500; color: var(--fzm-ink-faint); }

.fzm-news-list { display: flex; flex-direction: column; gap: 8px; }
.fzm-news-card { display: block; background: var(--fzm-surface); border: 1px solid var(--fzm-border); border-radius: 10px; padding: 10px 12px; }
.fzm-news-kicker { font: 700 9.5px/1 'Archivo', sans-serif; color: var(--fzm-red); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 3px; }
.fzm-news-headline { font: 600 12.5px/1.35 'Archivo', sans-serif; color: var(--fzm-ink); }

/* Raccourcis pools — avant-saison seulement (fzmPoolChips), entre le
   calendrier et « Dans la LNH ». Le pied de page se retire alors : ce
   sont les mêmes trois liens, en pilules cliquables au pouce. */
.fzm-poolchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.fzm-poolchip {
    display: inline-flex; align-items: center;
    padding: 10px 14px;
    background: var(--fzm-surface); border: 1px solid var(--fzm-border);
    border-radius: 999px;
    font: 700 11.5px/1 'Archivo', sans-serif;
    color: var(--fzm-ink); text-decoration: none;
}
.fzm-poolchip.is-primary { background: var(--fzm-solid); border-color: var(--fzm-solid); color: var(--fzm-on-solid); }
/* « Mes pools » n'est plus un lien : il ouvre le tiroir des pools sur place.
   Un <button> arrive avec la police et l'alignement du système. */
button.fzm-poolchip { font: 700 11.5px/1 'Archivo', sans-serif; text-align: left; cursor: pointer; }

/* Pied de page */
.fzm-footer-links { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 6px 0 16px; flex-wrap: wrap; }
.fzm-footer-links a { font: 600 11.5px/1 'Archivo', sans-serif; color: var(--fzm-ink-soft); }
.fzm-footer-links a:hover { color: var(--fzm-red); }
.fzm-footer-links span { color: rgba(23,23,26,.2); }

/* ============================================================
   BASCULE BUREAU / TÉLÉPHONE — même principe que .bottom-nav
   (navbar.css) : la largeur d'écran tranche, pas l'appartenance à
   un pool (déjà géré par accueil-dash.js/renderDash).
   ============================================================ */
@media (max-width: 768px) {
    /* Le calendrier n'est PAS masqué ici. C'est le même nœud qu'au bureau, et
       fzdPlaceCalendar() (accueil-dash.js) le DÉPLACE dans #fzmCalSlot, que la
       home mobile pose dans les quatre modes — il ne peut donc pas apparaître
       deux fois. Une règle de masquage servait autrefois de garde-fou ; elle
       cachait surtout le calendrier pour de bon dès que la home mobile ne
       rendait pas (avant-saison, effectif pas encore chargé). Le laisser à sa
       place bureau est le bon repli : visible, simplement plus bas. */
    #fzDashOffseason, #fzDashBody, #fzDashHero,
    #fzDashPoolChips { display: none !important; }

    /* Le slot ne fait que porter le calendrier ; la marge basse de
       .fz-dash-calendar vaut déjà celle de .fzm-section (18px), les blocs
       de la home mobile restent donc régulièrement espacés. */
    .fzm-cal-slot { display: block; }
}
@media (min-width: 769px) {
    .fz-mobile-home { display: none !important; }
}

/* Accueil téléphone : actualités et préparation, ou repêchage en vedette. */
@media (max-width: 768px) {
    body:has(#fzMobileHome[data-mode]) #storiesSection { display: none !important; }
    .fz-mobile-home {
        --fzm-red: #f65325;
        --fzm-red-soft: #f653251c;
        padding-top: 8px;
    }
    html[data-theme="dark"] .fz-mobile-home {
        --fzm-bg: #0d1011;
        --fzm-panel: #171a1c;
        --fzm-surface: #171a1c;
        --fzm-border: #ffffff38;
    }
    .fzm-section { margin-bottom: 16px; }
    .fzm-section-title { font-size: clamp(18px, 4.7vw, 25px); line-height: 1.15; letter-spacing: -.025em; }
    .fzm-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
    .fzm-section-head .fzm-section-title { margin: 0; }
    .fz-mobile-home .fzm-see-all { flex-shrink: 0; padding: 8px 0; border: 0; background: none; color: var(--fzm-red); font: 600 11px/1.2 'Archivo', sans-serif; cursor: pointer; }
    .fz-mobile-home a:focus-visible, .fz-mobile-home button:focus-visible { outline: 2px solid var(--fzm-red); outline-offset: 3px; }

    .fzm-news-hero { position: relative; margin-bottom: 8px; }
    .fzm-news-hero:empty { display: none; }
    .fzm-news-hero-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border: 1px solid var(--fzm-border); border-radius: 10px; }
    .fzm-news-hero-card { position: relative; flex: 0 0 100%; min-width: 0; min-height: 130px; display: flex; align-items: flex-end; padding: 20px 42px 20px 14px; isolation: isolate; scroll-snap-align: start; background: #191e22; }
    .fzm-news-hero-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
    .fzm-news-hero-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #080a0cee, #080a0c35), linear-gradient(0deg, #080a0cdd, transparent); z-index: -1; }
    .fzm-news-hero-copy { color: #fff; }
    .fzm-news-hero-copy > span { color: #ff764f; background: #401a13; padding: 4px 6px; border-radius: 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
    .fzm-news-hero-copy h2 { font-size: clamp(17px, 4.4vw, 26px); line-height: 1.08; margin: 7px 0 5px; max-width: 26ch; }
    .fzm-news-hero-copy small { color: #b8bec8; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
    .fzm-news-hero-card > b { position: absolute; right: 12px; bottom: 16px; color: white; font-size: 22px; }
    .fzm-news-hero-dots { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); display: flex; }
    .fzm-news-hero-dots button { width: 24px; height: 24px; border: 0; padding: 8px; background: none; cursor: pointer; }
    .fzm-news-hero-dots button::before { content: ''; display: block; width: 8px; height: 8px; border-radius: 50%; background: #666; }
    .fzm-news-hero-dots button[aria-pressed="true"]::before { background: var(--fzm-red); }

    #fzmHeroSlot { border-radius: 10px; box-shadow: none; margin-bottom: 10px; }
    #fzmHeroSlot[data-mode="preseason"] { gap: 12px 9px; padding: 14px 12px 10px; border: 1px solid #ee7248; }
    #fzmHeroSlot[data-mode="preseason"] .fzd-hero-copy { flex: 1 1 52%; gap: 5px; }
    #fzmHeroSlot[data-mode="preseason"] .fzd-hero-shield { width: 25px; height: 29px; }
    #fzmHeroSlot[data-mode="preseason"] .fzd-hero-eyebrow { font-size: 8px; line-height: 1.35; letter-spacing: .12em; }
    #fzmHeroSlot[data-mode="preseason"] .fzd-hero-headline { font-size: clamp(18px, 4.5vw, 30px); line-height: 1.1; }
    .fzm-preseason-sub { color: #ffe2d6; font-size: 10px; line-height: 1.3; margin: 0; }
    #fzmHeroSlot[data-mode="preseason"] .fzd-hero-stats { flex: 0 0 auto; gap: 10px; }
    #fzmHeroSlot[data-mode="preseason"] .fzd-hero-stat { flex-direction: column-reverse; align-items: center; }
    #fzmHeroSlot[data-mode="preseason"] .fzd-hero-stat-val { font-size: 24px; }
    #fzmHeroSlot[data-mode="preseason"] .fzd-hero-stat-lbl { font-size: 8px; }
    #fzmHeroSlot .fzd-hero-cta { background: #f65325; min-height: 44px; padding: 11px; }
    #fzmHeroSlot .fzd-hero-cta-label { white-space: normal; text-align: center; }
    #fzmHeroSlot .fzd-hero-cta-bar { display: none; }
    #fzmHeroSlot .fzd-hero-cta-chev { color: #fff; font-size: 22px; }

    #fzmHeroSlot.is-draft { display: block !important; padding: 18px 14px 12px; color: #fff; background: radial-gradient(ellipse at 90% 50%, #24343d, #111315 70%); border: 1px solid #ffffff38; min-height: 220px; }
    #fzmHeroSlot.is-draft::before { transform: none; background: linear-gradient(90deg, #250c08dd, #090c0e88 70%, transparent); z-index: 1; }
    #fzmHeroSlot.is-draft.is-myturn { border-color: #f6532580; }
    #fzmHeroSlot .fzm-draft-portrait { position: absolute; z-index: 0; right: -12%; bottom: 0; height: 100%; width: 85%; object-fit: cover; object-position: top; opacity: .8; }
    .fzm-draft-content { position: relative; z-index: 2; }
    .fzm-draft-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; background: #772b214d; color: #ff9478; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; border-radius: 8px; }
    .fzm-draft-badge > span { width: 8px; height: 8px; border-radius: 50%; background: #ff633b; }
    .fzm-draft-title { margin: 8px 0 12px; font: 800 clamp(24px, 6vw, 38px)/1.1 'Archivo', sans-serif; max-width: 16ch; letter-spacing: -.04em; }
    .fzm-draft-stats { display: flex; gap: 18px; margin-bottom: 12px; }
    .fzm-draft-stats > div + div { padding-left: 18px; border-left: 1px solid #ffffff55; }
    .fzm-draft-stats span, .fzm-draft-clock > span { display: block; color: #c7c9ce; font-size: 9px; text-transform: uppercase; letter-spacing: .13em; margin-bottom: 5px; }
    .fzm-draft-stats strong { font: 700 26px/1 'Oswald', sans-serif; }
    .fzm-draft-clock { margin-bottom: 12px; }
    .fzm-draft-clock strong { font: 800 28px/1 'Archivo', sans-serif; color: #ff633b; font-variant-numeric: tabular-nums; }
    .fz-mobile-home .fzm-draft-cta { display: inline-flex; align-items: center; justify-content: center; gap: 15px; min-height: 44px; padding: 10px 18px; border: 1px solid #ff8452; border-radius: 8px; background: #e54b1c; color: #fff; font-weight: 700; font-size: 14px; }
    .fzm-draft-cta > span { font-size: 22px; }

    .fzm-poolchips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
    .fzm-poolchip { min-height: 44px; padding: 8px; gap: 7px; border-radius: 9px; font-size: clamp(9px, 2.35vw, 14px); line-height: 1.2; }
    .fzm-poolchip img, .fzm-tile-icon { width: 20px; height: 20px; object-fit: contain; }
    .fzm-poolchip-plus { display: grid; place-items: center; flex: 0 0 19px; height: 19px; border-radius: 50%; background: var(--fzm-ink); color: var(--fzm-bg); font: 700 21px/1 Arial, sans-serif; }
    .fzm-poolchip b { margin-left: auto; font-size: 18px; font-weight: 400; }
    .fzm-tile-row { padding: 9px 12px; margin-bottom: 12px; border: 1px solid var(--fzm-border); border-radius: 9px; }
    .fzm-tile-row > div { flex: 1; }
    .fz-mobile-home .fzm-tile-btn { background: var(--fzm-surface); color: var(--fzm-ink); border: 1px solid var(--fzm-border); min-height: 36px; }

    .fzm-watch-card { position: relative; width: clamp(145px, 34vw, 220px); min-height: 108px; padding: 30px 8px 10px 59px; }
    .fzm-watch-card .fzd-off-face { position: absolute; left: 3px; bottom: 10px; width: 52px; height: 78px; border-radius: 0; background: none; }
    .fzm-watch-card .fzd-off-face img { object-fit: cover; }
    .fzm-watch-logo { position: absolute; top: 8px; right: 9px; width: 22px; height: 22px; }
    .fzm-watch-name { font-size: 11px; line-height: 1.2; }
    .fzm-watch-team, .fzm-watch-note { font-size: 10px; line-height: 1.3; }
    .fzm-watch-note { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
    .fzm-watch-track.is-expanded .fzm-watch-note { display: block; }
    .fzm-watch-track.is-expanded { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); overflow: visible; }
    .fzm-watch-track.is-expanded .fzm-watch-card { width: auto; }

    .fz-mobile-home .fz-dash-calendar { padding: 0; background: none; border: 0; border-radius: 0; gap: 8px; }
    .fz-mobile-home .fzd-cal-head { gap: 6px; }
    .fz-mobile-home .fzd-cal-title { flex: 1; font: 700 clamp(20px, 5vw, 27px)/1.1 'Archivo', sans-serif; letter-spacing: -.03em; text-transform: none; }
    .fz-mobile-home .fzd-cal-full { flex: 0 1 auto; font: 600 10px/1.2 'Archivo', sans-serif; color: var(--fzm-red); margin: 0; }
    .fz-mobile-home .fzd-cal-nav { order: 3; padding: 4px 8px; border: 0; }
    .fz-mobile-home .fzd-cal-nav-btn { min-width: 32px; min-height: 28px; }
    .fz-mobile-home .fzd-cal-range { font-size: 10px; }
    .fz-mobile-home .fzd-cal-strip { gap: 5px; }
    .fz-mobile-home .fzd-day-chip { background: var(--fzm-surface); border-color: var(--fzm-border); padding: 7px 1px; }
    .fz-mobile-home .fzd-day-chip.is-selected { border: 2px solid var(--fzm-red); background: var(--fzm-red-soft); }
    .fz-mobile-home .fzd-day-chip.is-selected .fzd-day-chip-num { color: var(--fzm-red); }
    .fz-mobile-home .fzd-day-chip-count { display: flex; order: 2; justify-content: center; gap: 3px; min-height: 12px; font-size: 10px; color: var(--fzm-ink-soft); }
    .fz-mobile-home .fzd-day-chip-month { display: block; font: 500 8px/1 'Archivo', sans-serif; text-transform: uppercase; color: var(--fzm-ink-soft); }
    .fz-mobile-home .fzd-cal-dayname { font: 700 13px/1.2 'Archivo', sans-serif; }
    .fz-mobile-home .fzd-cal-dayhead { padding: 6px 0; }
    .fz-mobile-home .fzd-cal-empty { width: 100%; padding: 16px; margin: 0; border: 1px solid var(--fzm-border); border-radius: 9px; background: var(--fzm-surface); }
    .fz-mobile-home .fzd-cal-games { margin: 0; padding: 0; gap: 8px; scroll-padding: 0; }
    .fz-mobile-home .fzd-game-card { flex: 0 0 calc((100% - 8px) / 2); min-width: 145px; padding: 10px; background: var(--fzm-surface); border-color: var(--fzm-border); }
    .fz-mobile-home .fzd-game-head { gap: 4px; flex-wrap: wrap; }
    .fz-mobile-home .fzd-game-when { font-size: 9px; }
    .fz-mobile-home .fzd-game-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .fz-mobile-home .fzd-game-row { display: flex; flex-direction: column; gap: 5px; text-align: center; padding: 8px 0; }
    .fz-mobile-home .fzd-team-logo { width: 40px; height: 40px; }
    .fz-mobile-home .fzd-team-name { font-size: 10px; line-height: 1.2; }
    .fz-mobile-home .fzd-team-rec { display: none; }
    .fz-mobile-home .fzd-game-roster-count { display: block; padding: 7px 3px; margin-top: auto; border-radius: 7px; background: var(--fzm-border); color: var(--fzm-ink-soft); text-align: center; font-size: 10px; }
    .fz-mobile-home .fzd-game-roster-count.has-players { background: var(--fzm-red-soft); color: var(--fzm-red); }
    .fz-mobile-home .fzd-game-players { display: none; }

    #fzmLeagueTabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--fzm-border); border-radius: 9px; overflow: hidden; }
    #fzmLeagueTabs .fzm-tab { min-width: 0; min-height: 36px; border: 0; border-right: 1px solid var(--fzm-border); border-radius: 0; font-size: 10px; }
    #fzmLeagueTabs .fzm-tab:last-child { border-right: 0; }
    #fzmLeagueTabs .fzm-tab.is-active { background: #e74a1e; color: #fff; border-radius: 8px; }
    .fzm-tab-count { display: none; }
    .fzm-off-card { position: relative; flex-basis: calc((100% - 10px) / 2); min-width: 155px; max-width: none; padding: 10px; gap: 8px; }
    .fzm-off-card > .fzd-off-face { position: absolute; top: 39px; left: 9px; width: 35px; height: 40px; }
    .fzm-off-card-name { font-size: 12px; padding-left: 40px; min-height: 20px; }
    .fzm-off-card-club { font-size: 10px; padding-left: 40px; }
    .fzm-off-card-club img { width: 18px; height: 18px; }
    .fzm-off-card-date { font-size: 7px; letter-spacing: .03em; }
    .fzm-off-tag { font-size: 8px; padding: 5px; }
    .fzm-off-card-stats { flex-wrap: wrap; gap: 8px; }
    .fzm-off-stat-val { font-size: 10px; }
    .fzm-player-card { position: relative; flex: 0 0 calc((100% - 10px) / 2); min-width: 155px; padding: 10px 8px 10px 52px; }
    .fzm-player-card > .fzd-off-face { position: absolute; left: 7px; top: 10px; width: 38px; height: 45px; }
    .fzm-player-name { font-size: 11px; }
    .fzm-player-tag.is-upcoming { display: none; }
    .fzm-player-line { font-size: 10px; line-height: 1.3; }
}
