/* ============================================================
   neo — les saisons d'un mois
   Chargé après neo.css, sous html.neo comme lui.
   Trois lieux : la carte de l'accueil (#saison-card), l'écran de la saison
   (.sz dans #meta-content) et l'onglet du classement (.sz-onglet).
   L'accent de l'arc arrive par --sz-acc (posé par game.js, bloc LES SAISONS).
   ============================================================ */

/* L'habillage classique n'a pas de scène : on la retire au lieu de laisser
   deux grandes images nues dans la carte. */
html:not(.neo) .sz-scene, html:not(.neo) .sz-sceau { display: none; }
html:not(.neo) .sz-jauge { display: flex; gap: 2px; margin: 8px 0; }
html:not(.neo) .sz-cran { flex: 1; height: 8px; background: rgba(127, 127, 127, 0.3); border-radius: 2px; }
html:not(.neo) .sz-cran.plein { background: #f2a33a; }
html:not(.neo) .sz-borne { display: none; }
html:not(.neo) .sz-acc-tete > span:last-child { display: flex; flex-direction: column; align-items: center; gap: 2px; }
html:not(.neo) .sz-acc-actions { display: grid; gap: 10px; }

html.neo .saison-card, html.neo .sz { --sz-acc: #ff8a1f; }

/* ---------------------------------------------------------------------------
   La jauge des jours : vingt crans, trois bornes de récompense
   --------------------------------------------------------------------------- */
html.neo .sz-jauge {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 3px;
  margin: 26px 0 10px;
}
html.neo .sz-jauge-c { margin-top: 30px; }
html.neo .sz-cran {
  position: relative;
  height: 12px;
  border-radius: 3px;
  background: var(--n-s3);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.55);
}
html.neo .sz-cran.plein {
  background: var(--sz-acc);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.28);
  transform-origin: bottom;
  animation: sz-cran 0.38s calc(var(--i) * 26ms) cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html.neo .sz-cran.borne { border-radius: 3px 3px 5px 5px; }
html.neo .sz-borne {
  position: absolute;
  left: 50%; bottom: calc(100% + 5px);
  transform: translateX(-50%);
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 6px;
  font: 800 11px/1 var(--n-titre);
  color: var(--n-pale);
  background: var(--n-s2);
  border: 1px solid var(--n-filet-fort);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}
html.neo .sz-borne.fait {
  color: #12100b;
  background: var(--sz-acc);
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 0 rgba(0, 0, 0, 0.5);
}
@keyframes sz-cran { from { transform: scaleY(0.15); opacity: 0.2; } to { transform: none; opacity: 1; } }

/* Le sceau de l'arc : un tampon en relief, le kanji gravé. */
html.neo .sz-sceau {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  font: 900 22px/1 serif;
  color: #12100b;
  background: var(--sz-acc);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.3), 0 4px 10px -4px rgba(0, 0, 0, 0.8);
  transform: rotate(-4deg);
}
html.neo .sz-sceau.grand { width: 58px; height: 58px; font-size: 32px; border-radius: 14px; }

/* ---------------------------------------------------------------------------
   La scène : le décor de l'arc et deux personnages qui sortent du cadre
   --------------------------------------------------------------------------- */
html.neo .sz-scene {
  position: relative;
  height: 150px;
  margin: -1px -1px 0;
  border-radius: var(--n-r) var(--n-r) 0 0;
}
html.neo .sz-decor {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  animation: neo-decor 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
/* Le voile du bas ne décore pas : il porte le texte qui chevauche la scène. */
html.neo .sz-scene::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 60%;
  background: linear-gradient(180deg, rgba(19, 21, 28, 0), var(--n-s1));
}
html.neo .sz-perso {
  position: absolute;
  bottom: -18px;
  height: 182px;
  width: auto;
  z-index: 1;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.65));
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 70%, transparent 96%);
  animation: sz-perso 0.6s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html.neo .sz-perso.p0 { left: -6px; transform: scaleX(-1); animation-name: sz-perso-g; }
html.neo .sz-perso.p1 { right: -8px; }
@keyframes sz-perso { from { opacity: 0; translate: 26px 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes sz-perso-g { from { opacity: 0; translate: -26px 10px; } to { opacity: 1; translate: 0 0; } }

/* ---------------------------------------------------------------------------
   L'accueil : la carte de la saison
   --------------------------------------------------------------------------- */
html.neo #saison-card {
  position: relative;
  padding: 0 !important;
  overflow: visible !important;
  text-align: left;
  isolation: isolate;
}
html.neo #saison-card .card-ribbon {
  position: absolute !important;
  top: 14px; left: 50% !important; right: auto !important;
  transform: translateX(-50%);
  z-index: 3;
  width: auto !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  background: rgba(10, 11, 15, 0.82) !important;
  border: 1px solid var(--n-filet-fort) !important;
  border-radius: 8px !important;
  font: 900 12px/1 var(--n-titre) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--n-encre) !important;
  box-shadow: none !important;
}
html.neo #saison-card .card-ribbon::before,
html.neo #saison-card .card-ribbon::after { display: none !important; }
html.neo #saison-card .sz-scene { cursor: pointer; }
html.neo .sz-acc-corps { position: relative; z-index: 2; padding: 0 18px 18px; margin-top: -30px; }
html.neo .sz-acc-tete { display: flex; align-items: center; gap: 12px; }
html.neo .sz-acc-tete > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
html.neo .sz-acc-arc { font: 900 20px/1.15 var(--n-titre); color: var(--n-encre); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); }
html.neo .sz-acc-quand { font: 700 13px/1.2 var(--n-titre); color: var(--sz-acc); letter-spacing: 0.02em; }
html.neo #saison-card .daily-status { text-align: left !important; color: var(--n-doux) !important; margin: 6px 0 0 !important; }
html.neo #saison-card .sz-acc-bilan { color: var(--n-encre) !important; font-weight: 700; }
html.neo #saison-card .sz-acc-jour.a-jouer { color: var(--n-encre) !important; }
html.neo #saison-card .sz-acc-jour.a-jouer::before { content: "●"; color: var(--sz-acc); margin-right: 7px; font-size: 11px; vertical-align: 1px; }
html.neo .sz-acc-actions { display: grid; gap: 10px; margin-top: 14px; }
html.neo .sz-acc-actions .btn { width: 100%; margin: 0 !important; }

/* ---------------------------------------------------------------------------
   L'écran de la saison
   --------------------------------------------------------------------------- */
html.neo .sz { display: flex; flex-direction: column; gap: 18px; text-align: left; margin-bottom: 22px; }
html.neo .sz-tete { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
html.neo .sz-arc { margin: 0; font: 900 26px/1.1 var(--n-titre); color: var(--n-encre); letter-spacing: -0.01em; }
html.neo .sz-dates { margin: 6px 0 0; font: 600 14px/1.35 var(--n-titre); color: var(--n-doux); }
html.neo .sz-dates b { color: var(--sz-acc); font-weight: 800; white-space: nowrap; }
html.neo .sz-accroche { margin: 0; color: var(--n-doux); font-size: 15px; line-height: 1.55; border-left: 3px solid var(--sz-acc); padding-left: 12px; }

html.neo .sz-moi {
  position: relative;
  padding: 18px;
  background: var(--n-s1);
  border: 1px solid var(--n-filet);
  border-radius: var(--n-r);
  box-shadow: var(--n-ombre);
}
html.neo .sz-moi-chiffres { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
html.neo .sz-moi-chiffres > span { display: flex; flex-direction: column; }
html.neo .sz-moi-pts b { font: 900 46px/0.95 var(--n-titre); color: var(--n-encre); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; animation: neo-score 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
html.neo .sz-moi-chiffres small { font: 700 12px/1.3 var(--n-titre); color: var(--n-pale); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 4px; }
html.neo .sz-moi-rang { align-items: flex-end; text-align: right; }
html.neo .sz-moi-rang b { font: 900 30px/1 var(--n-titre); color: var(--sz-acc); }
html.neo .sz-moi p { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--n-doux); }
html.neo .sz-moi .sz-moi-bilan { color: var(--n-encre); font-weight: 700; }
html.neo .sz-moi-jour.a-jouer { color: var(--n-encre) !important; }
html.neo .sz-moi-jour.a-jouer::before { content: "●"; color: var(--sz-acc); margin-right: 7px; font-size: 11px; vertical-align: 1px; }
html.neo .sz-moi .btn { width: 100%; margin: 14px 0 0 !important; }
html.neo .sz-regle { margin: 0; font-size: 13px; line-height: 1.5; color: var(--n-pale); }

html.neo .sz-bloc { display: flex; flex-direction: column; gap: 10px; }
html.neo .sz-h { margin: 6px 0 0; font: 900 13px/1 var(--n-titre); letter-spacing: 0.16em; text-transform: uppercase; color: var(--n-encre); display: flex; align-items: center; gap: 10px; }
html.neo .sz-h::after { content: ""; flex: 1; height: 1px; background: var(--n-filet-fort); }
html.neo .sz-sous { margin: 0; font-size: 13px; color: var(--n-pale); line-height: 1.45; }

/* Les quatre récompenses */
html.neo .sz-recs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html.neo .sz-rec {
  display: flex; flex-direction: column;
  background: var(--n-s1);
  border: 1px solid var(--n-filet);
  border-radius: 14px;
  box-shadow: var(--n-ombre-choix);
  overflow: visible;
  animation: neo-choix 0.42s calc(var(--i) * 60ms) cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html.neo .sz-rec.fait { border-color: color-mix(in srgb, var(--sz-acc) 55%, transparent); }
html.neo .sz-rec-vis {
  position: relative;
  height: 150px;
  display: grid; place-items: center;
  padding: 26px 10px 8px;
  border-radius: 14px 14px 0 0;
  background: var(--n-s2);
  box-shadow: inset 0 -1px 0 var(--n-filet);
}
html.neo .sz-rec-vis .ap-ouvrir { padding: 0; margin: 0; background: none; border: 0; width: 100%; display: grid; place-items: center; cursor: pointer; }
html.neo .sz-rec-vis .ap-carte { width: 84px; }
html.neo .sz-rec-vis .bnr-compo { width: 100%; }
html.neo .sz-rec:not(.fait) .ap-cv, html.neo .sz-rec:not(.fait) .bnr-fond,
html.neo .sz-rec:not(.fait) .ap-perso, html.neo .sz-rec:not(.fait) .bnr-perso { filter: saturate(0.6) brightness(0.78); }
html.neo .sz-rec-txt { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
html.neo .sz-rec-cond { margin: 0; font: 800 11px/1.2 var(--n-titre); text-transform: uppercase; letter-spacing: 0.08em; color: var(--sz-acc); }
html.neo .sz-rec h4 { margin: 0; font: 800 15px/1.2 var(--n-titre); color: var(--n-encre); }
html.neo .sz-etat { font-size: 12.5px; line-height: 1.35; color: var(--n-doux); }
html.neo .sz-etat.fait { color: var(--n-vert); font-weight: 800; }
html.neo .sz-rec .btn { margin: 6px 0 0 !important; width: 100%; min-height: 40px; }
html.neo .sz-porte { margin-top: 6px; font: 800 12px/1 var(--n-titre); color: var(--sz-acc); text-transform: uppercase; letter-spacing: 0.1em; }
/* La plaque d'un titre : une pièce de bois gravée, pas une pastille. */
html.neo .sz-plaque {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  max-width: 100%;
  padding: 12px 14px 11px;
  border-radius: 10px;
  font: 900 15px/1.15 var(--n-titre);
  text-align: center;
  color: #f6ead2;
  background: #3a2a1c;
  border: 1px solid #5c4430;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -3px 0 rgba(0, 0, 0, 0.35), 0 8px 14px -8px rgba(0, 0, 0, 0.9);
  transform: rotate(-2deg);
}
html.neo .sz-plaque small { font: 800 10px/1 var(--n-titre); letter-spacing: 0.16em; text-transform: uppercase; color: #c9a77a; }
html.neo .sz-plaque.elite { color: #1d1606; background: #e7c25a; border-color: #b8902d; }
html.neo .sz-plaque.elite small { color: #6b4f12; }
html.neo .sz-rec:not(.fait) .sz-plaque { opacity: 0.75; }
html.neo .sz-compte { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: var(--n-s2); border: 1px dashed var(--n-filet-fort); }
html.neo .sz-compte .shop-note { margin: 0 !important; text-align: left !important; }

/* Le classement */
html.neo .sz-board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
html.neo .sz-ligne {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 7px 14px 7px 7px;
  background: var(--n-s1);
  border: 1px solid var(--n-filet);
  border-radius: 12px;
  animation: neo-choix 0.34s calc(min(var(--i), 12) * 30ms) cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html.neo .sz-rg { display: grid; place-items: center; height: 32px; border-radius: 8px; font: 900 14px/1 var(--n-titre); color: var(--n-doux); background: var(--n-s2); font-variant-numeric: tabular-nums; }
html.neo .sz-ligne.p1 .sz-rg { background: #e7c25a; color: #1d1606; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.25); }
html.neo .sz-ligne.p2 .sz-rg { background: #c9ced8; color: #15171c; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 0 rgba(0, 0, 0, 0.22); }
html.neo .sz-ligne.p3 .sz-rg { background: #c98a52; color: #1d0f04; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.25); }
html.neo .sz-nom { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
html.neo .sz-nom strong { font: 800 15px/1.2 var(--n-titre); color: var(--n-encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.neo .sz-nom small { font-size: 12px; color: var(--n-pale); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
html.neo .sz-ttl { font: 800 11px/1 var(--n-titre); padding: 3px 6px; border-radius: 5px; color: #f6ead2; background: #3a2a1c; border: 1px solid #5c4430; }
html.neo .sz-ttl.elite { color: #1d1606; background: #e7c25a; border-color: #b8902d; }
html.neo .sz-pts { font: 900 17px/1 var(--n-titre); color: var(--n-encre); font-variant-numeric: tabular-nums; }
html.neo .sz-ligne.you { border-color: var(--sz-acc); background: color-mix(in srgb, var(--sz-acc) 12%, var(--n-s1)); box-shadow: 0 0 0 1px var(--sz-acc) inset; }

html.neo .sz-coupe { list-style: none; text-align: center; color: var(--n-pale); font: 900 18px/1 var(--n-titre); padding: 2px 0; }
html.neo .sz-tout { align-self: center; margin: 4px 0 0 !important; }
/* Le bouton du défi, dans l'écran de la saison : la même action qu'à l'accueil, la même couleur. */
html.neo .sz .btn-daily.sz-jouer {
  background: var(--n-orange) !important; color: #1a0e00 !important; border: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 0 var(--n-orange-fonce) !important;
  font-weight: 900 !important; text-transform: uppercase; letter-spacing: 0.06em;
}
html.neo .sz .btn-daily.sz-jouer:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 0 var(--n-orange-fonce) !important; }

/* Le calendrier */
html.neo .sz-cal { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
html.neo .sz-cal-l {
  position: relative;
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 64px;
  padding: 10px 14px 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--n-filet);
  overflow: hidden;
  isolation: isolate;
  animation: neo-choix 0.4s calc(var(--i) * 50ms) cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html.neo .sz-cal-decor { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(0.7) brightness(0.55); }
html.neo .sz-cal-l::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 11, 15, 0.92) 30%, rgba(10, 11, 15, 0.45)); }
html.neo .sz-cal-l.en { border-color: var(--sz-acc); box-shadow: 0 0 0 1px var(--sz-acc) inset; }
html.neo .sz-cal-l.en .sz-cal-decor { filter: none; }
html.neo .sz-cal-l.close .sz-cal-decor { filter: grayscale(1) brightness(0.4); }
html.neo .sz-cal-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; font: 900 16px/1 var(--n-titre); color: #12100b; background: var(--sz-acc); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.3); }
html.neo .sz-cal-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
html.neo .sz-cal-txt strong { font: 800 15px/1.2 var(--n-titre); color: var(--n-encre); }
html.neo .sz-cal-txt small { font-size: 12.5px; color: var(--n-doux); }
html.neo .sz-cal-etat { font: 800 11px/1 var(--n-titre); letter-spacing: 0.1em; text-transform: uppercase; color: var(--n-pale); }
html.neo .sz-cal-l.en .sz-cal-etat { color: var(--sz-acc); }
html.neo .sz-cal-voir { position: absolute; inset: 0; z-index: 1; background: none; border: 0; border-radius: inherit; cursor: pointer; padding: 0; }
html.neo .sz-cal-voir:focus-visible { outline: 3px solid var(--n-orange); outline-offset: 2px; }
html.neo .sz-cal-l:has(.sz-cal-voir):active { transform: scale(0.985); }
@media (hover: hover) { html.neo .sz-cal-l:has(.sz-cal-voir):hover { border-color: var(--n-filet-fort); } }

/* L'onglet du classement */
html.neo .sz-onglet { gap: 10px; }
html.neo .sz-onglet .btn { margin: 6px 0 0 !important; }

/* Le titre porté, sous le portrait du profil */
html.neo .sz-titre-profil {
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  margin: 12px auto 14px;
  padding: 8px 16px 7px;
  border-radius: 10px;
  font: 900 15px/1.1 var(--n-titre);
  color: #f6ead2; background: #3a2a1c; border: 1px solid #5c4430;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -3px 0 rgba(0, 0, 0, 0.35), 0 8px 14px -8px rgba(0, 0, 0, 0.9);
  cursor: pointer;
}
html.neo .sz-titre-profil small { font: 800 10px/1 var(--n-titre); letter-spacing: 0.16em; text-transform: uppercase; color: #c9a77a; }
html.neo .sz-titre-profil.elite { color: #1d1606; background: #e7c25a; border-color: #b8902d; }
html.neo .sz-titre-profil.elite small { color: #6b4f12; }

@media (hover: hover) {
  html.neo .sz-rec-vis .ap-ouvrir:hover .ap-carte { transform: translateY(-4px) rotate(-1deg); }
  html.neo #saison-card .sz-scene:hover .sz-perso.p1 { translate: 0 -4px; transition: translate 0.25s; }
}

/* Écran large : l'écran prend toute la largeur (la grille de #meta-content
   en a deux colonnes) et se range en deux : ta saison à gauche, ce qu'elle
   donne à droite, puis le classement et le calendrier côte à côte. */
@media (min-width: 1060px) {
  #meta-content > .sz { grid-column: 1 / -1; }
  html.neo .sz:not(.sz-onglet) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    gap: 18px 34px;
    align-items: start;
  }
  html.neo .sz:not(.sz-onglet) > * { grid-column: 1; }
  html.neo .sz:not(.sz-onglet) > .sz-bloc-recs { grid-column: 2; grid-row: 1 / span 4; }
  html.neo .sz:not(.sz-onglet) > .sz-bloc-board { grid-row: 5; }
  html.neo .sz:not(.sz-onglet) > .sz-bloc-cal { grid-column: 2; grid-row: 5; }
  html.neo .sz-recs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.neo #saison-card .sz-scene { height: 170px; }
  html.neo #saison-card .sz-perso { height: 200px; }
  html.neo .sz-arc { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  html.neo .sz-cran.plein, html.neo .sz-decor, html.neo .sz-perso, html.neo .sz-rec,
  html.neo .sz-ligne, html.neo .sz-cal-l, html.neo .sz-moi-pts b { animation: none !important; }
}