/* ==========================================================
   PlayTab Big Picture — thème original : noir, vert, focus net
   ========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=JetBrains+Mono:wght@500;600&display=swap");

:root.ptbp-mode {
  color-scheme: dark;

  --bg: #090b0a;
  --bg-raise: #0f1311;
  --card: #141a17;
  --card-2: #1b221e;
  --line: #222b26;
  --line-2: #2c3832;
  --fg: #ecf2ee;
  --fg-2: #c9d2cd;
  --muted: #98a39d;
  --dim: #69746e;
  --accent: #34e27f;
  --acc-rgb: 52, 226, 127;
  --accent-hover: #6ff0a6;
  --accent-ink: #02150a;
  --danger: #ff8270;
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --t: .22s;
  --ptbp-viewport-height: 100dvh;

  background: var(--bg) !important;
}

/* Base */

html.ptbp-mode {
  min-height: 100% !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: var(--bg) !important;
  color: var(--fg) !important;
  color-scheme: dark !important;
}

html.ptbp-mode body {
  min-height: 100vh !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  background:
    radial-gradient(
      1200px 700px at 85% -10%,
      rgba(var(--acc-rgb), .07),
      transparent 60%
    ),
    radial-gradient(
      900px 600px at -10% 110%,
      rgba(var(--acc-rgb), .05),
      transparent 60%
    ),
    var(--bg) !important;
  color: var(--fg) !important;
  font-family: var(--body) !important;
  -webkit-font-smoothing: antialiased;
}

html.ptbp-mode *,
html.ptbp-mode *::before,
html.ptbp-mode *::after {
  box-sizing: border-box;
}

html.ptbp-mode h1,
html.ptbp-mode h2,
html.ptbp-mode h3 {
  color: var(--fg) !important;
  font-family: var(--display) !important;
  font-stretch: 115%;
}

html.ptbp-mode a {
  color: var(--accent) !important;
}

html.ptbp-mode a:hover {
  color: var(--accent-hover) !important;
}

html.ptbp-mode button,
html.ptbp-mode input,
html.ptbp-mode select,
html.ptbp-mode textarea {
  font-family: var(--body) !important;
}

html.ptbp-mode button {
  cursor: pointer;
}

/* ==========================================================
   1. SUPPRIMER LE HEADER ENTIER DU SITE DE JEU
   Le logo, le sélecteur de langue et « clavier et contrôleur »
   ========================================================== */

html.ptbp-mode body > header,
html.ptbp-mode body > .site-header,
html.ptbp-mode body > nav.site-header,
html.ptbp-mode body > .header,
html.ptbp-mode body > .site-header-wrapper,
html.ptbp-mode body > header .brand,
html.ptbp-mode body > header .header-tools,
html.ptbp-mode body > header .header-note,
html.ptbp-mode body > header .language-picker {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Certains sites ont un header imbriqué dans un wrapper. */
html.ptbp-mode .header-tools,
html.ptbp-mode .header-note,
html.ptbp-mode .brand,
html.ptbp-mode .brand-logo,
html.ptbp-mode .language-picker {
  display: none !important;
}

/* ==========================================================
   2. SUPPRIMER « PLUS DE JEUX » ET LES BLOCS SIMILAIRES
   ========================================================== */

html.ptbp-mode .promo-card,
html.ptbp-mode .promo-card-catalog,
html.ptbp-mode section[aria-labelledby="promo-title"],
html.ptbp-mode #promo-title,
html.ptbp-mode .promo-kicker,
html.ptbp-mode .promo-copy,
html.ptbp-mode .promo-button,
html.ptbp-mode .leaderboard-rail,
html.ptbp-mode .leaderboard,
html.ptbp-mode #leaderboard-title,
html.ptbp-mode #leaderboard-status,
html.ptbp-mode #leaderboard-rows,
html.ptbp-mode #leaderboard-daily,
html.ptbp-mode #leaderboard-weekly,
html.ptbp-mode aside[aria-label*="Clasificación"],
html.ptbp-mode aside[aria-label*="classement" i],
html.ptbp-mode aside[aria-label*="leaderboard" i],
html.ptbp-mode aside[aria-label*="support" i],
html.ptbp-mode .seo-about {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* ==========================================================
   3. LAYOUT BIG PICTURE : lecteur prioritaire
   ========================================================== */

html.ptbp-mode .layout {
  display: grid !important;
  grid-template-columns:
    minmax(0, 2.5fr)
    minmax(280px, .72fr) !important;
  align-items: start !important;
  gap: clamp(12px, 1.3vw, 22px) !important;
  width: 100% !important;
  max-width: 2560px !important;
  margin: 0 auto !important;
  padding: clamp(10px, 1.3vw, 24px) !important;
  box-sizing: border-box !important;
}

html.ptbp-mode .player-column,
html.ptbp-mode .sidebar-column {
  min-width: 0 !important;
}

html.ptbp-mode .player-column {
  grid-column: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 0 !important;
}

html.ptbp-mode .sidebar-column {
  grid-column: 2 !important;
  position: sticky !important;
  top: 10px !important;
  max-height: calc(100dvh - 20px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* ==========================================================
   4. BARRE DU HAUT : statut à gauche, boutons à droite
   ========================================================== */

html.ptbp-mode #ptbp-player-header {
  position: relative !important;
  z-index: 30 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  gap: 16px !important;

  margin: 0 !important;
  padding: 4px 4px 10px !important;

  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;
}

html.ptbp-mode .ptbp-player-header-left {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

html.ptbp-mode .ptbp-player-header-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

/* Statut / FPS */

html.ptbp-mode #ptbp-player-header .player-status {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 8px 16px !important;

  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;
  color: var(--fg-2) !important;

  font: 500 11px var(--mono) !important;
  box-shadow: none !important;
}

html.ptbp-mode #ptbp-player-header #status {
  color: var(--fg-2) !important;
}

html.ptbp-mode #ptbp-player-header #fps {
  color: var(--muted) !important;
  white-space: nowrap !important;
}

/* Barre des boutons */

html.ptbp-mode #ptbp-player-header .player-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;

  width: auto !important;
  min-width: 0 !important;
  gap: 8px !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Cacher uniquement le bouton de diagnostic. */
html.ptbp-mode #diagnostics {
  display: none !important;
}

/* ==========================================================
   5. BOUTONS : apparence de .bp-btn du vrai Big Picture
   ========================================================== */

html.ptbp-mode #ptbp-player-header .player-actions button,
html.ptbp-mode #ptbp-player-header .player-actions .button {
  -webkit-appearance: none !important;
  appearance: none !important;

  position: relative !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row !important;
  gap: 9px !important;

  width: auto !important;
  min-width: 112px !important;
  max-width: none !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;

  margin: 0 !important;
  padding: 0 18px !important;

  border: 1px solid rgba(236, 242, 238, .22) !important;
  border-radius: 8px !important;

  background: rgba(9, 11, 10, .72) !important;
  color: var(--fg-2) !important;

  font: 650 13px/1 var(--body) !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  backdrop-filter: blur(8px) !important;
  box-shadow: none !important;
  text-shadow: none !important;

  transform: none !important;

  transition:
    transform var(--t) var(--spring),
    box-shadow var(--t),
    background var(--t),
    color var(--t),
    border-color var(--t) !important;
}

/* Plein écran = bouton primaire vert, comme .bp-btn.is-primary. */
html.ptbp-mode #ptbp-player-header .player-actions #fullscreen {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-ink) !important;
  font-weight: 850 !important;
}

/* Contrôles et Redémarrer gardent le style neutre de Big Picture. */
html.ptbp-mode #ptbp-player-header .player-actions #controls-button,
html.ptbp-mode #ptbp-player-header .player-actions #reload {
  background: rgba(9, 11, 10, .72) !important;
  border-color: rgba(236, 242, 238, .22) !important;
  color: var(--fg-2) !important;
  font-weight: 650 !important;
}

/* Icônes */
html.ptbp-mode #ptbp-player-header #fullscreen::before {
  content: "⛶";
  display: inline-block;
  font: 700 19px/1 var(--body);
}

html.ptbp-mode #ptbp-player-header #controls-button::before {
  content: "☷";
  display: inline-block;
  font: 700 18px/1 var(--body);
}

html.ptbp-mode #ptbp-player-header #reload::before {
  content: "↻";
  display: inline-block;
  font: 700 20px/1 var(--body);
}

html.ptbp-mode #ptbp-player-header .player-actions #fullscreen:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  color: var(--accent-ink) !important;
  transform: scale(1.035) !important;
}

html.ptbp-mode #ptbp-player-header .player-actions #controls-button:hover,
html.ptbp-mode #ptbp-player-header .player-actions #reload:hover {
  background: var(--fg) !important;
  border-color: var(--fg) !important;
  color: var(--bg) !important;
  transform: scale(1.035) !important;
}

/* ==========================================================
   6. LECTEUR AGRANDI
   ========================================================== */

html.ptbp-mode .screen {
  position: relative !important;
  isolation: isolate !important;

  display: block !important;
  width: 100% !important;
  height: min(82dvh, 1150px) !important;
  min-height: 580px !important;
  max-height: none !important;
  aspect-ratio: auto !important;

  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;

  background: #000 !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 13px !important;

  box-shadow:
    0 0 0 1px rgba(var(--acc-rgb), .08),
    0 24px 60px rgba(0, 0, 0, .5) !important;
}

html.ptbp-mode #game-frame {
  position: absolute !important;
  inset: 0 !important;

  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  background: #000 !important;
}

/* Panneau de lancement */

html.ptbp-mode #start-panel {
  z-index: 10 !important;
  border-radius: inherit !important;

  color: var(--fg) !important;

  background:
    radial-gradient(
      800px 400px at 50% 0%,
      rgba(var(--acc-rgb), .1),
      transparent 70%
    ),
    rgba(9, 11, 10, .96) !important;
}

html.ptbp-mode #start-panel h1 {
  color: var(--fg) !important;
  font-weight: 850 !important;
}

html.ptbp-mode #start-panel p,
html.ptbp-mode #start-panel small {
  color: var(--muted) !important;
}

html.ptbp-mode #start-panel button {
  min-height: 45px !important;
  height: auto !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 750 !important;
}

html.ptbp-mode #start-panel #solo {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-ink) !important;
}

/* ==========================================================
   7. PANNEAU DE DROITE : véritable palette Big Picture
   ========================================================== */

html.ptbp-mode .settings-panel {
  padding: 10px !important;

  background: rgba(15, 19, 17, .96) !important;
  border: 1px solid var(--line) !important;
  border-radius: 15px !important;

  box-shadow: 0 20px 50px rgba(0, 0, 0, .3) !important;
  backdrop-filter: blur(10px);
}

html.ptbp-mode .tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 4px !important;

  margin: 0 0 10px !important;
  padding: 4px !important;

  background: var(--bg) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 10px !important;
}

html.ptbp-mode .tabs button,
html.ptbp-mode .chat-modes button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 39px !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 7px 6px !important;

  border: 1px solid transparent !important;
  border-radius: 7px !important;

  background: transparent !important;
  color: var(--muted) !important;

  font: 700 12px/1.25 var(--body) !important;
  text-align: center !important;
  letter-spacing: 0 !important;

  transition:
    background var(--t),
    color var(--t),
    transform var(--t) var(--spring),
    box-shadow var(--t) !important;
}

html.ptbp-mode .tabs button:hover,
html.ptbp-mode .chat-modes button:hover {
  background: var(--card-2) !important;
  color: var(--fg) !important;
}

html.ptbp-mode .tabs button[aria-selected="true"],
html.ptbp-mode .tabs button.active,
html.ptbp-mode .chat-modes button[aria-selected="true"] {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-color: var(--accent) !important;
}

html.ptbp-mode .tab-panel {
  padding: 4px 6px 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--fg) !important;
}

html.ptbp-mode .tab-panel h2 {
  margin: 18px 0 8px !important;
  color: var(--muted) !important;
  font: 600 11px var(--mono) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

html.ptbp-mode .tab-panel > h2:first-child {
  margin-top: 6px !important;
}

html.ptbp-mode .setting {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;

  min-height: 46px !important;
  margin: 0 0 6px !important;
  padding: 8px 12px !important;

  border: 1px solid var(--line) !important;
  border-radius: 8px !important;

  background: var(--card) !important;
  color: var(--fg-2) !important;

  font-size: 13px !important;
  font-weight: 600 !important;
}

html.ptbp-mode .hint,
html.ptbp-mode .tab-panel p {
  color: var(--muted) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

html.ptbp-mode input,
html.ptbp-mode select,
html.ptbp-mode textarea {
  max-width: 100% !important;
  min-height: 36px !important;
  padding: 7px 10px !important;

  background: var(--bg) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 7px !important;
  color: var(--fg) !important;

  font: 500 13px var(--body) !important;
}

html.ptbp-mode input[type="range"],
html.ptbp-mode input[type="checkbox"] {
  accent-color: var(--accent) !important;
}

/* ==========================================================
   8. Focus manette façon Big Picture .bp-btn.is-f
   ========================================================== */

html.ptbp-mode .ptbp-focus,
html.ptbp-mode :focus-visible {
  outline: none !important;

  box-shadow:
    0 0 0 .2rem var(--fg),
    0 0 0 .55rem rgba(var(--acc-rgb), .35),
    0 1.2rem 3rem rgba(0, 0, 0, .45) !important;

  position: relative !important;
  z-index: 40 !important;
  transform: scale(1.035) !important;
}

html.ptbp-mode #ptbp-player-header .player-actions button.ptbp-focus {
  background: var(--fg) !important;
  color: var(--bg) !important;
}

html.ptbp-mode #ptbp-player-header .player-actions #fullscreen.ptbp-focus {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-ink) !important;
}

/* Retirer la bulle A — SÉLECTIONNER : overlay global conservé. */
html.ptbp-mode #ptbp-focus-hint,
html.ptbp-mode .ptbp-focus-hint {
  display: none !important;
  visibility: hidden !important;
}

/* ==========================================================
   9. Overlay des commandes de manette
   ========================================================== */

#ptbp-controls-hud {
  position: fixed !important;
  z-index: 2147483000 !important;

  left: 50% !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px 14px !important;

  width: max-content !important;
  max-width: calc(100vw - 24px) !important;
  box-sizing: border-box !important;

  padding: 8px 13px !important;

  background: rgba(9, 11, 10, .94) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 10px !important;

  color: var(--fg-2) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, .42) !important;
  backdrop-filter: blur(12px) !important;

  pointer-events: none !important;
  user-select: none !important;

  font: 600 11px var(--body) !important;
}

#ptbp-controls-hud .ptbp-hud-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;

  color: var(--fg) !important;
  font: 850 11px var(--display) !important;
}

#ptbp-controls-hud .ptbp-hud-dot {
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;

  border-radius: 50% !important;
  background: var(--accent) !important;
  box-shadow: 0 0 10px rgba(var(--acc-rgb), .65) !important;
}

#ptbp-controls-hud .ptbp-hud-prompt {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  color: var(--fg-2) !important;
}

#ptbp-controls-hud .ptbp-glyph {
  display: inline-grid !important;
  place-items: center !important;

  min-width: 25px !important;
  height: 25px !important;
  padding: 0 5px !important;

  border: 0 !important;
  border-radius: 50% !important;

  background: #3a4741 !important;
  color: #fff !important;

  font: 900 10px/1 var(--body) !important;
  box-shadow: none !important;
}

#ptbp-controls-hud .ptbp-glyph.ptbp-a {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
}

#ptbp-controls-hud .ptbp-glyph.ptbp-b {
  background: #e5484d !important;
  color: #fff !important;
}

#ptbp-controls-hud .ptbp-hud-status {
  color: var(--dim) !important;
  font: 500 10px var(--mono) !important;
}

#ptbp-controls-hud .ptbp-hud-status.is-connected {
  color: var(--accent) !important;
}

/* ==========================================================
   10. Plein écran
   ========================================================== */

html.ptbp-mode .screen.fullscreen-active {
  position: fixed !important;
  z-index: 2147482999 !important;

  inset: 0 !important;
  width: 100vw !important;
  width: 100dvw !important;
  height: 100vh !important;
  height: var(--ptbp-viewport-height, 100dvh) !important;

  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #000 !important;
}

html.ptbp-mode .screen.fullscreen-active #game-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

html.ptbp-mode .screen.fullscreen-active #fullscreen-exit {
  display: block !important;
  position: absolute !important;
  z-index: 2147483002 !important;

  top: max(12px, env(safe-area-inset-top)) !important;
  right: max(12px, env(safe-area-inset-right)) !important;

  width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;

  border-radius: 50% !important;
  background: rgba(15, 19, 17, .9) !important;
  color: var(--fg) !important;
  border: 1px solid var(--line-2) !important;
}

html.ptbp-mode body.pseudo-fullscreen {
  min-height: 0 !important;
  height: var(--ptbp-viewport-height, 100dvh) !important;
  overflow: hidden !important;
  background: #000 !important;
}

html.ptbp-mode body.pseudo-fullscreen > header,
html.ptbp-mode body.pseudo-fullscreen > footer,
html.ptbp-mode body.pseudo-fullscreen .sidebar-column,
html.ptbp-mode body.pseudo-fullscreen .gamepad-hint,
html.ptbp-mode body.pseudo-fullscreen #ptbp-player-header,
html.ptbp-mode body.pseudo-fullscreen #ptbp-controls-hud {
  display: none !important;
}

html.ptbp-mode body.pseudo-fullscreen .layout {
  position: fixed !important;
  z-index: 2147482998 !important;
  inset: 0 !important;

  display: block !important;
  width: 100vw !important;
  width: 100dvw !important;
  height: var(--ptbp-viewport-height, 100dvh) !important;

  margin: 0 !important;
  padding: 0 !important;
}

html.ptbp-mode body.pseudo-fullscreen .player-column {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

html.ptbp-mode body.pseudo-fullscreen .screen {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ==========================================================
   11. Publicités et blocs promotionnels
   ========================================================== */

html.ptbp-mode .ad-slot,
html.ptbp-mode .ad-rail,
html.ptbp-mode .ad-banner-slot,
html.ptbp-mode .ad-sidebar-slot,
html.ptbp-mode .ad-side-slot,
html.ptbp-mode .ad-native-slot,
html.ptbp-mode .loading-ad,
html.ptbp-mode #loading-ad,
html.ptbp-mode #ad-loading-slot,
html.ptbp-mode #ad-banner-slot-wrap,
html.ptbp-mode #ad-sidebar-300-wrap,
html.ptbp-mode #ad-side-tall-wrap,
html.ptbp-mode #ad-native-wrap,
html.ptbp-mode [id^="ad-slot"],
html.ptbp-mode [id*="-ad-slot"],
html.ptbp-mode [class*="ad-slot"],
html.ptbp-mode [class*="ad-banner"],
html.ptbp-mode [class*="ad-sidebar"],
html.ptbp-mode [class*="ad-native"],
html.ptbp-mode [class*="advertisement"],
html.ptbp-mode [class*="advertising"],
html.ptbp-mode iframe[src*="doubleclick"],
html.ptbp-mode iframe[src*="googlesyndication"],
html.ptbp-mode iframe[src*="adsterra"],
html.ptbp-mode iframe[src*="hilltopads"],
html.ptbp-mode iframe[src*="propellerads"],
html.ptbp-mode iframe[src*="popads"],
html.ptbp-mode iframe[src*="exoclick"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
}

html.ptbp-mode footer {
  display: none !important;
}

/* ==========================================================
   12. Responsive
   ========================================================== */

@media (max-width: 1100px) {
  html.ptbp-mode .layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html.ptbp-mode .player-column,
  html.ptbp-mode .sidebar-column {
    grid-column: 1 !important;
    position: static !important;
    max-height: none !important;
  }

  html.ptbp-mode .sidebar-column {
    overflow: visible !important;
  }
}

@media (max-width: 760px) {
  html.ptbp-mode #ptbp-player-header {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 9px !important;
  }

  html.ptbp-mode .ptbp-player-header-right,
  html.ptbp-mode #ptbp-player-header .player-actions {
    width: 100% !important;
  }

  html.ptbp-mode #ptbp-player-header .player-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html.ptbp-mode #ptbp-player-header .player-actions button {
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 5px !important;
    font-size: 10px !important;
  }

  html.ptbp-mode .screen {
    height: 70dvh !important;
    min-height: 320px !important;
  }

  #ptbp-controls-hud {
    bottom: max(7px, env(safe-area-inset-bottom)) !important;
    gap: 5px 8px !important;
    padding: 7px !important;
  }

  #ptbp-controls-hud .ptbp-hud-brand {
    display: none !important;
  }

  #ptbp-controls-hud .ptbp-hud-status {
    width: 100% !important;
    text-align: center !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.ptbp-mode *,
  html.ptbp-mode *::before,
  html.ptbp-mode *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* FIX définitif : supprimer le bloc Plus de jeux */
html.ptbp-mode .promo-card.promo-card-catalog,
html.ptbp-mode section[aria-labelledby="promo-title"],
html.ptbp-mode #promo-title,
html.ptbp-mode .promo-kicker,
html.ptbp-mode .promo-copy,
html.ptbp-mode .promo-button {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}

/* FIX : header du site source totalement masqué */
body > header,
body > header *,
html.ptbp-mode body > header,
html.ptbp-mode body > header * {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* FIX : retirer le bloc Plus de jeux */
.promo-card.promo-card-catalog,
.promo-card,
.promo-card-catalog,
html.ptbp-mode .promo-card.promo-card-catalog,
html.ptbp-mode .promo-card,
html.ptbp-mode .promo-card-catalog {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Réactiver le thème vert Big Picture pour les contrôles */
html.ptbp-mode {
  --accent: #34e27f !important;
  --acc-rgb: 52, 226, 127 !important;
  --accent-hover: #6ff0a6 !important;
  --accent-ink: #02150a !important;
}