/* =========================================================
     ÉCRAN TITRE (js/95) — première image du jeu, et sa porte d'entrée.
     ---------------------------------------------------------
     2026-09-03, demande Pixel : « un écran titre avec le nom du jeu, un bandeau
     "Bêta-Pré-Alpha premium ++" en travers posé près du titre, un style visuel
     le plus cohérent possible avec le jeu », puis « la page de connexion doit
     être sur l'écran titre, pas sur l'interface de jeu ».

     Toute la palette vient des variables du jeu (css/00) : l'or des torches, la
     pierre du panneau, l'encre du texte. Rien d'inventé ici — un écran titre
     qui ne ressemblerait pas au jeu qu'il annonce raterait sa seule fonction.
  ========================================================= */
  #titleScreen{
    position:fixed; inset:0;
    display:none;
    /* CENTRAGE « SÛR » : avec align-items:center, un contenu plus HAUT que la
       fenêtre déborde des DEUX côtés et le haut devient inatteignable — le
       titre se retrouvait coupé sur un écran bas (constaté en 800×450). Le
       conteneur aligne donc en haut, et c'est `margin:auto` sur le contenu qui
       le centre quand il y a la place. */
    align-items:flex-start; justify-content:center;
    background:var(--bg);
    z-index:120;                 /* au-dessus de tout, y compris les modales */
    overflow:auto;
  }
  #titleScreen.show{ display:flex }
  #titleBg, #titleBg2{
    position:fixed; inset:0;      /* fixe : le décor ne défile pas avec la carte */
    width:100%; height:100%;
    display:block;
  }
  /* #titleBg2 : calque de transition (js/95, titleReshuffle) — transparent au
     repos, ne s'anime en fondu que le temps d'un réagencement du décor. */
  #titleBg2{ opacity:0; transition:opacity 1.4s ease; pointer-events:none }
  /* Vignettage : le décor s'assombrit vers les bords, comme le brouillard de
     guerre au bord du champ de vision. */
  .ts-vignette{
    position:fixed; inset:0; pointer-events:none;
    background:
      radial-gradient(ellipse at 50% 46%, rgba(13,11,16,0) 26%, rgba(13,11,16,.78) 62%, rgba(13,11,16,.96) 100%),
      linear-gradient(to bottom, rgba(13,11,16,.55), rgba(13,11,16,0) 30%);
  }
  .ts-content{
    position:relative; z-index:2;
    margin:auto;                 /* centré s'il y a la place, jamais rogné sinon */
    display:flex; flex-direction:column; align-items:center; gap:clamp(6px, 1.15vh, 14px);
    padding:clamp(8px, 1.6vh, 26px) 16px;
    max-width:min(1060px, calc(100vw - 24px));
    text-align:center;
  }

  /* ---------- Titre + bandeau ---------- */
  .ts-titlewrap{ position:relative; padding:2px 30px 36px }
  .ts-title{
    display:flex; flex-direction:column; line-height:.94;
    font-family:"Trebuchet MS", Verdana, sans-serif;
    letter-spacing:.06em; text-transform:uppercase;
    color:var(--accent);
    text-shadow:
      0 0 22px rgba(224,168,60,.35),
      0 3px 0 #6a4c18,
      0 5px 18px rgba(0,0,0,.8);
  }
  .ts-title span:first-child{ font-size:clamp(1.6rem, min(7vw, 6.8vh), 3.4rem) }
  .ts-title .ts-title-2{ font-size:clamp(2rem, min(9vw, 9vh), 4.6rem); color:#f0c060 }
  /* LE BANDEAU, en travers du titre — l'objet même de la demande. Posé en
     diagonale sur le coin bas-droit du bloc de titre, comme une étiquette
     collée à la va-vite sur une caisse. */
  .ts-ribbon{
    position:absolute; right:-14px; bottom:18px;
    transform:rotate(-9deg);
    background:linear-gradient(180deg, #c05040, #8e3628);
    color:#ffe9c8;
    font-size:clamp(.6rem, 2.2vw, .82rem);
    font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    padding:5px 16px;
    border:1px solid #e0a83c;
    border-radius:3px;
    box-shadow:0 4px 14px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.12);
    white-space:nowrap;
  }
  .ts-sub{
    color:var(--ink-dim); font-size:.86rem; line-height:1.4;
    max-width:70ch; margin-top:0;
  }
  /* L'appel : même largeur que l'accroche, mais en or et en italique — c'est
     une invitation, pas une description. */
  .ts-call{
    color:var(--accent); font-size:.82rem; font-style:italic; line-height:1.35;
    max-width:70ch;
  }

  /* ---------- La scène : classes | authentification | classes ---------- */
  .ts-stage{
    display:flex; align-items:center; justify-content:center;
    gap:clamp(10px, 3vw, 26px);
    width:100%;
  }
  .ts-roster{ display:flex; flex-direction:column; gap:10px; justify-content:center; flex:none }
  .ts-hero{
    display:flex; flex-direction:column; align-items:center; gap:3px;
    width:66px;
  }
  .ts-hero-art{
    width:46px; height:46px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.6rem;
    background:#1e1a28; border:1px solid var(--panel-edge); border-radius:8px;
    box-shadow:inset 0 0 12px rgba(0,0,0,.55);
  }
  .ts-hero-art img{ width:100%; height:100%; image-rendering:pixelated }
  .ts-hero span{
    font-size:.62rem; color:var(--ink-dim); letter-spacing:.03em;
    text-transform:uppercase; white-space:nowrap;
  }

  /* ---------- Carte d'authentification, posée sur le décor ---------- */
  #titleScreen #loginPick{
    position:static; display:none; inset:auto;
    background:none; width:100%;
    flex:0 1 420px; min-width:280px;
  }
  #titleScreen #loginPick.show{ display:block }
  #titleScreen .ts-auth{
    background:rgba(26,22,32,.94);
    border:1px solid var(--accent-dim);
    border-radius:12px;
    box-shadow:0 0 36px rgba(224,168,60,.12), 0 14px 40px rgba(0,0,0,.7);
    max-width:420px; margin:0 auto;
    padding:clamp(9px, 1.6vh, 14px) 18px clamp(10px, 1.8vh, 16px);
  }
  .ts-auth-tabs{ display:flex; gap:6px; margin-bottom:12px }
  .ts-auth-tab{
    flex:1; background:#241d33; color:var(--ink-dim);
    border:1px solid var(--panel-edge); border-radius:8px;
    padding:8px 6px; font-size:.82rem; cursor:pointer;
  }
  .ts-auth-tab:hover{ color:var(--ink); border-color:var(--accent-dim) }
  .ts-auth-tab.active{ background:var(--accent-dim); color:#1a1424; border-color:var(--accent); font-weight:600 }
  /* TENIR SUR UNE PAGE, SUITE : la liste des comptes connus est la partie de la
     carte dont la hauteur est imprévisible (un compte ou dix). Elle défile
     dans sa propre zone, et le formulaire reste toujours visible sous elle.
     (Le classement, lui, a quitté cette carte pour son encart dédié.) */
  #titleScreen .ts-auth-list{
    max-height:min(40vh, 330px);
    overflow-y:auto; overscroll-behavior:contain;
    margin-bottom:2px;
  }
  #titleScreen #loginList{ margin-bottom:6px }
  #titleScreen .lp-new{ display:flex; flex-direction:column; gap:8px }
  #titleScreen .lp-note{ color:var(--ink-dim); font-size:.7rem; line-height:1.35; margin-top:8px }
  #titleScreen .lp-auth-msg{ color:#e0a0a0; font-size:.78rem; margin-top:8px; min-height:1.1em }
  /* Titre du volet + lien de bascule connexion ⇄ inscription */
  .ts-auth-h{
    color:var(--accent); font-size:.9rem; letter-spacing:.08em;
    text-transform:uppercase; text-align:center; margin-bottom:8px;
  }
  .ts-auth-swap{ color:var(--ink-dim); font-size:.72rem; text-align:center; margin-top:8px }
  .ts-auth-swap button{
    background:none; border:none; padding:0 2px;
    color:var(--accent); font-size:.72rem; font-weight:600;
    text-decoration:underline; cursor:pointer;
  }
  .ts-auth-swap button:hover{ color:#f0c060; background:none }

  /* ---------- TENIR SUR UNE PAGE (retour Pixel) ----------
     Sous 780 px de large, la scène s'empile : les six classes passent en UNE
     rangée compacte au-dessus de la carte, et tout le rythme vertical se
     resserre. C'est la disposition mobile par défaut — la plus contrainte. */
  @media (max-width: 780px){
    .ts-stage{ flex-direction:column; gap:10px }
    .ts-roster{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:8px }
    /* Les deux groupes remontent AU-DESSUS de la carte (order) : empilés tels
       quels, le second se serait retrouvé sous le formulaire, séparé de ses
       trois camarades. Deux rangées de trois, puis la carte. */
    #tsRosterL{ order:1 } #tsRosterR{ order:2 } #titleScreen #loginPick{ order:3 }
    /* Le classement passe EN DERNIER sur écran étroit : se connecter d'abord,
       admirer ensuite. Il est le seul bloc à passer sous la ligne de flottaison. */
    /* CORRECTIF (2026-09-03) : préfixé #titleScreen — la base .ts-lb (plus
       bas dans ce même fichier, hors media query) a EXACTEMENT la même
       spécificité qu'une règle ".ts-lb" nue ici ; comme elle vient APRÈS dans
       le fichier, c'est ELLE qui gagnait en mobile, effaçant purement et
       simplement ce plafond (constaté : 300/470px au lieu de 46vh/340px,
       62px de trop sur la page). Un id de plus dans le sélecteur règle ça
       pour de bon, sans dépendre de l'ordre des règles. */
    #titleScreen .ts-lb{ order:4; flex:none; max-width:min(420px, 100%); width:100%; max-height:min(46vh, 340px) }
    /* Zone défilante un peu plus courte qu'au bureau : les deux rangées de
       classes prennent la hauteur que la carte a en moins, et le lien « Créer
       un compte » doit rester au-dessus de la ligne de flottaison même avec un
       classement plein (10 entrées). */
    #titleScreen .ts-auth-list{ max-height:min(32vh, 280px) }
    /* CORRECTIF (2026-09-03) : #loginPick a un flex-basis de 420px pour bien
       proportionner la carte à côté du classement — sur `.ts-stage` en ROW
       (bureau), c'est une préférence de LARGEUR. Mais en `column` (mobile,
       juste au-dessus), flex-basis vise l'axe principal, devenu VERTICAL :
       la carte se retrouvait forcée à 420px de HAUT même quand son contenu
       tenait en 300, ajoutant ~120px d'espace vide et faisant déborder la
       page (mesuré : 238px de trop sur un compte vide, 390×844). En colonne,
       la carte doit se dimensionner sur son contenu, comme les deux rangées
       de classes et le classement à côté d'elle. */
    #titleScreen #loginPick{ flex:none }
  }
  @media (max-width: 560px){
    .ts-content{ gap:7px; padding:12px 10px }
    .ts-titlewrap{ padding:2px 22px 28px }
    .ts-sub{ font-size:.72rem; line-height:1.35; max-width:40ch }
    .ts-call{ font-size:.72rem; max-width:38ch }
    .ts-hero{ width:44px }
    .ts-hero-art{ width:31px; height:31px; font-size:1.05rem }
    .ts-hero span{ font-size:.52rem }
    .ts-ribbon{ right:-6px; bottom:15px; padding:4px 10px }
    #titleScreen .ts-auth{ padding:12px 12px 14px }
    #titleScreen .lp-new{ gap:6px }
  }
  /* Sur un écran court (portable 720p), c'est l'ACCROCHE qui saute la première :
     l'appel à descendre dit la même chose en plus vif, et les deux lignes
     gagnées vont à la liste des comptes. */
  @media (max-height: 780px){
    .ts-sub{ display:none }
  }
  /* Écran très bas (mobile en paysage) : on garde le décor et l'essentiel. */
  @media (max-height: 560px){
    .ts-sub{ display:none }
    .ts-call{ font-size:.74rem }
    .ts-hero span{ display:none }
    .ts-content{ gap:8px; padding:10px }
  }
  @media (max-height: 430px){
    .ts-roster{ display:none }
    .ts-title span:first-child{ font-size:1.4rem }
    .ts-title .ts-title-2{ font-size:1.8rem }
  }

  /* ---------- ENCART DU CLASSEMENT (2026-09-03, demande Pixel) ----------
     « Le classement doit avoir son encart dédié, pas dans la partie compte et
     connexion, avec en gros le premier, en moyen les deuxième et troisième, et
     petit les autres. » La hiérarchie de TAILLE est propre à cet écran : c'est
     ici qu'on vient rêver au sommet, alors qu'en fin de partie le même tableau
     doit rester compact. Le code couleur, lui, vaut partout (css/08). */
  .ts-lb{
    flex:0 1 300px; align-self:stretch;
    max-width:300px; min-width:210px;
    background:rgba(26,22,32,.94);
    border:1px solid var(--panel-edge);
    border-radius:12px;
    box-shadow:0 14px 40px rgba(0,0,0,.5);
    padding:12px 12px 8px;
    max-height:min(60vh, 470px);
    overflow-y:auto; overscroll-behavior:contain;
    scrollbar-width:thin; scrollbar-color:#4a3f66 transparent;
  }
  #titleScreen .ts-lb #lbBox{ margin-bottom:0 }
  #titleScreen .ts-lb .lb-head{
    font-size:.95rem; text-align:center; letter-spacing:.09em;
    text-transform:uppercase; margin-bottom:8px;
  }
  /* Le premier : deux fois plus grand que les suivants, médaille comprise. */
  #titleScreen .ts-lb .lb-r1{
    padding:11px 10px; margin-bottom:6px; border-left-width:4px;
    box-shadow:0 0 18px rgba(224,168,60,.18);
  }
  #titleScreen .ts-lb .lb-r1 .lb-rank{ font-size:1.5rem; width:32px }
  #titleScreen .ts-lb .lb-r1 .lb-name{ font-size:1.02rem; font-weight:700 }
  #titleScreen .ts-lb .lb-r1 .lb-score{ font-size:.92rem; font-weight:700 }
  /* Deuxième et troisième : le cran du milieu. */
  #titleScreen .ts-lb .lb-r2, #titleScreen .ts-lb .lb-r3{ padding:7px 9px }
  #titleScreen .ts-lb .lb-r2 .lb-rank, #titleScreen .ts-lb .lb-r3 .lb-rank{ font-size:1.15rem }
  #titleScreen .ts-lb .lb-r2 .lb-name, #titleScreen .ts-lb .lb-r3 .lb-name{ font-size:.9rem; font-weight:600 }
  #titleScreen .ts-lb .lb-r2 .lb-score, #titleScreen .ts-lb .lb-r3 .lb-score{ font-size:.8rem }
  /* Le reste : dense, on y lit surtout le nom et le score. */
  #titleScreen .ts-lb .lb-r45, #titleScreen .ts-lb .lb-rest{ padding:3px 8px; font-size:.74rem }
  #titleScreen .ts-lb .lb-r45 .lb-name, #titleScreen .ts-lb .lb-rest .lb-name{ font-size:.76rem }
  #titleScreen .ts-lb .lb-r45 .lb-score, #titleScreen .ts-lb .lb-rest .lb-score{ font-size:.7rem }
  #titleScreen .ts-lb .lb-r45 .lb-title, #titleScreen .ts-lb .lb-rest .lb-title{ display:none }
  #titleScreen .ts-lb .lb-filter{ margin-bottom:6px }
  #titleScreen .ts-lb .lb-filter-btn{ font-size:.68rem; padding:3px 4px }

  /* ---------- Bouton et fenêtre de crédits ----------
     SUR ORDINATEUR, LE BOUTON S'ANCRE EN BAS À DROITE (2026-09-03, demande
     Pixel) : il quitte le flux, ce qui rend sa hauteur à la carte de connexion,
     et il se range là où l'œil va chercher ce genre de lien. Sur mobile il
     reste dans le flux, sous la carte : un bouton flottant y recouvrirait le
     formulaire dès que le clavier remonte la page. */
  @media (min-width: 781px){
    #titleScreen .ts-credits-btn{
      position:fixed; right:16px; bottom:14px; z-index:3;
      background:rgba(26,22,32,.82);
      backdrop-filter:blur(2px);
    }
  }
  .ts-credits-btn{
    background:transparent; color:var(--ink-dim);
    border:1px solid var(--panel-edge); border-radius:8px;
    padding:4px 14px; font-size:.74rem; cursor:pointer;
  }
  .ts-credits-btn:hover{ color:var(--accent); border-color:var(--accent-dim); background:rgba(224,168,60,.06) }
  #creditsScreen{
    position:fixed; inset:0; display:none;
    align-items:center; justify-content:center;
    background:rgba(8,6,12,.86); z-index:130;
  }
  #creditsScreen.show{ display:flex }
  .ts-credits{
    background:var(--panel); border:1px solid var(--accent-dim); border-radius:12px;
    padding:20px 24px 16px; width:min(560px, calc(100vw - 24px));
    max-height:calc(100vh - 32px); overflow:auto;
    box-shadow:0 0 40px rgba(224,168,60,.14), 0 12px 40px rgba(0,0,0,.7);
    animation:pop .3s ease-out;
  }
  .ts-credits h2{ color:var(--accent); font-size:1.15rem; letter-spacing:.1em;
                  text-transform:uppercase; text-align:center; margin-bottom:4px }
  .ts-credits .cr-sub{ color:var(--ink-dim); font-size:.74rem; text-align:center; margin-bottom:14px }
  .ts-credits .cr-h3{ color:var(--accent); font-size:.85rem; letter-spacing:.06em;
                      text-transform:uppercase; margin:16px 0 8px; text-align:center }
  .cr-roles{ display:flex; flex-direction:column; gap:10px }
  .cr-role{
    background:#221c2e; border:1px solid #33294a; border-radius:9px; padding:9px 12px;
    display:flex; flex-direction:column; gap:3px;
  }
  .cr-role b{ color:var(--ink); font-size:.92rem }
  .cr-role span{ color:var(--ink-dim); font-size:.76rem; line-height:1.4 }
  .cr-stats{ display:flex; flex-direction:column; gap:4px }
  .cr-stat{
    display:flex; justify-content:space-between; gap:12px;
    padding:5px 10px; border-radius:6px; background:#1e1a2a;
    font-size:.76rem;
  }
  .cr-stat:nth-child(odd){ background:#221c2e }
  .cr-k{ color:var(--ink-dim); white-space:nowrap }
  .cr-v{ color:var(--ink); text-align:right }
  .cr-foot{ display:flex; justify-content:center; margin-top:14px }
  .cr-foot button{
    background:var(--accent-dim); color:#1a1424; border:none; border-radius:8px;
    padding:8px 18px; font-size:.84rem; font-weight:600; cursor:pointer;
  }
  .cr-foot button:hover{ background:var(--accent) }