/* ============================================================================
   RCF V1.2 — UI-MICRO-01
   LE CARTOUCHE SAISON / ANNÉE / ÂGE DU BANDEAU SUPÉRIEUR

   Le défaut corrigé : l'année et l'âge étaient empilés SOUS la saison, à
   8,3 px sur l'écran de jeu — illisibles sur téléphone, alors que ce sont deux
   des informations les plus consultées de la partie.

   La règle posée ici :

     Hiver      2039 · 29 ANS

   — une seule ligne, trois informations, et une hiérarchie explicite :
        1. l'ÂGE      — le plus gros, en blanc, avec le halo du logo RCF ;
        2. l'ANNÉE    — nettement lisible, mais sans halo ;
        3. la SAISON  — conservée dans son jaune d'origine, propre et lisible.

   Contrainte tenue : la HAUTEUR DU BANDEAU NE BOUGE PAS. Tout ce qui est
   gagné en taille de police l'est en passant d'une pile de deux lignes à une
   seule ligne — la pile faisait 24 + 12 px, la ligne en fait moins de 24.

   Cette feuille est chargée en dernier dans index.html : c'est la seule façon
   de passer devant les `!important` que lot12-v4.css pose sur `.punch` pour
   l'écran de jeu, sans aller modifier une feuille gelée. Elle ne connaît que
   `.punch` et son contenu.
   ========================================================================== */

/* ---------------------------------------------------------------- la ligne */
.punch{
  display:flex;
  align-items:baseline;          /* les trois textes reposent sur la MÊME ligne de base */
  justify-content:flex-end;
  gap:9px;
  min-width:0;                   /* la largeur suit le contenu : plus de colonne fixe */
  white-space:nowrap;            /* aucun retour à la ligne : le bandeau garde sa hauteur */
}

/* ------------------------------------------------------------- 3. la saison */
.punch .yr{
  font-size:17px;
  line-height:1.05;
  font-weight:700;
  letter-spacing:.05em;
  /* couleur héritée du thème (var(--hivis)) : l'identité jaune est conservée */
}

/* ------------------------------------------------- le groupe année · âge */
.punch .age{
  display:flex;
  align-items:baseline;
  gap:5px;
  line-height:1.05;
  letter-spacing:0;              /* l'interlettrage est repris par chaque enfant */
  /* `text-transform:uppercase` vient du thème : « 29 ans » se lit « 29 ANS ». */
}

/* --------------------------------------------------------------- 2. l'année */
.punch .pu-year{
  font-size:17px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--dim);              /* plus clair que le gris effacé d'avant */
}

/* Le point séparateur. Première version à .42 d'opacité : invisible sur la
   photo d'atelier, la ligne se lisait « 2039 29 ANS ». Il prend donc la couleur
   de l'année et une opacité qui le fait exister, sans lui donner de poids. */
.punch .pu-dot{
  font-size:13px;
  font-weight:400;
  color:var(--dim);
  opacity:.78;
  transform:translateY(-1px);
}

/* ------------------------------------------------------------------ 1. l'âge */
.punch .pu-age{
  font-size:19.5px;
  font-weight:700;
  letter-spacing:.05em;
  color:#fff;
  /* LE HALO. Repris des rayons du logo officiel — lot12-v4.css applique au
     `.brand-mark` un drop-shadow 1 px à .98 puis 3 px à .72. On garde ces deux
     valeurs à l'identique et on n'ajoute qu'une troisième passe très diluée
     pour que le halo existe autour d'un texte, qui est plus fin qu'un logo.
     La dernière ombre n'est pas un halo : c'est l'assise sombre qui détache le
     blanc du fond clair, exactement comme pour le logo. Pas de flou large,
     pas de néon, pas de texte mangé. */
  text-shadow:
    0 0 1px rgba(255,255,255,.98),
    0 0 3px rgba(255,255,255,.72),
    0 0 9px rgba(255,255,255,.30),
    0 1px 2px rgba(0,0,0,.62),
    0 4px 14px rgba(0,0,0,.55);
}

/* ============================================================================
   L'ÉCRAN DE JEU — là où le bandeau est le plus contraint (52 px de haut fixes)
   et là où le défaut se voyait. lot12-v4.css y impose ses tailles en
   `!important` ; on repasse devant avec la même spécificité.
   ========================================================================== */
.wrap:has(#scGame.on) .punch{
  padding:4px 11px!important;
  min-width:0!important;
}
.wrap:has(#scGame.on) .punch .yr{font-size:15px!important}
.wrap:has(#scGame.on) .punch .age{
  font-size:15px!important;
  letter-spacing:0!important;
}
.wrap:has(#scGame.on) .punch .pu-year{font-size:15px}
.wrap:has(#scGame.on) .punch .pu-dot{font-size:12px}
.wrap:has(#scGame.on) .punch .pu-age{font-size:17.5px}

/* ============================================================================
   TÉLÉPHONES ÉTROITS — le cas prioritaire.
   À 360 px de large, le logo (78 px) et le cartouche partagent la barre. On
   resserre l'interlettrage et on descend d'un demi-point plutôt que de laisser
   la ligne se couper : `white-space:nowrap` interdit le retour à la ligne, donc
   c'est ici que se joue l'absence de débordement.
   ========================================================================== */
@media(max-width:380px){
  .punch{gap:8px}
  .punch .age{gap:4px}
  .wrap:has(#scGame.on) .punch{padding:4px 9px!important}
  .wrap:has(#scGame.on) .punch .yr{font-size:13.5px!important;letter-spacing:.03em}
  .wrap:has(#scGame.on) .punch .pu-year{font-size:13.5px;letter-spacing:.02em}
  .wrap:has(#scGame.on) .punch .pu-age{font-size:16px;letter-spacing:.03em}
}
@media(max-width:340px){
  .punch{gap:6px}
  .wrap:has(#scGame.on) .punch .yr{font-size:12.5px!important}
  .wrap:has(#scGame.on) .punch .pu-year{font-size:12.5px}
  .wrap:has(#scGame.on) .punch .pu-age{font-size:15px}
}