/* =====================================================================
   Trame -- feuille de style
   Sombre par choix : on joue le soir, autour d'une table, et l'ecran du
   telephone passe de main en main.
   ===================================================================== */

:root{
  --nuit:#0d0b14;
  --nuit-2:#161327;
  --nuit-3:#1f1b35;
  --trait:#312b4d;
  --texte:#efeaf7;
  --texte-doux:#a79fc4;
  --or:#f0b429;
  --or-clair:#ffd469;
  --rose:#f0468a;
  --menthe:#31d0a5;
  --rouge:#ff5f56;
  --rayon:16px;
  --marge-bas:env(safe-area-inset-bottom, 0px);
  --marge-haut:env(safe-area-inset-top, 0px);
}

*{box-sizing:border-box}

/* ⚠️ Sans cette ligne, tout `display:` ecrit plus bas ANNULE l'attribut
   hidden : le menu et la revelation s'affichent par-dessus l'accueil des
   le chargement. Le code JavaScript, lui, a l'air parfaitement correct. */
[hidden]{display:none !important;}

html,body{
  margin:0; padding:0;
  height:100%;
  background:var(--nuit);
  color:var(--texte);
  font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,
              "Helvetica Neue",sans-serif;
  font-size:16px;
  -webkit-text-size-adjust:100%;
}
/* ⚠️ overflow-x:hidden casserait tout position:sticky de la page.
   clip coupe le debordement sans ce dommage. */
body{overflow-x:clip;}

body::before{                      /* halo chaud, comme une lampe de salon */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(60% 40% at 50% -5%, rgba(240,180,41,.16), transparent 70%),
    radial-gradient(50% 40% at 100% 100%, rgba(240,70,138,.12), transparent 70%);
}

/* ------------------------------------------------------------- ecrans */
.ecran{display:none; min-height:100dvh; position:relative; z-index:1;}
.ecran.actif{display:block;}

.enveloppe{
  max-width:560px; margin:0 auto;
  padding:calc(28px + var(--marge-haut)) 20px calc(28px + var(--marge-bas));
  display:flex; flex-direction:column; gap:14px;
  min-height:100dvh;
  /* ⚠️ `center` tout court est un piege des que le contenu depasse la
     hauteur de l'ecran : le bloc deborde des DEUX cotes, et le haut part
     en negatif -- ici a -675 px, avec le titre et le champ « Nom du
     joueur » devenus INATTEIGNABLES, meme en faisant defiler.
     `safe center` centre quand ca tient, et se range en haut sinon. */
  justify-content:center;
  justify-content:safe center;
}
.enveloppe.texte{justify-content:flex-start; text-align:left;}

h1{font-size:clamp(44px,13vw,68px); margin:6px 0 0; letter-spacing:-.03em;
   font-weight:800; line-height:1;}
h2{font-size:26px; margin:0 0 4px; letter-spacing:-.01em;}
h3{font-size:15px; margin:14px 0 6px; color:var(--texte-doux);
   text-transform:uppercase; letter-spacing:.09em; font-weight:700;}
p{line-height:1.55; margin:8px 0;}
.sous{color:var(--texte-doux); margin:2px 0 0; font-size:16px;}
.pied{color:var(--texte-doux); font-size:13px; text-align:center; margin-top:18px;}
.mini{font-size:13px; color:var(--texte-doux);}

.logo{text-align:center; margin-bottom:18px;}

/* ------------------------------------------------------- le disque */
.disque{
  width:112px; height:112px; margin:0 auto 12px; border-radius:50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      #16121f 0 2px, #221c31 2px 4px);
  box-shadow:0 14px 34px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.06);
  display:grid; place-items:center; position:relative;
}
.disque::after{
  content:""; position:absolute; inset:26px; border-radius:50%;
  background:linear-gradient(135deg,var(--or),var(--rose));
}
.disque .trou{
  width:12px; height:12px; border-radius:50%; background:var(--nuit);
  position:relative; z-index:2;
}

/* ------------------------------------------------------------ boutons */
.bouton{
  appearance:none; border:1px solid var(--trait); background:var(--nuit-3);
  color:var(--texte); font:inherit; font-weight:600;
  padding:15px 18px; border-radius:var(--rayon); cursor:pointer;
  min-height:52px; width:100%; text-align:center;
  transition:transform .08s ease, background .15s ease, border-color .15s ease;
}
.bouton:active{transform:scale(.985);}
a.bouton{text-decoration:none; display:flex; align-items:center;
         justify-content:center;}
.bouton.vedette{
  background:linear-gradient(135deg,var(--or),#e08b1f);
  border-color:transparent; color:#241a05; font-weight:800; font-size:17px;
  box-shadow:0 8px 22px rgba(240,180,41,.24);
}
.bouton.discret{background:transparent; border-color:transparent;
                color:var(--texte-doux);}
.bouton.danger{border-color:rgba(255,95,86,.4); color:var(--rouge);
               background:rgba(255,95,86,.08);}
.bouton.petit{width:auto; min-height:46px; padding:11px 16px;}
.bouton[disabled]{opacity:.45; cursor:not-allowed;}
@media (hover:hover){                     /* pas de survol collant sur iPhone */
  .bouton:hover{background:var(--trait);}
  .bouton.vedette:hover{filter:brightness(1.06); background:linear-gradient(135deg,var(--or-clair),var(--or));}
}

.champ{
  width:100%; padding:14px 15px; border-radius:var(--rayon);
  border:1px solid var(--trait); background:var(--nuit-2); color:var(--texte);
  font:inherit; min-height:52px;
}
.champ:focus{outline:2px solid var(--or); outline-offset:1px;}

/* ------------------------------------------------------------ joueurs */
.liste-joueurs{list-style:none; margin:6px 0; padding:0;
               display:flex; flex-direction:column; gap:8px;}
.liste-joueurs li{
  display:flex; align-items:center; gap:10px;
  background:var(--nuit-2); border:1px solid var(--trait);
  border-radius:var(--rayon); padding:12px 14px;
}
.liste-joueurs .nom{flex:1; font-weight:600; min-width:0;
                    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.liste-joueurs .retirer{
  background:none; border:none; color:var(--texte-doux); font-size:22px;
  cursor:pointer; padding:0 6px; line-height:1; min-width:40px; min-height:40px;
}
.ajout{display:flex; gap:8px;}
.ajout .champ{flex:1; min-width:0;}

.choix{display:flex; gap:8px;}
.pastille{
  flex:1; padding:12px 6px; border-radius:var(--rayon);
  border:1px solid var(--trait); background:var(--nuit-2); color:var(--texte);
  font:inherit; font-weight:700; font-size:19px; cursor:pointer; min-height:60px;
}
.pastille small{display:block; font-size:11px; font-weight:600;
                color:var(--texte-doux); text-transform:uppercase;
                letter-spacing:.06em; margin-top:2px;}
.pastille.actif{border-color:var(--or); background:rgba(240,180,41,.13);
                color:var(--or-clair);}

/* -------------------------------------------------------------- table */
#ecran-table.actif{display:flex; flex-direction:column; height:100dvh;}

.barre{
  display:flex; align-items:center; gap:10px;
  padding:calc(10px + var(--marge-haut)) 14px 10px;
  border-bottom:1px solid var(--trait); background:rgba(13,11,20,.9);
  backdrop-filter:blur(8px); position:sticky; top:0; z-index:5;
}
.qui{flex:1; min-width:0;}
.pastille-tour{font-weight:800; font-size:18px; display:block;
               overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.jetons{display:flex; gap:3px; align-items:center;}
.jeton{width:16px; height:16px; border-radius:50%;
       background:linear-gradient(135deg,var(--or-clair),#c98a12);
       box-shadow:0 1px 3px rgba(0,0,0,.5);}
.icone{background:none; border:none; color:var(--texte-doux); font-size:22px;
       cursor:pointer; min-width:44px; min-height:44px;}

.scene{flex:1; overflow-y:auto; overflow-x:clip;
       padding:16px 0 calc(20px + var(--marge-bas));
       display:flex; flex-direction:column; gap:18px;}

/* ------------------------------------------------------------ lecteur */
.lecteur{text-align:center; padding:0 18px;}
.platine{
  background:none; border:none; cursor:pointer; padding:0;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  width:100%; color:inherit; font:inherit;
}
.galette{
  width:min(52vw,190px); aspect-ratio:1; border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,
      #16121f 0 3px, #241d35 3px 6px);
  box-shadow:0 16px 40px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.06);
  display:grid; place-items:center; position:relative;
}
.galette::after{
  content:""; position:absolute; inset:32%; border-radius:50%;
  background:linear-gradient(135deg,var(--or),var(--rose));
  transition:filter .3s ease;
}
.galette .trou{width:11px; height:11px; border-radius:50%;
               background:var(--nuit); position:relative; z-index:2;}
.galette.tourne{animation:tourner 3.2s linear infinite;}
.galette.tourne::after{filter:saturate(1.5) brightness(1.15);}
@keyframes tourner{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .galette.tourne{animation-duration:0s;}
}
.etiquette-bouton{font-weight:700; font-size:18px;}

.minuterie{height:5px; background:var(--nuit-3); border-radius:99px;
           margin:12px auto 0; max-width:280px; overflow:hidden;}
.jauge{height:100%; width:0; border-radius:99px;
       background:linear-gradient(90deg,var(--or),var(--rose));}
.indice{color:var(--texte-doux); font-size:14px; margin-top:10px;}
.indice b{color:var(--texte);}

/* -------------------------------------------------------------- paris */
.paris{margin:0 18px; padding:14px; border:1px solid var(--trait);
       border-radius:var(--rayon); background:var(--nuit-2);}
.titre-bloc{margin:0 0 8px; font-size:14px; font-weight:700;
            color:var(--texte-doux); text-transform:uppercase;
            letter-spacing:.07em;}
.titre-bloc small{display:block; text-transform:none; letter-spacing:0;
                  font-weight:500; font-size:12px; margin-top:3px; opacity:.85;}
.case{display:flex; align-items:center; gap:10px; padding:9px 0;
      cursor:pointer; font-size:15px;}
.case input{width:22px; height:22px; accent-color:var(--or);}

/* -------------------------------------------------------------- frise */
.bloc-frise{padding:0 18px;}
.frise{
  display:flex; align-items:stretch; gap:0;
  overflow-x:auto; overflow-y:hidden;
  padding:6px 2px 14px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.frise::-webkit-scrollbar{height:6px;}
.frise::-webkit-scrollbar-thumb{background:var(--trait); border-radius:99px;}

.carte{
  flex:0 0 auto; width:104px; scroll-snap-align:center;
  background:var(--nuit-2); border:1px solid var(--trait);
  border-radius:12px; padding:8px; text-align:center;
  display:flex; flex-direction:column; gap:5px;
}
.carte img{width:100%; aspect-ratio:1; border-radius:7px; object-fit:cover;
           background:var(--nuit-3); display:block;}
.carte .an{font-size:21px; font-weight:800; color:var(--or-clair);
           letter-spacing:-.02em; line-height:1;}
.carte .ti{font-size:11px; line-height:1.25; color:var(--texte);
           overflow:hidden; display:-webkit-box; -webkit-line-clamp:2;
           -webkit-box-orient:vertical;}
.carte.neuve{animation:apparait .35s ease;}
@keyframes apparait{from{transform:scale(.85); opacity:0} to{transform:none; opacity:1}}

.trou-frise{
  flex:0 0 auto; width:52px; align-self:stretch;
  display:grid; place-items:center;
  background:none; border:none; cursor:pointer; padding:0;
  min-height:120px;
}
.trou-frise .plus{
  width:38px; height:38px; border-radius:50%;
  border:2px dashed var(--trait); color:var(--texte-doux);
  display:grid; place-items:center; font-size:21px; font-weight:700;
  transition:all .15s ease; background:var(--nuit-2);
}
.trou-frise:active .plus,
.trou-frise.vise .plus{border-color:var(--or); border-style:solid;
                       color:#241a05; background:var(--or); transform:scale(1.12);}
@media (hover:hover){
  .trou-frise:hover .plus{border-color:var(--or); color:var(--or);}
}
.aide-frise{font-size:13px; color:var(--texte-doux); text-align:center; margin:0;}

/* --------------------------------------------------------- revelation */
.voile{
  position:fixed; inset:0; z-index:50;
  background:rgba(8,6,14,.86); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  overflow-y:auto;
}
.carte-revelee{
  background:var(--nuit-2); border:1px solid var(--trait);
  border-radius:22px; padding:24px 20px calc(20px + var(--marge-bas));
  max-width:400px; width:100%; text-align:center;
  display:flex; flex-direction:column; gap:10px;
  animation:monte .3s cubic-bezier(.2,.9,.3,1.1);
  margin:auto;
}
@keyframes monte{from{transform:translateY(18px) scale(.96); opacity:0}
                 to{transform:none; opacity:1}}
.verdict{font-size:20px; font-weight:800; letter-spacing:-.01em;}
.verdict.oui{color:var(--menthe);}
.verdict.non{color:var(--rouge);}
.pochette{width:180px; height:180px; border-radius:14px; object-fit:cover;
          margin:2px auto; background:var(--nuit-3); display:block;
          box-shadow:0 12px 30px rgba(0,0,0,.5);}
.annee-geante{font-size:clamp(54px,17vw,78px); font-weight:800; line-height:1;
              letter-spacing:-.035em;
              background:linear-gradient(135deg,var(--or-clair),var(--rose));
              -webkit-background-clip:text; background-clip:text;
              -webkit-text-fill-color:transparent;}
.revele-titre{font-size:19px; font-weight:700; line-height:1.25;}
.revele-artiste{color:var(--texte-doux); margin-bottom:6px;}
.verif-paris{border-top:1px solid var(--trait); padding-top:12px; text-align:left;}
.verif-paris .case{justify-content:flex-start;}

/* les frises des autres joueurs, en petit */
.autres{display:flex; flex-direction:column; gap:10px; padding-bottom:4px;}
.autre{background:var(--nuit-2); border:1px solid var(--trait);
       border-radius:14px; padding:10px 12px;}
.autre.actif{border-color:var(--or); background:rgba(240,180,41,.07);}
.autre-tete{display:flex; align-items:center; gap:8px; margin-bottom:7px;}
.autre-tete .n{flex:1; font-weight:700; min-width:0; overflow:hidden;
               text-overflow:ellipsis; white-space:nowrap;}
.autre-tete .c{color:var(--or-clair); font-weight:800; font-size:14px;}
.autre-tete .jetons .jeton{width:11px; height:11px;}
.mini-frise{display:flex; gap:3px; overflow-x:auto; padding-bottom:3px;}
.mini-carte{flex:0 0 auto; min-width:42px; padding:5px 6px; border-radius:8px;
            background:var(--nuit-3); font-size:13px; font-weight:700;
            color:var(--texte-doux); text-align:center;}
.autre.parti .autre-tete .n{text-decoration:line-through; opacity:.6;}

/* ------------------------------------------------------- les thèmes */
.choix-themes{display:flex; flex-direction:column; gap:7px; margin:2px 0 4px;}
.theme{
  display:flex; align-items:center; gap:10px; text-align:left;
  padding:11px 14px; border-radius:var(--rayon); cursor:pointer;
  border:1px solid var(--trait); background:var(--nuit-2); color:var(--texte);
  font:inherit; min-height:52px; width:100%;
}
.theme .nom{flex:1; min-width:0; font-weight:700; line-height:1.25;}
.theme .dit{display:block; font-size:12.5px; font-weight:500;
            color:var(--texte-doux); margin-top:2px;}
.theme .combien{flex:0 0 auto; font-weight:800; color:var(--or-clair);
                font-size:15px;}
.theme.actif{border-color:var(--or); background:rgba(240,180,41,.12);}
.theme.actif .combien{color:var(--or);}
.theme[disabled]{opacity:.4; cursor:not-allowed;}
.theme[disabled] .combien{color:var(--rouge);}
@media (hover:hover){
  .theme:hover:not([disabled]){border-color:var(--or);}
}

/* --------------------------------------------------- la contestation */
.carte-revelee.large{max-width:520px;}
.verdict.rose{color:var(--rose);}
.choix-noms{display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 10px;}
.choix-noms button{
  flex:1 1 auto; min-width:120px; padding:13px 14px; min-height:52px;
  border-radius:var(--rayon); border:1px solid var(--trait);
  background:var(--nuit-3); color:var(--texte); font:inherit; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  gap:8px;
}
.choix-noms button:active{transform:scale(.985);}
@media (hover:hover){.choix-noms button:hover{border-color:var(--rose);}}
.choix-noms .jetons{display:inline-flex; gap:3px;}
.choix-noms .jeton{width:11px; height:11px;}

#frise-contest{justify-content:flex-start; margin:6px 0 2px;}
#frise-contest .trou-frise.choisi{cursor:default;}
#frise-contest .trou-frise.choisi .plus{
  border-style:solid; border-color:var(--or); background:var(--or);
  color:#241a05; width:auto; padding:0 9px; font-size:15px; border-radius:99px;
}
#frise-contest .trou-frise:not(.choisi) .plus{border-color:rgba(240,70,138,.6);
                                              color:var(--rose);}

.mot-contest{
  border-top:1px solid var(--trait); padding-top:12px; margin-top:2px;
  font-size:14.5px; color:var(--texte-doux); line-height:1.5; text-align:left;
}
.mot-contest b{color:var(--texte);}
.mot-contest .gagne{color:var(--menthe); font-weight:700;}
.mot-contest .perdu{color:var(--rouge); font-weight:700;}

.menu{background:var(--nuit-2); border:1px solid var(--trait);
      border-radius:22px; padding:22px 18px calc(18px + var(--marge-bas));
      max-width:380px; width:100%; display:flex; flex-direction:column; gap:10px;}

#ecran-victoire .enveloppe{text-align:center;}
#ecran-victoire h2{margin-top:4px;}
.trophee{font-size:64px; text-align:center;}
.tableau-final{display:flex; flex-direction:column; gap:6px; margin:12px 0;}
.rang{display:flex; gap:10px; align-items:center; padding:11px 14px;
      background:var(--nuit-2); border:1px solid var(--trait);
      border-radius:12px;}
.rang .n{flex:1; font-weight:600; min-width:0; overflow:hidden;
         text-overflow:ellipsis; white-space:nowrap;}
.rang .c{color:var(--or-clair); font-weight:800;}
.rang.premier{border-color:var(--or); background:rgba(240,180,41,.1);}

/* --------------------------------------------------------- la rotule */
.rotule{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(22px + var(--marge-bas)); z-index:80;
  background:var(--nuit-3); border:1px solid var(--trait);
  color:var(--texte); padding:12px 18px; border-radius:99px;
  font-size:14px; max-width:88vw; text-align:center;
  box-shadow:0 10px 26px rgba(0,0,0,.5);
}

ol{padding-left:20px;} ol li{margin:8px 0; line-height:1.5;}

@media (min-width:700px){
  .scene{flex-direction:row; flex-wrap:wrap; align-items:flex-start;
         padding:24px 8px;}
  .lecteur{flex:1 1 280px;}
  .bloc-frise{flex:1 1 100%;}
  .paris{flex:1 1 240px; margin:0 18px;}
}