/* ARCADE JOUET — options (2026-10-18). Scopée html body.ui-arcade, chargée après css/accueil-arcade.css.
   Réutilise les jetons --ar-* posés par css/accueil-arcade.css (body.ui-arcade). */
/* =====================================================================================
   OPTIONS « ARCADE JOUET » (maquette « Paramètres : trois groupes, rien d'autre »,
   https://claude.ai/artifact/HjMJ8bDFzUZVnva6hSgDQc, style B). Un panneau crème à contour marine et
   ombre dure, titre « Options », croix rouge en haut à droite, trois onglets pastilles (Jeu / Son /
   Commandes), une LIGNE blanche par réglage : libellé à gauche, contrôle à droite (interrupteur dodu,
   curseur, pastilles, liste). Structure : index.html (#options-panel) + UI.buildOptionsTabs.
   ⚠️ Dix couches précèdent (options-refonte, charte-pastel, charte-sombre, glass-ui, popups-ghibli…) :
   chaque règle est scopée `html body.ui-arcade #options-panel` + !important. Le panneau reste crème
   en thème sombre (la palette Arcade est la même dans les deux thèmes).
   ===================================================================================== */

/* ---------- 1. LE PANNEAU ---------- */
html body.ui-arcade #options-panel {
  position: fixed !important; inset: auto !important; left: 50% !important; top: 50% !important;
  transform: translate(-50%, -50%) !important; animation: none !important;
  width: min(560px, calc(100vw - 32px)) !important; max-width: none !important; min-width: 0 !important;
  height: auto !important; max-height: calc(100dvh - 32px) !important; min-height: 0 !important;
  margin: 0 !important; padding: 18px 20px 14px !important; box-sizing: border-box !important;
  display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important; gap: 12px !important;
  overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain;
  background: var(--ar-cream) !important; background-image: none !important;
  border: 4px solid var(--ar-ink) !important; border-radius: 22px !important;
  box-shadow: 0 8px 0 var(--ar-ink), 0 0 0 100vmax rgba(10, 40, 60, .45) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  color: var(--ar-ink) !important; font-family: var(--ar-font) !important; text-align: left !important;
}
html body.ui-arcade #options-panel.hidden { display: none !important; }
html body.ui-arcade #options-panel::before, html body.ui-arcade #options-panel::after { display: none !important; content: none !important; }
html body.ui-arcade #options-panel * { font-family: var(--ar-font) !important; box-sizing: border-box; }
html body.ui-arcade #options-panel [hidden], html body.ui-arcade #options-panel .hidden:not(#options-panel) { display: none !important; }

/* titre + croix */
html body.ui-arcade #options-panel #opt-title {
  margin: 0 !important; padding: 0 48px 0 2px !important; font-size: 28px !important; line-height: 1.15 !important; font-weight: 800 !important;
  color: var(--ar-ink) !important; text-align: left !important; letter-spacing: 0 !important; text-transform: none !important;
  background: none !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; border: 0 !important;
}
html body.ui-arcade #options-panel #opt-title::before, html body.ui-arcade #options-panel #opt-title::after { display: none !important; content: none !important; }
html body.ui-arcade #options-panel > .panel-x {
  position: absolute !important; top: 14px !important; right: 14px !important; left: auto !important; bottom: auto !important;
  width: 40px !important; height: 40px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important;
  display: grid !important; place-items: center !important; border-radius: 50% !important;
  background: var(--ar-red) !important; border: 3px solid #7a1a1a !important; box-shadow: 0 4px 0 #7a1a1a !important;
  color: #fff !important; font-size: 24px !important; line-height: 1 !important; font-weight: 800 !important; cursor: pointer !important;
  transform: none !important; transition: transform .08s, box-shadow .08s !important; z-index: 2 !important;
}
html body.ui-arcade #options-panel > .panel-x:active { transform: translateY(3px) !important; box-shadow: 0 1px 0 #7a1a1a !important; }

/* ---------- 2. ONGLETS ---------- */
html body.ui-arcade #options-panel #opt-tabs {
  display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 0 !important; padding: 0 0 4px !important;
  background: none !important; border: 0 !important; box-shadow: none !important; position: static !important; width: auto !important;
}
html body.ui-arcade #options-panel #opt-tabs .opt-tab {
  flex: 0 1 auto !important; min-width: 0 !important; width: auto !important; margin: 0 !important;
  padding: 7px 16px !important; border-radius: 999px !important; font-size: 16px !important; font-weight: 800 !important; line-height: 1.2 !important;
  background: #ffe9b0 !important; color: var(--ar-ink) !important; border: 3px solid var(--ar-ink) !important; box-shadow: 0 3px 0 var(--ar-ink) !important;
  text-transform: none !important; letter-spacing: 0 !important; cursor: pointer !important; transform: none !important; opacity: 1 !important;
}
html body.ui-arcade #options-panel #opt-tabs .opt-tab::before, html body.ui-arcade #options-panel #opt-tabs .opt-tab::after { display: none !important; content: none !important; }
html body.ui-arcade #options-panel #opt-tabs .opt-tab.selected { background: var(--ar-blue) !important; color: #fff !important; }
html body.ui-arcade #options-panel #opt-tabs .opt-tab:active { transform: translateY(2px) !important; box-shadow: 0 1px 0 var(--ar-ink) !important; }

/* ---------- 3. GRILLE + PANNEAUX D'ONGLET ---------- */
html body.ui-arcade #options-panel #options-grid {
  display: block !important; grid-template-columns: none !important; columns: auto !important; gap: 0 !important;
  margin: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important; background: none !important;
}
html body.ui-arcade #options-panel #options-grid .opt-pane {
  display: flex !important; flex-direction: column !important; gap: 8px !important; margin: 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; backdrop-filter: none !important;
  min-height: 0 !important; width: auto !important;
}
html body.ui-arcade #options-panel #options-grid .opt-pane::before, html body.ui-arcade #options-panel #options-grid .opt-pane::after { display: none !important; content: none !important; }
html body.ui-arcade #options-panel #options-grid .opt-pane.opt-card-hidden { display: none !important; }
html body.ui-arcade #options-panel .opt-group { display: flex !important; flex-direction: column !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
html body.ui-arcade:not(.vtouch) #options-panel .opt-card-mobile { display: none !important; }
html body.ui-arcade.vtouch #options-panel .opt-only-pc { display: none !important; }

/* ---------- 4. UNE LIGNE PAR RÉGLAGE ---------- */
html body.ui-arcade #options-panel .opt-row {
  display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important;
  min-height: 52px !important; width: 100% !important; margin: 0 !important; padding: 8px 12px 8px 14px !important;
  background: #fff !important; border: 3px solid var(--ar-ink) !important; border-radius: 14px !important; box-shadow: none !important;
  color: var(--ar-ink) !important; font-size: 16px !important; font-weight: 800 !important; line-height: 1.2 !important; text-align: left !important;
  cursor: default; transform: none !important; text-transform: none !important; letter-spacing: 0 !important;
}
html body.ui-arcade #options-panel label.opt-row.chk, html body.ui-arcade #options-panel .opt-row--btn { cursor: pointer !important; }
html body.ui-arcade #options-panel .opt-row[hidden] { display: none !important; } /* ligne « Équipe » cachée en pleine partie */
html body.ui-arcade #options-panel .opt-row::before, html body.ui-arcade #options-panel .opt-row::after { display: none !important; content: none !important; }
html body.ui-arcade #options-panel .opt-row-lbl {
  flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important;
  color: var(--ar-ink) !important; font-size: 16px !important; font-weight: 800 !important; overflow-wrap: anywhere;
}
html body.ui-arcade #options-panel .opt-row-lbl small {
  display: block !important; font-size: 12.5px !important; font-weight: 700 !important; line-height: 1.25 !important; color: #4d6a7e !important; opacity: 1 !important;
}
html body.ui-arcade #options-panel .opt-row-ctl {
  flex: 0 1 auto !important; min-width: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important;
  margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important;
}
html body.ui-arcade #options-panel .opt-row--sub { margin-top: -2px !important; min-height: 46px !important; background: #fffbef !important; border-style: dashed !important; }

/* ---------- 5. CONTRÔLES ---------- */
/* 5a. INTERRUPTEUR DODU (cases à cocher + bouton du mode streamer) */
html body.ui-arcade #options-panel .opt-row input[type="checkbox"],
html body.ui-arcade #options-panel .opt-row .opt-sw {
  -webkit-appearance: none !important; appearance: none !important; flex: 0 0 auto !important;
  position: relative !important; display: inline-block !important; width: 56px !important; height: 32px !important; min-width: 56px !important;
  margin: 0 !important; padding: 0 !important; border-radius: 999px !important;
  background: #ffcfc4 !important; border: 3px solid var(--ar-ink) !important; box-shadow: none !important; outline: none !important;
  cursor: pointer !important; transition: background .15s !important; transform: none !important; opacity: 1 !important; accent-color: auto;
}
html body.ui-arcade #options-panel .opt-row input[type="checkbox"]::before,
html body.ui-arcade #options-panel .opt-row .opt-sw::before {
  content: "" !important; display: block !important; position: absolute !important; top: 2px !important; left: 2px !important;
  width: 22px !important; height: 22px !important; border-radius: 50% !important; background: #fff !important; border: 3px solid var(--ar-ink) !important;
  transition: left .15s !important; box-sizing: border-box !important;
}
html body.ui-arcade #options-panel .opt-row input[type="checkbox"]::after, html body.ui-arcade #options-panel .opt-row .opt-sw::after { display: none !important; content: none !important; }
html body.ui-arcade #options-panel .opt-row input[type="checkbox"]:checked,
html body.ui-arcade #options-panel .opt-row--btn.on .opt-sw { background: var(--ar-green) !important; }
html body.ui-arcade #options-panel .opt-row input[type="checkbox"]:checked::before,
html body.ui-arcade #options-panel .opt-row--btn.on .opt-sw::before { left: 26px !important; }
html body.ui-arcade #options-panel .opt-row input[type="checkbox"]:focus-visible,
html body.ui-arcade #options-panel .opt-row--btn:focus-visible .opt-sw { box-shadow: 0 0 0 3px var(--ar-blue) !important; }
/* le bouton-ligne du mode streamer : remet à zéro le gabarit .dov-str-toggle des anciennes couches */
html body.ui-arcade #options-panel #dov-str-box { display: flex !important; flex-direction: column !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
html body.ui-arcade #options-panel #dov-str-toggle { font: inherit !important; width: 100% !important; }
html body.ui-arcade #options-panel #dov-str-toggle .dsr-dot { display: none !important; }

/* 5b. CURSEUR : piste jaune pâle à contour, bouton blanc dodu */
html body.ui-arcade #options-panel .opt-row input[type="range"] {
  -webkit-appearance: none !important; appearance: none !important;
  width: clamp(120px, 34vw, 200px) !important; max-width: 100% !important; height: 14px !important; margin: 0 4px !important; padding: 0 !important;
  border-radius: 999px !important; background: #ffe9b0 !important; border: 3px solid var(--ar-ink) !important; box-shadow: none !important;
  cursor: pointer !important; accent-color: var(--ar-orange);
}
html body.ui-arcade #options-panel .opt-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important; appearance: none !important; width: 26px !important; height: 26px !important; border-radius: 50% !important;
  background: #fff !important; border: 3px solid var(--ar-ink) !important; box-shadow: 0 3px 0 var(--ar-ink) !important; margin-top: 0 !important;
}
html body.ui-arcade #options-panel .opt-row input[type="range"]::-moz-range-thumb {
  width: 22px !important; height: 22px !important; border-radius: 50% !important; background: #fff !important; border: 3px solid var(--ar-ink) !important; box-shadow: 0 3px 0 var(--ar-ink) !important;
}
html body.ui-arcade #options-panel .opt-row input[type="range"]::-moz-range-progress { background: var(--ar-orange) !important; height: 8px !important; border-radius: 999px !important; }

/* 5d. LISTES (langue, serveur, qualité) + bouton « équipe » : même pastille à chevron */
html body.ui-arcade #options-panel .opt-row select,
html body.ui-arcade #options-panel #opt-lang-host #i18n-opt select,
html body.ui-arcade #options-panel .opt-row .opt-pick {
  -webkit-appearance: none !important; appearance: none !important;
  width: auto !important; min-width: 0 !important; max-width: min(220px, 46vw) !important; height: auto !important; margin: 0 !important;
  padding: 7px 34px 7px 14px !important; border-radius: 999px !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1.2 !important;
  color: var(--ar-ink) !important; background-color: #ffe9b0 !important; border: 3px solid var(--ar-ink) !important; box-shadow: 0 3px 0 var(--ar-ink) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%231a3d55' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 12px 8px !important;
  text-overflow: ellipsis !important; white-space: nowrap !important; overflow: hidden !important; cursor: pointer !important; outline: none !important;
}
html body.ui-arcade #options-panel .opt-row .opt-pick { display: inline-flex !important; align-items: center !important; }
html body.ui-arcade #options-panel .opt-row .opt-pick #opt-team-name { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
html body.ui-arcade #options-panel .opt-row .opt-pick-chev { display: none !important; }
html body.ui-arcade #options-panel .opt-row select:focus-visible, html body.ui-arcade #options-panel .opt-row .opt-pick:focus-visible { box-shadow: 0 0 0 3px var(--ar-blue) !important; }
html body.ui-arcade #options-panel .opt-row select option { background: #fff !important; color: var(--ar-ink) !important; }
html body.ui-arcade #options-panel #i18n-opt { display: inline-flex !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }

/* 5e. BOUTON D'ACTION (déplacer les boutons tactiles) */
html body.ui-arcade #options-panel .opt-row .opt-btn {
  width: auto !important; margin: 0 !important; padding: 7px 14px !important; border-radius: 999px !important;
  font-size: 15px !important; font-weight: 800 !important; line-height: 1.2 !important; white-space: nowrap !important;
  background: var(--ar-blue) !important; color: #fff !important; border: 3px solid var(--ar-blue-d) !important; box-shadow: 0 3px 0 var(--ar-blue-d) !important;
  cursor: pointer !important; transform: none !important;
}
html body.ui-arcade #options-panel .opt-row .opt-btn:active { transform: translateY(2px) !important; box-shadow: 0 1px 0 var(--ar-blue-d) !important; }

/* note manette (PC) */
html body.ui-arcade #options-panel .opt-pane > .opt-note { margin: 2px 4px 0 !important; padding: 0 !important; font-size: 13px !important; font-weight: 700 !important; color: #4d6a7e !important; background: none !important; border: 0 !important; }

/* ---------- 6. PIED : liens discrets, accès développeur, version ---------- */
html body.ui-arcade #options-panel .opt-foot {
  display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 4px 16px !important;
  margin: 2px 0 0 !important; padding: 10px 0 0 !important; border-top: 2px dashed rgba(26, 61, 85, .25) !important;
}
html body.ui-arcade #options-panel .opt-foot .opt-link {
  width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 4px 2px !important; background: none !important; border: 0 !important; box-shadow: none !important;
  color: var(--ar-blue-d) !important; font-size: 14px !important; font-weight: 800 !important; text-decoration: underline !important; text-underline-offset: 3px !important;
  cursor: pointer !important; transform: none !important;
}
html body.ui-arcade #options-panel #opt-install-hint { margin: 0 !important; font-size: 13px !important; color: #4d6a7e !important; text-align: center !important; }
html body.ui-arcade #options-panel #dev-access { margin: 0 !important; padding: 0 !important; text-align: center !important; background: none !important; border: 0 !important; opacity: .55; }
html body.ui-arcade #options-panel #dev-access .dev-toggle { background: none !important; border: 0 !important; box-shadow: none !important; color: #4d6a7e !important; font-size: 12px !important; font-weight: 700 !important; padding: 2px !important; width: auto !important; }
html body.ui-arcade #options-panel #dev-access .dev-pass { max-width: 140px !important; padding: 4px 8px !important; border-radius: 8px !important; border: 2px solid var(--ar-ink) !important; background: #fff !important; color: var(--ar-ink) !important; }
html body.ui-arcade #options-panel #dev-access .dev-status { color: #4d6a7e !important; font-size: 12px !important; }
html body.ui-arcade #options-panel #opt-version { margin: 0 !important; color: #4d6a7e !important; }

/* ---------- 7. TÉLÉPHONE ---------- */
@media (max-width: 480px) {
  html body.ui-arcade #options-panel { padding: 14px 12px 12px !important; border-radius: 18px !important; gap: 10px !important; }
  html body.ui-arcade #options-panel #opt-title { font-size: 24px !important; }
  html body.ui-arcade #options-panel > .panel-x { top: 10px !important; right: 10px !important; width: 36px !important; height: 36px !important; font-size: 21px !important; }
  html body.ui-arcade #options-panel #opt-tabs .opt-tab { padding: 6px 12px !important; font-size: 15px !important; }
  html body.ui-arcade #options-panel .opt-row { padding: 7px 10px 7px 12px !important; gap: 10px !important; font-size: 15px !important; }
  html body.ui-arcade #options-panel .opt-row-lbl { font-size: 15px !important; }
  html body.ui-arcade #options-panel .opt-row input[type="range"] { width: 120px !important; }
  html body.ui-arcade #options-panel .opt-row select, html body.ui-arcade #options-panel .opt-row .opt-pick { max-width: 170px !important; font-size: 14px !important; padding: 6px 30px 6px 12px !important; }
}