/* ARCADE JOUET — popups (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).
   UN SEUL GABARIT pour toutes les fenêtres « secondaires » : guide Comment jouer, quêtes, mentions
   légales, connexion, contact, coffre, choix d'équipe, scores de foot, blocage triche, barrière
   d'installation mobile, bandeau cookies, invite son. Même cadre (crème, contour épais, ombre dure),
   même titre, même croix rouge en haut à droite, mêmes onglets en pilules, mêmes boutons qui s'enfoncent.
   (Écran de mort, boutique, options et HUD ont leur propre feuille : arcade-mort/boutique/options/hud.) */

/* ---------- 1. FONDS (voiles) ---------- */
html body.ui-arcade #tutorial-panel, html body.ui-arcade #quests-panel, html body.ui-arcade #legal-panel,
html body.ui-arcade #login-panel, html body.ui-arcade #feedback-panel, html body.ui-arcade #foot-panel,
html body.ui-arcade #chest-modal .chest-modal-backdrop, html body.ui-arcade #flag-backdrop {
  background: rgba(14, 44, 64, .55) !important; background-image: none !important; backdrop-filter: none !important;
}

/* ---------- 2. CADRE ---------- */
html body.ui-arcade #tutorial-box, html body.ui-arcade #quests-box, html body.ui-arcade #legal-box,
html body.ui-arcade #login-box, html body.ui-arcade #feedback-box, html body.ui-arcade #foot-box,
html body.ui-arcade #chest-modal .chest-modal-box, html body.ui-arcade #team-picker,
html body.ui-arcade #install-gate .ig-card, html body.ui-arcade #cheat-block > div {
  background: var(--ar-cream) !important; background-image: none !important; color: var(--ar-ink) !important;
  border: 5px solid var(--ar-ink) !important; border-radius: 24px !important;
  box-shadow: 0 10px 0 var(--ar-ink), 0 18px 40px rgba(0, 0, 0, .25) !important;
  backdrop-filter: none !important;
}
html body.ui-arcade #tutorial-box *, html body.ui-arcade #quests-box *, html body.ui-arcade #legal-box *,
html body.ui-arcade #login-box *, html body.ui-arcade #feedback-box *, html body.ui-arcade #foot-box *,
html body.ui-arcade #chest-modal *, html body.ui-arcade #team-picker *, html body.ui-arcade #install-gate *,
html body.ui-arcade #cheat-block *, html body.ui-arcade #privacy-notice *, html body.ui-arcade #sound-prompt * {
  font-family: var(--ar-font) !important;
}
html body.ui-arcade #tutorial-box h2, html body.ui-arcade #quests-box h2, html body.ui-arcade #legal-box h2,
html body.ui-arcade #login-box h2, html body.ui-arcade #feedback-box h2, html body.ui-arcade #foot-box h2,
html body.ui-arcade #chest-modal h2, html body.ui-arcade #chest-modal h3, html body.ui-arcade #install-gate h2,
html body.ui-arcade #cheat-block h2, html body.ui-arcade #team-picker .flag-modal-title {
  color: var(--ar-ink) !important; font-weight: 900 !important; letter-spacing: .01em !important; text-shadow: none !important;
}
/* textes secondaires lisibles sur crème (les couches d'avant posaient du gris pâle) */
html body.ui-arcade #tutorial-box p, html body.ui-arcade #quests-box p, html body.ui-arcade #legal-box p,
html body.ui-arcade #login-box p, html body.ui-arcade #feedback-box p, html body.ui-arcade #foot-box p,
html body.ui-arcade #chest-modal p, html body.ui-arcade #install-gate p, html body.ui-arcade #tutorial-box li,
html body.ui-arcade #legal-box li, html body.ui-arcade #login-box li { color: #2a4a62 !important; }

/* ---------- 3. CARTES INTÉRIEURES ---------- */
html body.ui-arcade #tutorial-box .tuto-section, html body.ui-arcade #quests-box .quest-item,
html body.ui-arcade #quests-box .quest-row, html body.ui-arcade #legal-box .legal-section,
html body.ui-arcade #feedback-box .fb-type, html body.ui-arcade #foot-box .foot-match {
  background: #fff !important; background-image: none !important;
  border: 3px solid var(--ar-ink) !important; border-radius: 16px !important; box-shadow: 0 4px 0 var(--ar-ink) !important;
}
html body.ui-arcade #tutorial-box .tuto-num {
  background: var(--ar-yellow) !important; color: var(--ar-ink-2) !important;
  border: 3px solid var(--ar-ink-2) !important; border-radius: 999px !important; box-shadow: 0 2px 0 var(--ar-ink-2) !important;
}
html body.ui-arcade #tutorial-box kbd, html body.ui-arcade #legal-box kbd {
  background: #fff !important; color: var(--ar-ink) !important; border: 2px solid var(--ar-ink) !important;
  border-radius: 6px !important; box-shadow: 0 2px 0 var(--ar-ink) !important;
}

/* ---------- 4. BOUTONS (génériques), puis cas particuliers ---------- */
html body.ui-arcade #tutorial-box button, html body.ui-arcade #quests-box button, html body.ui-arcade #legal-box button,
html body.ui-arcade #login-box button, html body.ui-arcade #feedback-box button, html body.ui-arcade #foot-box button,
html body.ui-arcade #chest-modal button, html body.ui-arcade #install-gate button, html body.ui-arcade #cheat-block button,
html body.ui-arcade #privacy-notice button, html body.ui-arcade #sound-prompt button {
  background: var(--ar-blue) !important; background-image: none !important; color: #fff !important;
  border: 3px solid var(--ar-blue-d) !important; border-radius: 14px !important; box-shadow: 0 4px 0 var(--ar-blue-d) !important;
  font-weight: 800 !important; text-shadow: none !important; cursor: pointer !important;
}
html body.ui-arcade #tutorial-box button:active, html body.ui-arcade #quests-box button:active, html body.ui-arcade #legal-box button:active,
html body.ui-arcade #login-box button:active, html body.ui-arcade #feedback-box button:active, html body.ui-arcade #foot-box button:active,
html body.ui-arcade #chest-modal button:active, html body.ui-arcade #install-gate button:active, html body.ui-arcade #cheat-block button:active,
html body.ui-arcade #privacy-notice button:active, html body.ui-arcade #sound-prompt button:active { transform: translateY(3px) !important; box-shadow: 0 1px 0 var(--ar-blue-d) !important; }
/* action principale : orange (installer, se connecter, envoyer, ouvrir le coffre, accepter) */
html body.ui-arcade #install-gate #ig-install, html body.ui-arcade #install-gate #ig-open,
html body.ui-arcade #login-box .login-google, html body.ui-arcade #login-box [id*="google"],
html body.ui-arcade #feedback-box [type="submit"], html body.ui-arcade #feedback-box .fb-send,
html body.ui-arcade #chest-modal .chest-modal-cta, html body.ui-arcade #chest-modal [data-chest-open] {
  background: var(--ar-orange) !important; border-color: var(--ar-orange-d) !important; box-shadow: 0 5px 0 var(--ar-orange-d) !important;
}
/* « Jouer sans installer » : bien visible (vert), plus en lien fantôme */
html body.ui-arcade #install-gate #ig-play-web { background: var(--ar-green) !important; border-color: var(--ar-green-d) !important; box-shadow: 0 5px 0 var(--ar-green-d) !important; }

/* ---------- 5. CROIX DE FERMETURE : rondes, rouges ---------- */
/* préfixe :is(#ids) : doit battre « #xxx-box button » (§4) et les ids des chartes précédentes */
html body.ui-arcade :is(#tutorial-panel, #quests-panel, #legal-panel, #login-panel, #feedback-panel, #foot-panel, #chest-modal, #team-picker) .panel-x, html body.ui-arcade :is(#tutorial-panel, #quests-panel, #legal-panel, #login-panel, #feedback-panel, #foot-panel, #chest-modal, #team-picker) .foot-x, html body.ui-arcade :is(#tutorial-panel, #quests-panel, #legal-panel, #login-panel, #feedback-panel, #foot-panel, #chest-modal, #team-picker) .chest-modal-x,
html body.ui-arcade :is(#tutorial-panel, #quests-panel, #legal-panel, #login-panel, #feedback-panel, #foot-panel, #chest-modal, #team-picker) #flag-close {
  background: var(--ar-red) !important; background-image: none !important; color: #fff !important;
  border: 3px solid #7a1a1a !important; border-radius: 50% !important; box-shadow: 0 4px 0 #7a1a1a !important;
  width: 42px !important; height: 42px !important; min-width: 42px !important; padding: 0 !important;
  font-size: 20px !important; font-weight: 900 !important; line-height: 1 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important; opacity: 1 !important;
}
html body.ui-arcade :is(#tutorial-panel, #quests-panel, #legal-panel, #login-panel, #feedback-panel, #foot-panel, #chest-modal, #team-picker) .panel-x:active, html body.ui-arcade :is(#tutorial-panel, #quests-panel, #legal-panel, #login-panel, #feedback-panel, #foot-panel, #chest-modal, #team-picker) .foot-x:active, html body.ui-arcade :is(#tutorial-panel, #quests-panel, #legal-panel, #login-panel, #feedback-panel, #foot-panel, #chest-modal, #team-picker) .chest-modal-x:active,
html body.ui-arcade :is(#tutorial-panel, #quests-panel, #legal-panel, #login-panel, #feedback-panel, #foot-panel, #chest-modal, #team-picker) #flag-close:active { transform: translateY(3px) !important; box-shadow: 0 1px 0 #7a1a1a !important; }

/* ---------- 6. ONGLETS : pilules ---------- */
html body.ui-arcade :is(#tutorial-panel, #quests-panel, #legal-panel, #login-panel, #feedback-panel, #foot-panel, #chest-modal, #team-picker) .tuto-tab, html body.ui-arcade :is(#tutorial-panel, #quests-panel, #legal-panel, #login-panel, #feedback-panel, #foot-panel, #chest-modal, #team-picker) .legal-tab, html body.ui-arcade :is(#tutorial-panel, #quests-panel, #legal-panel, #login-panel, #feedback-panel, #foot-panel, #chest-modal, #team-picker) .quests-tab,
html body.ui-arcade :is(#tutorial-panel, #quests-panel, #legal-panel, #login-panel, #feedback-panel, #foot-panel, #chest-modal, #team-picker) .foot-tab, html body.ui-arcade :is(#tutorial-panel, #quests-panel, #legal-panel, #login-panel, #feedback-panel, #foot-panel, #chest-modal, #team-picker) .flag-tab, html body.ui-arcade :is(#tutorial-panel, #quests-panel, #legal-panel, #login-panel, #feedback-panel, #foot-panel, #chest-modal, #team-picker) .fb-type {
  background: #ffe9b0 !important; background-image: none !important; color: var(--ar-ink) !important;
  border: 3px solid var(--ar-ink) !important; border-radius: 999px !important; box-shadow: 0 3px 0 var(--ar-ink) !important;
  font-weight: 800 !important; padding: 6px 14px !important;
}
html body.ui-arcade :is(#tutorial-panel, #quests-panel, #legal-panel, #login-panel, #feedback-panel, #foot-panel, #chest-modal, #team-picker) .tuto-tab.selected, html body.ui-arcade :is(#tutorial-panel, #quests-panel, #legal-panel, #login-panel, #feedback-panel, #foot-panel, #chest-modal, #team-picker) .legal-tab.selected, html body.ui-arcade :is(#tutorial-panel, #quests-panel, #legal-panel, #login-panel, #feedback-panel, #foot-panel, #chest-modal, #team-picker) .quests-tab.selected,
html body.ui-arcade :is(#tutorial-panel, #quests-panel, #legal-panel, #login-panel, #feedback-panel, #foot-panel, #chest-modal, #team-picker) .foot-tab.selected, html body.ui-arcade :is(#tutorial-panel, #quests-panel, #legal-panel, #login-panel, #feedback-panel, #foot-panel, #chest-modal, #team-picker) .flag-tab.selected, html body.ui-arcade :is(#tutorial-panel, #quests-panel, #legal-panel, #login-panel, #feedback-panel, #foot-panel, #chest-modal, #team-picker) .fb-type.selected {
  background: var(--ar-blue) !important; color: #fff !important; border-color: var(--ar-blue-d) !important; box-shadow: 0 3px 0 var(--ar-blue-d) !important;
}

/* ---------- 7. CHAMPS ---------- */
html body.ui-arcade #feedback-box input, html body.ui-arcade #feedback-box textarea, html body.ui-arcade #team-picker #flag-search,
html body.ui-arcade #login-box input {
  background: #fff !important; color: var(--ar-ink) !important; border: 3px solid var(--ar-ink) !important;
  border-radius: 12px !important; box-shadow: inset 0 2px 0 rgba(26, 61, 85, .12) !important;
}

/* ---------- 8. CHOIX D'ÉQUIPE : grille de drapeaux en tuiles ---------- */
html body.ui-arcade #team-picker .flag-sw {
  background: #fff !important; border: 3px solid var(--ar-ink) !important; border-radius: 14px !important; box-shadow: 0 3px 0 var(--ar-ink) !important;
  color: var(--ar-ink) !important;
}
html body.ui-arcade #team-picker .flag-sw.selected, html body.ui-arcade #team-picker .flag-sw[aria-pressed="true"] {
  background: var(--ar-yellow) !important; border-color: var(--ar-ink-2) !important; box-shadow: 0 3px 0 var(--ar-ink-2) !important;
}

/* ---------- 9. BANDEAUX DISCRETS (cookies, son) : petites cartes en bas ---------- */
html body.ui-arcade #privacy-notice, html body.ui-arcade #sound-prompt {
  background: var(--ar-cream) !important; background-image: none !important; color: var(--ar-ink) !important;
  border: 4px solid var(--ar-ink) !important; border-radius: 18px !important; box-shadow: 0 6px 0 var(--ar-ink) !important;
  backdrop-filter: none !important;
}
html body.ui-arcade #privacy-notice p, html body.ui-arcade #sound-prompt p,
html body.ui-arcade #privacy-notice span, html body.ui-arcade #sound-prompt span { color: var(--ar-ink) !important; }

/* ---------- 10. BARRIÈRE D'INSTALLATION MOBILE ---------- */
html body.ui-arcade #install-gate { background: radial-gradient(ellipse at 50% 35%, #49aac6, #2f87a6 75%) !important; }
html body.ui-arcade #install-gate .ig-btn { width: 100% !important; min-height: 54px !important; font-size: 18px !important; }

@media (prefers-reduced-motion: reduce) {
  html body.ui-arcade .panel-x, html body.ui-arcade .tuto-tab, html body.ui-arcade .legal-tab { transition: none !important; }
}