/* ═══ SUPER REXTENDO : LA TÉLÉ DES ANNÉES 90 ET SA CONSOLE (11.10.2026, js/195-rextendo.js) ════════
   Une télé cathodique par-dessus le CRM : caisse en plastique noir, écran bombé aux coins arrondis,
   reflet sur la vitre, lignes de balayage, vignettage, lueur bleutée. Allumage animé (le point, puis
   la ligne qui s'ouvre), extinction inverse. Dans l'écran, le canvas de la console en pixels nets :
   démarrage SUPER Rextendo, menu des jeux, puis le jeu choisi (le Touché-Coulé, js/192).
   Le panneau a deux molettes (musique, bruitages) et deux touches : MENU (la liste des jeux) et POWER.
   Les animations ne jouent qu'en prefers-reduced-motion: no-preference, et jamais quand
   « Animations coupées » est choisi (body[data-animations="non"], js/107).
   Sous 768 px, la télé remplit l'écran et ses commandes passent en bande sous l'image.
   Chaque jeu peut habiller la télé sous .rxt-voile[data-jeu="…"] (css/99-touche-coule.css). */

.rxt-voile {
  --rxt-plastique: #2c2b31;
  --rxt-cadre: #0b0b0e;
  --rxt-led-on: #3dff72;
  --rxt-largeur: min(1080px, 96vw, calc((100dvh - 150px) * 1.212 + 184px));
  position: fixed;
  inset: 0;
  z-index: 10600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 58px 12px 18px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(40, 60, 120, .28), rgba(0, 0, 0, 0) 70%),
    radial-gradient(ellipse at 50% 40%, rgba(16, 20, 40, .86), rgba(3, 4, 10, .97) 72%);
  color: #f2f4ff;
  -webkit-tap-highlight-color: transparent;
}
.rxt-voile[hidden] { display: none; }
html.rxt-ouvert, html.rxt-ouvert body { overflow: hidden; }

.rxt-lecteur {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── La caisse ─────────────────────────────────────────────────────────────────────────────────── */
.rxt-tele { position: relative; width: var(--rxt-largeur); max-width: 100%; }
.rxt-caisse {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  gap: 14px;
  padding: 20px 18px 22px 20px;
  border-radius: 28px 28px 22px 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, 0) 16%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, .38)),
    linear-gradient(90deg, #36353c, var(--rxt-plastique) 48%, #222126);
  box-shadow:
    0 34px 70px rgba(0, 0, 0, .65), 0 0 0 2px #09090c,
    inset 0 2px 0 rgba(255, 255, 255, .13), inset 0 -4px 0 rgba(0, 0, 0, .45);
}
/* Le filet chromé sous l'écran. */
.rxt-caisse::after {
  content: '';
  position: absolute;
  left: 22px; right: 160px; bottom: 9px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #5a5a64, #d6d8e0 30%, #8a8c96 60%, #4a4a52);
  opacity: .7;
}
.rxt-cadre {
  min-width: 0;
  background: var(--rxt-cadre);
  border-radius: 24px;
  padding: 14px 14px 6px;
  box-shadow: inset 0 0 0 2px #000, inset 0 8px 16px rgba(0, 0, 0, .85), 0 1px 0 rgba(255, 255, 255, .08);
}

/* ── L'écran bombé ─────────────────────────────────────────────────────────────────────────────── */
.rxt-ecran {
  position: relative;
  aspect-ratio: 4 / 3.3;
  border-radius: 30px / 36px;
  overflow: hidden;
  background: #040406;
  box-shadow: 0 0 0 3px #19191e, 0 0 34px rgba(70, 140, 255, .22), inset 0 0 40px rgba(0, 0, 0, .9);
}
.rxt-contenu {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 12px;
  background: radial-gradient(ellipse at center, #0d1126 0%, #050508 78%);
  transform-origin: 50% 50%;
}
.rxt-zone {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.rxt-canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border-radius: 6px;
  outline: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.rxt-canvas:focus-visible { box-shadow: 0 0 0 2px #f8d838, 0 0 0 4px #080818; }

/* La vitre : reflet, lignes de balayage, vignettage. Par-dessus tout, sans capter la souris. */
.rxt-vitre {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 58% 34% at 27% 15%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 62%),
    radial-gradient(ellipse 40% 12% at 70% 94%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 70%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .2) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .55) 100%);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, .6), inset 0 0 8px rgba(0, 0, 0, .9);
}
.rxt-faisceau {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: #eaf6ff;
  box-shadow: 0 0 40px 10px #a8d8ff;
}
.rxt-osd {
  position: absolute;
  top: 22px;
  right: 30px;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(88, 255, 88, .7));
  transition: opacity .15s;
}
.rxt-osd.rxt-osd-visible { opacity: 1; }
.rxt-osd .rxt-px { margin: 0 !important; }

.rxt-marque {
  margin-top: 6px;
  text-align: center;
  font: 700 11px/1.2 ui-monospace, "Courier New", monospace;
  letter-spacing: .38em;
  color: #c9ccd6;
  text-shadow: 0 1px 0 #000;
}
.rxt-marque small { font-size: 8px; letter-spacing: .2em; color: #7a7d88; margin-left: 6px; }

/* ── Le panneau : afficheur, molettes, haut-parleur, touches MENU et POWER ──────────────────────── */
.rxt-panneau {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 14px 10px;
  border-radius: 16px;
  background: linear-gradient(180deg, #2a292f, #1d1c21);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.rxt-afficheur {
  min-width: 88px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #160404;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .06);
  color: #ff3b3b;
  font: 700 24px/1 ui-monospace, "Courier New", monospace;
  letter-spacing: 3px;
  text-align: center;
  text-shadow: 0 0 6px rgba(255, 40, 40, .9);
}
.rxt-afficheur span { font-size: 12px; letter-spacing: 1px; margin-right: 4px; vertical-align: 4px; }
.rxt-molettes { display: flex; gap: 16px; }
.rxt-molette {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: radial-gradient(circle at 34% 28%, #74747e, #34343a 55%, #17171a);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .6), inset 0 -2px 3px rgba(0, 0, 0, .6), 0 0 0 2px #0e0e11;
  color: #c9ccd6;
  cursor: pointer;
}
.rxt-molette i {
  position: absolute;
  left: 50%; top: 6px;
  width: 3px; height: 14px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: #e8e8f0;
  transform-origin: 50% 17px;
  /* De -135° (coupé) à +135° (à fond), angle posé par le script. */
  transform: rotate(var(--rxt-angle, -135deg));
  transition: transform .2s;
}
.rxt-molette > span {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font: 700 8px/1 ui-monospace, monospace;
  letter-spacing: .15em;
  color: #8d909c;
}
.rxt-vol:not([data-niveau="0"]) i { background: var(--rxt-led-on); box-shadow: 0 0 6px var(--rxt-led-on); }
.rxt-vol:hover { filter: brightness(1.15); }
.rxt-molette:focus-visible, .rxt-touche:focus-visible { outline: 2px dashed #f8d838; outline-offset: 3px; }
.rxt-haut-parleur {
  flex: 1;
  width: 74px;
  min-height: 60px;
  margin-top: 8px;
  border-radius: 10px;
  background: repeating-linear-gradient(0deg, #0b0b0d 0 3px, #2b2a30 3px 6px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7);
}
.rxt-touches { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.rxt-touche {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(180deg, #3d3c44, #222127);
  box-shadow: 0 3px 0 #0d0d10, inset 0 1px 0 rgba(255, 255, 255, .12);
  color: #c9ccd6;
  font: 700 10px/1 ui-monospace, monospace;
  letter-spacing: .14em;
  cursor: pointer;
}
.rxt-touche:hover { background: linear-gradient(180deg, #4a4952, #26252b); }
.rxt-touche:active { transform: translateY(2px); box-shadow: 0 1px 0 #0d0d10; }
.rxt-retour { color: #b8b0f0; }
.rxt-led { width: 9px; height: 9px; border-radius: 50%; background: #5a1010; box-shadow: inset 0 0 2px #000; }
.rxt-voile:not([hidden]) .rxt-led { background: var(--rxt-led-on); box-shadow: 0 0 8px var(--rxt-led-on); }
.rxt-voile.rxt-extinction .rxt-led { background: #ff3030; box-shadow: 0 0 8px #ff3030; }

/* ── L'antenne « oreilles de lapin » et les pieds ─────────────────────────────────────────────── */
.rxt-antenne { position: absolute; left: 50%; top: -52px; width: 170px; height: 56px; transform: translateX(-50%); pointer-events: none; }
.rxt-antenne b {
  position: absolute; left: 50%; bottom: 0; width: 64px; height: 20px; margin-left: -32px;
  border-radius: 32px 32px 4px 4px; background: linear-gradient(180deg, #4a4952, #1f1e23);
  box-shadow: 0 0 0 2px #09090c;
}
.rxt-antenne i {
  position: absolute; left: 50%; bottom: 14px; width: 3px; height: 52px; margin-left: -1.5px;
  border-radius: 2px; background: linear-gradient(90deg, #8c8e98, #e2e4ec, #7a7c86);
  transform-origin: 50% 100%;
}
.rxt-antenne i:first-child { transform: rotate(-38deg); }
.rxt-antenne i:nth-child(2) { transform: rotate(31deg); }
.rxt-antenne i::after { content: ''; position: absolute; top: -4px; left: -2px; width: 7px; height: 7px; border-radius: 50%; background: #d8dae2; }
.rxt-pieds { display: flex; justify-content: space-between; padding: 0 70px; height: 12px; }
.rxt-pieds i { width: 60px; height: 12px; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #1b1a1f, #0b0b0d); }

/* ── Le menu sous l'image : la fenêtre de la console (gris lavande, comme ses manettes) ────────── */
.rxt-menu {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 6px;
  max-width: 100%;
  min-height: 46px;
  padding: 4px 10px;
  border: 2px solid #d8d4f0;
  border-radius: 6px;
  background: linear-gradient(180deg, #4a4472, #221e3e);
  box-shadow: 0 0 0 2px #080818, inset 0 0 0 1px #8c86b8;
}
.rxt-menu:empty { visibility: hidden; }
.rxt-voile .rxt-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  min-width: 0;
  margin: 0;
  padding: 4px 8px 4px 18px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--rxt-btn, #f8f8f8);
  font: 700 13px/1 ui-monospace, "Courier New", monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
}
.rxt-voile .rxt-btn::before {
  content: '';
  position: absolute;
  left: 6px; top: 50%;
  width: 7px; height: 10px;
  margin-top: -5px;
  background: #f8f8f8;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  opacity: 0;
}
.rxt-voile .rxt-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .09); }
.rxt-voile .rxt-btn:hover::before, .rxt-voile .rxt-btn:focus-visible::before, .rxt-voile .rxt-btn[aria-pressed="true"]::before { opacity: 1; }
.rxt-voile .rxt-btn:focus-visible { outline: 2px dashed #f8d838; outline-offset: 1px; }
.rxt-voile .rxt-btn:disabled { opacity: .42; cursor: default; }
.rxt-voile .rxt-onglet[aria-pressed="true"] { background: rgba(0, 0, 0, .32); box-shadow: inset 0 -3px 0 var(--rxt-btn, #f8f8f8); }
.rxt-px { display: block; image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; }
.rxt-menu-question { display: inline-flex; align-items: center; padding: 0 6px; }

/* ── Le bouton télé, dans le pied du menu de gauche (js/119), et sa pastille ─────────────────── */
.sidebar .pmn-pied .rxt-bouton-tele {
  position: relative;
  width: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid rgba(255, 255, 255, .14) !important;
  color: #cfe0ff;
}
.sidebar .pmn-pied .rxt-bouton-tele:hover { background: rgba(0, 207, 255, .16); color: #fff; }
.rxt-bouton-tele .rxt-pastille {
  position: absolute;
  top: 6px; right: 6px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #ff4d5e;
  box-shadow: 0 0 0 2px #0f1d3d;
}
.rxt-bouton-tele .rxt-pastille[hidden] { display: none; }
.rxt-bouton-seul {
  display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 8px; padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; background: rgba(255, 255, 255, .05);
  color: #e2ecff; font: inherit; font-size: 12px; cursor: pointer; position: relative;
}

/* ── L'avertissement discret, télé éteinte ───────────────────────────────────────────────────── */
/* Juste au-dessus du pied du menu de gauche : il désigne le bouton télé sans le cacher. */
.rxt-toast {
  position: fixed;
  left: 12px;
  bottom: 74px;
  z-index: 10050;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(440px, calc(100vw - 32px));
  padding: 10px 10px 10px 14px;
  border: 2px solid #f8f8f8;
  border-radius: 10px;
  background: linear-gradient(180deg, #2a46c4, #142074);
  box-shadow: 0 0 0 2px #080818, 0 14px 30px rgba(0, 0, 0, .45);
  color: #f6f8ff;
  font-size: 13px;
  line-height: 1.35;
}
.rxt-toast-ico { font-size: 20px; line-height: 1; }
.rxt-toast-texte { flex: 1; min-width: 0; }
.rxt-toast-jouer {
  flex-shrink: 0;
  min-height: 34px;
  padding: 6px 14px;
  border: 0;
  border-radius: 8px;
  background: #f8d838;
  color: #10102c;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.rxt-toast-jouer:hover { background: #ffe768; }
.rxt-toast-fermer {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #c8d0f0;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.rxt-toast-fermer:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.rxt-toast button:focus-visible { outline: 2px dashed #f8d838; outline-offset: 2px; }

/* ── Petits écrans : la télé remplit l'écran, les commandes passent dessous ─────────────────── */
@media (max-width: 767px) {
  .rxt-voile { padding: 0; align-items: stretch; }
  .rxt-tele { width: 100%; height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
  .rxt-caisse {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: max(8px, env(safe-area-inset-top)) 8px 8px;
    border-radius: 0;
  }
  .rxt-caisse::after { display: none; }
  .rxt-cadre { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 7px 7px 4px; border-radius: 18px; }
  .rxt-ecran { flex: 1; min-height: 0; aspect-ratio: auto; border-radius: 20px / 24px; }
  .rxt-contenu { padding: 8px 6px; gap: 6px; }
  .rxt-marque { margin-top: 3px; font-size: 9px; }
  .rxt-marque small { display: none; }
  .rxt-panneau {
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .rxt-afficheur { min-width: 0; padding: 5px 8px; font-size: 18px; }
  .rxt-molettes { gap: 14px; }
  .rxt-molette { width: 38px; height: 38px; }
  .rxt-molette i { top: 4px; height: 12px; transform-origin: 50% 15px; }
  .rxt-molette > span { display: none; }
  .rxt-haut-parleur { width: auto; min-width: 0; min-height: 30px; height: 30px; margin-top: 0; }
  .rxt-touches { flex-direction: row; gap: 8px; }
  .rxt-touche { padding: 8px 10px; }
  .rxt-antenne, .rxt-pieds { display: none; }
  .rxt-osd { top: 14px; right: 18px; }
  .rxt-menu { padding: 3px 6px; gap: 0 2px; }
  .rxt-voile .rxt-btn { padding: 4px 6px 4px 15px; min-height: 40px; }
  .rxt-voile .rxt-btn::before { left: 4px; }
  .rxt-toast { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); max-width: none; }
}
@media (max-width: 380px) {
  .rxt-afficheur { display: none; }
}

/* ── Les animations, seulement si on les veut ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  body:not([data-animations="non"]) .rxt-voile.rxt-allumage { animation: rxt-voile-entre .25s ease-out both; }
  body:not([data-animations="non"]) .rxt-voile.rxt-allumage .rxt-tele { animation: rxt-tele-entre .32s cubic-bezier(.2, .9, .3, 1.15) both; }
  body:not([data-animations="non"]) .rxt-voile.rxt-allumage .rxt-faisceau { animation: rxt-faisceau-allume .95s .28s both; }
  body:not([data-animations="non"]) .rxt-voile.rxt-allumage .rxt-contenu { animation: rxt-contenu-allume .95s .28s both; }
  body:not([data-animations="non"]) .rxt-voile.rxt-extinction .rxt-contenu { animation: rxt-contenu-eteint .5s both; }
  body:not([data-animations="non"]) .rxt-voile.rxt-extinction .rxt-faisceau { animation: rxt-faisceau-eteint .56s both; }
  body:not([data-animations="non"]) .rxt-voile.rxt-extinction { animation: rxt-voile-sort .24s .48s both; }
  body:not([data-animations="non"]) .rxt-voile.rxt-sursaut .rxt-contenu { animation: rxt-sursaut .36s steps(4, end) both; }
  body:not([data-animations="non"]) .rxt-bouton-tele.rxt-a-jouer svg { animation: rxt-clignote 1.4s steps(2, jump-none) infinite; }
  body:not([data-animations="non"]) .rxt-toast { animation: rxt-toast-entre .3s cubic-bezier(.2, .9, .3, 1.2) both; }

  @keyframes rxt-voile-entre { from { opacity: 0; } to { opacity: 1; } }
  @keyframes rxt-voile-sort { from { opacity: 1; } to { opacity: 0; } }
  @keyframes rxt-tele-entre { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
  /* Le point lumineux au centre, puis la ligne qui s'ouvre, puis l'image. */
  @keyframes rxt-faisceau-allume {
    0% { opacity: 1; transform: scale(.012, .016); border-radius: 50%; }
    18% { opacity: 1; transform: scale(.014, .018); border-radius: 50%; }
    42% { opacity: 1; transform: scale(1, .012); border-radius: 0; }
    62% { opacity: .85; transform: scale(1, 1); }
    100% { opacity: 0; transform: scale(1, 1); }
  }
  @keyframes rxt-contenu-allume {
    0%, 42% { opacity: 0; transform: scale(1, .012); }
    62% { opacity: 1; transform: scale(1, 1); filter: brightness(2.2) saturate(.6); }
    100% { opacity: 1; transform: none; filter: none; }
  }
  /* L'inverse : l'image se tasse en ligne, la ligne en point, le point s'éteint. */
  @keyframes rxt-contenu-eteint {
    0% { opacity: 1; transform: none; filter: none; }
    45% { opacity: 1; transform: scale(1, .01); filter: brightness(3); }
    100% { opacity: 0; transform: scale(1, .01); }
  }
  @keyframes rxt-faisceau-eteint {
    0%, 40% { opacity: 0; transform: scale(1, .012); }
    45% { opacity: 1; transform: scale(1, .012); }
    78% { opacity: 1; transform: scale(.012, .014); border-radius: 50%; }
    100% { opacity: 0; transform: scale(.004, .006); border-radius: 50%; }
  }
  /* MENU : l'image saute et décroche une fraction de seconde, comme quand on change de chaîne. */
  @keyframes rxt-sursaut {
    0% { transform: translateY(0); filter: none; }
    25% { transform: translateY(-6px) skewX(4deg); filter: brightness(1.8) contrast(1.4); }
    50% { transform: translateY(4px) skewX(-3deg); filter: brightness(.7); }
    75% { transform: translateY(-2px); filter: brightness(1.3); }
    100% { transform: none; filter: none; }
  }
  @keyframes rxt-clignote { 50% { opacity: .35; } }
  @keyframes rxt-toast-entre { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}