/* ════════════════════════════════════════════════════════════════════════
   LE GRAND ÉCRAN EST EN TRAVAUX — SAISON 2 UNIQUEMENT
   ------------------------------------------------------------------------
   Décision d'Edwin, 29/09 : « pour la saison 2 on ne touche pas au grand
   écran, on le met en maintenance ; si des gens veulent jouer qu'ils passent
   sur mobile ou sur petit écran, le temps de régler — pas le choix ».

   POURQUOI. Les 132 maquettes de la saison 2 ont toutes été dessinées en
   390×844. Le rail de navigation et le panneau latéral viennent du chantier
   web/PC, qui est gelé : les deux mondes ne s'étaient jamais rencontrés. Sur
   grand écran, la colonne de contenu d'un écran saison 2 s'écrase à 12 px et
   tout passe sous un `overflow:hidden` — l'écran paraît vide.

   ⚠ CE FICHIER N'EST CHARGÉ QUE PAR `public/index.html`, donc uniquement dans
     l'aperçu saison 2. Les joueurs, servis depuis `public-v1/`, gardent leur
     interface desktop, qui fonctionne parfaitement.
   ════════════════════════════════════════════════════════════════════════ */

#s2-desk-pause { display: none; }

@media (min-width: 1024px) {
  /* on masque l'app plutôt que de la démonter : rien n'est perdu, et réduire
     la fenêtre la fait réapparaître aussitôt.
     ⚠ EXCEPTION : l'ACCUEIL est traité pour le grand écran (dashboard
        web-clash, cf. web-accueil.css). Quand il est actif, `body.web-home`
        est posé par app.js › show() et le mur se retire — le filet reste pour
        TOUS les autres écrans, pas encore refaits en grand. */
  body:not(.web-home):not(.web-defis):not(.web-top):not(.web-reglages):not(.web-stats):not(.web-sub):not(.web-col):not(.web-own) > *:not(#s2-desk-pause) { display: none !important; }

  body:not(.web-home):not(.web-defis):not(.web-top):not(.web-reglages):not(.web-stats):not(.web-sub):not(.web-col):not(.web-own) #s2-desk-pause {
    display: flex; position: fixed; inset: 0; z-index: 2147483000;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 22px; padding: 40px 24px; text-align: center;
    background: var(--paper, #FFFEF7); color: var(--ink, #0A0A0A);
    background-image: radial-gradient(rgba(10, 10, 10, .07) 1.6px, transparent 1.7px);
    background-size: 13px 13px;
  }
  #s2-desk-pause .sp-logo {
    font-family: 'Anton', sans-serif; font-size: 34px; letter-spacing: 2px;
    background: #FF2E93; color: #FFFEF7; padding: 10px 22px;
    border: 4px solid #0A0A0A; box-shadow: 7px 7px 0 #0A0A0A;
    transform: rotate(-2deg);
  }
  #s2-desk-pause .sp-em { width: 92px; height: 92px; }
  #s2-desk-pause .sp-t {
    font-family: 'Anton', sans-serif; font-size: 30px; line-height: 1.05;
    letter-spacing: .5px; max-width: 16ch;
  }
  #s2-desk-pause .sp-d {
    font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 15px;
    line-height: 1.5; max-width: 46ch; opacity: .74;
  }
  #s2-desk-pause .sp-how {
    display: flex; flex-direction: column; gap: 9px; align-items: stretch;
    background: var(--yellow, #FFD600); color: #0A0A0A; padding: 15px 20px;
    border: 4px solid #0A0A0A; box-shadow: 6px 6px 0 #0A0A0A; max-width: 420px;
  }
  #s2-desk-pause .sp-how b {
    font-family: 'Anton', sans-serif; font-size: 15px; letter-spacing: 1.2px;
  }
  #s2-desk-pause .sp-how span {
    font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 13px; line-height: 1.45;
  }
}

/* NÉON et ABÎME : l'écran suit la peau, et l'aplat jaune garde son encre noire */
@media (min-width: 1024px) {
  html[data-theme="abime"] #s2-desk-pause { background-color: #0F0F0F; color: #FBFBFB; }
  html[data-skin="neon"][data-theme] #s2-desk-pause { background-color: #1C0F1A; color: #FFFEF7; }
  html[data-skin="neon"][data-theme] #s2-desk-pause .sp-logo { box-shadow: 7px 7px 0 #FFD600; }
  html[data-skin="neon"][data-theme] #s2-desk-pause .sp-how { box-shadow: 6px 6px 0 #FF2E93; }
}