/* =====================================================================================
   DOVION — POPUPS GHIBLI (2026-07-11, demandes #29, #42, #53)
   -------------------------------------------------------------------------------------
   Règles COMMUNES et RÉUTILISABLES pour toutes les popups de MENU, + refonte complète
   du panneau OPTIONS (lisibilité / contraste WCAG AA).

   Principe de palette (cohérent avec la boutique css/shop-ghibli.css et l'écran de
   mort de style.css) :
     - popups de MENU (options, tutoriel, quêtes, contact, légal, login, coffre)
       → parchemin Ghibli CLAIR, texte encre (contraste ≥ 4.5:1 partout) ;
     - overlays DE JEU (choix de coque, armement, galerie, foot, minimap)
       → restent sombres (ils recouvrent la partie en cours), non touchés ici.

   Jetons réutilisables : --pg-* (déclarés sur les panneaux de menu). Toute nouvelle
   popup de menu peut réutiliser tel quel : voile chaud + carte parchemin + encres.

   Chargé APRÈS css/glass-ui.css → à spécificité égale la déclaration tardive gagne ;
   `!important` repris là où glass-ui.css en pose. Aucun id/classe modifié.

   Sommaire :
     0. Jetons communs
     1. Voile d'arrière-plan chaud (commun aux popups de menu)
     2. Croix de fermeture .panel-x (commune) + boutons secondaires
     3. OPTIONS (#options-panel) — refonte lisibilité (A2 / #29)
     4. Tutoriel « Comment jouer »
     5. Quêtes / Contact (feedback) / Informations légales / Login
     6. Modale coffre (récompense)
     7. Ajustements « tient sans scroll » portrait & paysage (A5 / #42)
   ===================================================================================== */

/* ============================ 0. JETONS COMMUNS ============================ */
#options-panel,
#tutorial-panel,
#login-panel,
#quests-panel,
#feedback-panel,
#legal-panel,
#stuff-panel,
.chest-modal-backdrop {
  --pg-paper: #f6ecd6;                     /* parchemin (fond de carte) */
  --pg-card: #fffaf0;                        /* crème (cartes internes) */
  --pg-field: #fffdf6;                       /* champs de saisie */
  --pg-border: rgba(146, 114, 66, 0.42);
  --pg-border-strong: rgba(122, 92, 48, 0.62);
  --pg-ink: #392e1c;                         /* texte principal (≈10:1 sur crème) */
  --pg-ink-soft: #55462e;                    /* secondaire (≈7:1) */
  --pg-muted: #6d5c40;                       /* discret (≈5:1) */
  --pg-gold-deep: #8a5c10;                   /* or profond lisible */
  --pg-gold: #e9b949;                        /* or miel (remplissages/bordures) */
  --pg-sage-deep: #3f5c30;                   /* sauge profonde lisible */
  --pg-sage: #7ea75f;
  --pg-danger: #a3402c;
  --pg-radius: 18px;
  --pg-radius-sm: 12px;
  /* recettes réutilisables */
  --pg-veil:
    radial-gradient(120% 70% at 50% -8%, rgba(255, 214, 150, 0.30), rgba(255, 214, 150, 0) 60%),
    linear-gradient(180deg, rgba(64, 48, 26, 0.55), rgba(40, 30, 17, 0.66));
  --pg-sheet:
    radial-gradient(120% 42% at 50% -6%, rgba(255, 226, 168, 0.5), rgba(255, 226, 168, 0) 60%),
    linear-gradient(180deg, #f9f1de 0%, var(--pg-paper) 44%, #f0e3c4 100%);
  --pg-card-bg: linear-gradient(180deg, var(--pg-card), #f6ecd4);
  --pg-shadow-sheet: 0 24px 60px rgba(30, 20, 8, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --pg-shadow-card: 0 6px 18px rgba(96, 72, 34, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --pg-cta-gold: linear-gradient(180deg, #ffd764, #e8a92b);
  --pg-cta-gold-ink: #3a2504;
}

/* ============================ 1. VOILE CHAUD COMMUN ============================ */
/* Ouvrir une popup de menu « dore » le décor au lieu de le givrer en marine froid. */
#options-panel,
#tutorial-panel,
#login-panel,
#quests-panel,
#feedback-panel,
#legal-panel,
#stuff-panel {
  background: var(--pg-veil) !important;
  backdrop-filter: blur(10px) saturate(1.05) brightness(1.0);
  -webkit-backdrop-filter: blur(10px) saturate(1.05) brightness(1.0);
}

/* ============================ 2. CROIX + BOUTONS COMMUNS ============================ */
/* Croix de fermeture : pastille parchemin + encre, grande cible tactile (≥ 42px),
   lisible sur fond clair COMME sur voile sombre. Rouge seulement au survol. */
#options-panel .panel-x,
#tutorial-panel .panel-x,
#login-panel .panel-x,
#quests-panel .panel-x,
#feedback-panel .panel-x,
#legal-panel .panel-x,
#stuff-panel .panel-x {
  width: 42px; height: 42px; font-size: 20px;
  color: var(--pg-ink) !important;
  background: linear-gradient(180deg, #fffaf0, #f1e5c8) !important;
  border: 1px solid var(--pg-border-strong) !important;
  box-shadow: 0 4px 12px rgba(30, 20, 8, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}
#options-panel .panel-x:hover,
#tutorial-panel .panel-x:hover,
#login-panel .panel-x:hover,
#quests-panel .panel-x:hover,
#feedback-panel .panel-x:hover,
#legal-panel .panel-x:hover,
#stuff-panel .panel-x:hover {
  background: rgba(214, 71, 63, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  color: #fff !important;
}

/* Boutons secondaires DANS les popups de menu (Fermer, Installer, Envoyer…) :
   parchemin + encre (le verre sombre de glass-ui devient illisible sur fond clair). */
#options-panel .btn-secondary,
#tutorial-panel .btn-secondary,
#quests-panel .btn-secondary,
#feedback-panel .btn-secondary,
#legal-panel .btn-secondary,
#stuff-panel .btn-secondary {
  background: linear-gradient(180deg, #fffaf0, #efe3c6);
  border: 1px solid var(--pg-border-strong);
  color: var(--pg-ink);
  font-weight: 800;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 3px 10px rgba(96, 72, 34, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
#options-panel .btn-secondary:hover,
#tutorial-panel .btn-secondary:hover,
#quests-panel .btn-secondary:hover,
#feedback-panel .btn-secondary:hover,
#legal-panel .btn-secondary:hover {
  border-color: rgba(122, 92, 48, 0.85);
  color: var(--pg-ink);
}

/* ============================ 3. OPTIONS — LISIBILITÉ (A2 / #29) ============================ */
/* Le panneau options n'a PAS de boîte : son contenu vit directement sur l'overlay.
   On peint donc l'overlay lui-même en parchemin quasi opaque → contraste garanti. */
#options-panel {
  background:
    radial-gradient(120% 42% at 50% -6%, rgba(255, 226, 168, 0.55), rgba(255, 226, 168, 0) 60%),
    linear-gradient(180deg, rgba(249, 241, 222, 0.98), rgba(240, 227, 196, 0.98)) !important;
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  color: var(--pg-ink);
}
#options-panel h2 {
  color: var(--pg-ink) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}
#options-panel .opt-lead { color: var(--pg-ink-soft) !important; font-weight: 600; text-shadow: none; }

/* Onglets (Réglages / Comment jouer / Capitaines — injectés par ui.js) */
#options-panel #opt-tabs .opt-tab {
  color: var(--pg-ink-soft);
  background: linear-gradient(180deg, #fffaf0, #f0e3c6);
  border: 1px solid var(--pg-border);
  font-weight: 800;
}
#options-panel #opt-tabs .opt-tab:hover { border-color: var(--pg-border-strong); color: var(--pg-ink); }
#options-panel #opt-tabs .opt-tab.selected {
  color: var(--pg-cta-gold-ink);
  background: var(--pg-cta-gold);
  border-color: rgba(168, 120, 34, 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 3px 10px rgba(200, 148, 44, 0.3);
}

/* Cartes de réglage : crème, en-tête encre, icône or profond. */
#options-panel .opt-card {
  background: var(--pg-card-bg) !important;
  border: 1px solid var(--pg-border) !important;
  border-radius: var(--pg-radius-sm) !important;
  box-shadow: var(--pg-shadow-card) !important;
}
#options-panel .opt-card h4 { color: var(--pg-ink) !important; font-weight: 900; }
#options-panel .opt-ic {
  background: linear-gradient(180deg, #fdeeba, #f3da8c) !important;
  border: 1px solid rgba(170, 128, 48, 0.5) !important;
  color: var(--pg-gold-deep) !important;
}
/* Libellés : GROS texte tactile, encre franche (fini le vert olive sur fond sombre). */
#options-panel .opt-card label { color: var(--pg-ink) !important; font-size: 14.5px; font-weight: 600; }
#options-panel .opt-note { color: var(--pg-muted) !important; font-size: 12px; line-height: 1.5; }
#options-panel .opt-note b { color: var(--pg-ink-soft); }
#options-panel .opt-radio-txt b { color: var(--pg-ink); }
#options-panel .opt-radio-txt small { color: var(--pg-muted); }

/* Curseurs : rail sauge→or, pastille crème bord or (repris de style.css, re-imposé
   par-dessus le cyan de glass-ui). */
#options-panel .opt-card label input[type="range"] {
  background: linear-gradient(90deg, var(--pg-sage), var(--pg-gold)) !important;
  box-shadow: inset 0 1px 2px rgba(96, 72, 34, 0.3);
  height: 8px;
}
#options-panel .opt-card label input[type="range"]::-webkit-slider-thumb {
  width: 22px; height: 22px;
  background: #fffdf6; border: 2px solid #c9942c;
  box-shadow: 0 2px 6px rgba(96, 72, 34, 0.4);
}
#options-panel .opt-card label input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  background: #fffdf6; border: 2px solid #c9942c;
  box-shadow: 0 2px 6px rgba(96, 72, 34, 0.4);
}
#options-panel .opt-card label input[type="range"]:focus-visible { box-shadow: 0 0 0 3px rgba(201, 148, 44, 0.35); }

/* Menu déroulant (niveau de détail) : champ crème, caret brun (le caret gris clair
   de style.css disparaissait sur fond clair). */
#options-panel .opt-card label select {
  background-color: var(--pg-field) !important;
  border: 1px solid var(--pg-border-strong) !important;
  color: var(--pg-ink) !important;
  font-size: 13.5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236d5c40' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
#options-panel .opt-card label select:hover { border-color: rgba(122, 92, 48, 0.85) !important; }
#options-panel .opt-card label select:focus {
  border-color: #c9942c !important;
  box-shadow: 0 0 0 2px rgba(201, 148, 44, 0.3) !important;
}

/* Cases à cocher : crème, coche encre sur remplissage sauge→or. Cible ≥ 24px. */
#options-panel .opt-card label.chk input[type="checkbox"] {
  width: 24px; height: 24px;
  background: var(--pg-field) !important;
  border: 2px solid rgba(122, 92, 48, 0.55) !important;
}
#options-panel .opt-card label.chk input[type="checkbox"]:hover { border-color: rgba(122, 92, 48, 0.85) !important; }
#options-panel .opt-card label.chk input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #a9c98b, var(--pg-gold)) !important;
  border-color: #c9942c !important;
}
#options-panel .opt-card label.chk input[type="checkbox"]:checked::after { border-color: #2c2210 !important; }
#options-panel .opt-card label.chk input[type="checkbox"]:focus-visible { outline: 2px solid #c9942c !important; outline-offset: 2px; }

/* Interrupteur (mode radio) : rail crème creusé, actif sauge→or. */
#options-panel .opt-switch {
  background: linear-gradient(180deg, #efe3c6, #e5d6b2) !important;
  box-shadow: inset 0 1px 3px rgba(96, 72, 34, 0.35) !important;
  border: 1px solid var(--pg-border);
}
#options-panel .opt-switch::after { background: #fffdf6; box-shadow: 0 1px 4px rgba(96, 72, 34, 0.4); }
#options-panel .opt-switch:checked { background: linear-gradient(90deg, #a9c98b, var(--pg-gold)) !important; border-color: #c9942c; }
#options-panel .opt-switch:focus-visible { outline: 2px solid #c9942c !important; outline-offset: 2px; }
#options-panel .opt-radio-row {
  background: linear-gradient(180deg, #fffcf4, #f4e9cf) !important;
  border: 1px solid var(--pg-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

/* Sélecteur de piste musicale : champ + liste crème, sélection dorée, écoute sauge. */
#options-panel .opt-track-toggle {
  background: var(--pg-field) !important;
  border: 1px solid var(--pg-border-strong) !important;
  color: var(--pg-ink) !important;
}
#options-panel .opt-track-toggle:hover { border-color: rgba(122, 92, 48, 0.85) !important; }
#options-panel .opt-track-toggle[aria-expanded="true"] { border-color: #c9942c !important; box-shadow: 0 0 0 2px rgba(201, 148, 44, 0.3) !important; }
#options-panel .opt-track-toggle-lbl,
#options-panel .opt-track-toggle-caret { color: var(--pg-muted) !important; }
#options-panel .opt-track-toggle-cur { color: var(--pg-gold-deep) !important; font-weight: 800; }
#options-panel .opt-track-pop {
  background: #fdf6e6 !important;
  border: 1px solid var(--pg-border-strong) !important;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 18px 44px rgba(30, 20, 8, 0.35) !important;
}
#options-panel .opt-track {
  background: var(--pg-card-bg) !important;
  border: 1px solid var(--pg-border) !important;
}
#options-panel .opt-track:hover { border-color: rgba(122, 92, 48, 0.8) !important; }
#options-panel .opt-track-name { color: var(--pg-ink) !important; }
#options-panel .opt-track.selected {
  border-color: #c9942c !important;
  background: linear-gradient(180deg, #fdf0c8, #f7e3a6) !important;
}
#options-panel .opt-track.selected .opt-track-name { color: var(--pg-gold-deep) !important; }
#options-panel .opt-track-listen {
  background: #eef3dd !important;
  border: 1px solid rgba(110, 140, 84, 0.55) !important;
  color: var(--pg-sage-deep) !important;
  font-weight: 700;
}
#options-panel .opt-track-listen:hover { border-color: rgba(94, 128, 66, 0.85) !important; color: #24391a !important; }
#options-panel .opt-track-listen.is-playing {
  background: #f4d9c2 !important; color: #7a341f !important; border-color: #c8794f !important;
}

/* Meilleurs capitaines */
#options-panel .opt-captains-list { color: var(--pg-ink-soft); }
#options-panel .opt-captains-list li { border-bottom: 1px solid rgba(122, 92, 48, 0.2) !important; }
#options-panel .opt-captains-list b { color: var(--pg-gold-deep) !important; }

/* Accès développeur + version : discrets mais lisibles. */
#options-panel .dev-toggle { color: var(--pg-muted); }
#options-panel .dev-toggle:hover { color: var(--pg-ink); }
#options-panel .dev-pass {
  background: var(--pg-field); border: 1px solid var(--pg-border-strong);
  color: var(--pg-ink); border-radius: 8px;
}
#options-panel .dev-pass-ok {
  background: linear-gradient(180deg, #fffaf0, #efe3c6);
  border: 1px solid var(--pg-border-strong); color: var(--pg-ink); border-radius: 8px;
}
#options-panel .dev-status { color: var(--pg-muted); }
#options-panel #opt-version { color: var(--pg-muted); opacity: 1 !important; }

/* ============================ 4. TUTORIEL ============================ */
#tutorial-box {
  background: var(--pg-sheet) !important;
  border: 1px solid var(--pg-border-strong) !important;
  border-radius: var(--pg-radius) !important;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: var(--pg-shadow-sheet) !important;
  color: var(--pg-ink);
}
#tutorial-box h2 { color: var(--pg-ink) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important; }
#tutorial-panel .tuto-lead { color: var(--pg-ink-soft) !important; }
#tuto-tabs { border-bottom: 1px solid var(--pg-border) !important; }
#tutorial-panel .tuto-tab {
  color: var(--pg-ink-soft) !important;
  background: linear-gradient(180deg, #fffaf0, #f0e3c6) !important;
  border: 1px solid var(--pg-border) !important;
}
#tutorial-panel .tuto-tab:hover { border-color: var(--pg-border-strong) !important; color: var(--pg-ink) !important; }
#tutorial-panel .tuto-tab.selected {
  color: var(--pg-cta-gold-ink) !important;
  background: var(--pg-cta-gold) !important;
  border-color: rgba(168, 120, 34, 0.75) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 3px 10px rgba(200, 148, 44, 0.3) !important;
}
/* contenu : cartes crème, encre lisible */
#tutorial-panel .tuto-section {
  background: var(--pg-card-bg) !important;
  border: 1px solid var(--pg-border) !important;
  border-left: 3px solid var(--pg-gold) !important;
  box-shadow: var(--pg-shadow-card) !important;
}
#tutorial-panel .tuto-section h4 { color: var(--pg-gold-deep) !important; }
#tutorial-panel .tuto-section p,
#tutorial-panel .tuto-section ul { color: var(--pg-ink-soft) !important; }
#tutorial-panel .tuto-section b { color: var(--pg-ink); }
#tutorial-panel .tuto-keys td { border-color: rgba(122, 92, 48, 0.25) !important; color: var(--pg-ink) !important; }
#tutorial-panel .tuto-keys td:last-child { color: var(--pg-ink-soft) !important; }
#tutorial-panel .tuto-section.tuto-tip { border-left-color: var(--pg-sage) !important; }
#tutorial-panel .tuto-section.tuto-tip h4 { color: var(--pg-sage-deep) !important; }
#tutorial-panel .tuto-sections::-webkit-scrollbar-thumb { background: rgba(122, 92, 48, 0.42) !important; }
/* « Fermer » (action principale) : accent OR sur parchemin — remplace l'accent violet
   sombre de style.css (même sélecteur, feuille plus tardive → prime). */
#tutorial-panel .tuto-actions #btn-close-tutorial {
  color: var(--pg-cta-gold-ink);
  border-color: rgba(168, 120, 34, 0.75);
  background: var(--pg-cta-gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 3px 10px rgba(200, 148, 44, 0.3);
}

/* ============================ 5. QUÊTES / CONTACT / LÉGAL / LOGIN ============================ */
/* --- Quêtes --- */
#quests-box {
  background: var(--pg-sheet) !important;
  border: 1px solid var(--pg-border-strong) !important;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: var(--pg-shadow-sheet) !important;
  color: var(--pg-ink);
}
#quests-box h2 { color: var(--pg-ink) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important; }
#quests-box .quests-lead { color: var(--pg-ink-soft) !important; }
#quests-box .quest-row {
  background: var(--pg-card-bg) !important;
  border: 1px solid var(--pg-border) !important;
}
#quests-box .quest-row.active { border-color: rgba(201, 148, 44, 0.65) !important; }
#quests-box .quest-row.done { opacity: 0.78; border-color: rgba(110, 150, 80, 0.55) !important; }
#quests-box .quest-name { color: var(--pg-ink) !important; }
#quests-box .quest-desc { color: var(--pg-muted) !important; }
#quests-box .quest-bar { background: rgba(122, 92, 48, 0.18) !important; }
#quests-box .quest-prog { color: var(--pg-gold-deep) !important; }
#quests-box .quest-ok { color: var(--pg-sage-deep) !important; }
#quests-box .quest-xp { color: var(--pg-sage-deep) !important; }
#quests-box .quest-howto { color: var(--pg-ink-soft) !important; }
#quests-box .quest-howto b { color: var(--pg-gold-deep) !important; }
#quests-box .quest-howto-reward { color: var(--pg-sage-deep) !important; }
#quests-box .quest-info {
  border: 1px solid rgba(122, 92, 48, 0.55) !important;
  background: rgba(233, 185, 73, 0.18) !important;
  color: var(--pg-ink-soft) !important;
}
#quests-box .quest-info.open { background: var(--pg-gold) !important; border-color: var(--pg-gold) !important; color: #2c2210 !important; }

/* onglets Quêtes / Titres de prestige : pilules parchemin (l'ardoise sombre de style.css
   devenait un corps étranger sur la feuille claire). */
#quests-box .quests-tab {
  color: var(--pg-ink-soft) !important;
  background: linear-gradient(180deg, #fffaf0, #f0e3c6) !important;
  border: 1px solid var(--pg-border) !important;
}
#quests-box .quests-tab:hover { border-color: var(--pg-border-strong) !important; color: var(--pg-ink) !important; }
#quests-box .quests-tab.selected {
  color: var(--pg-cta-gold-ink) !important;
  background: var(--pg-cta-gold) !important;
  border-color: rgba(168, 120, 34, 0.75) !important;
}

/* --- Contact / feedback --- */
#feedback-box {
  background: var(--pg-sheet) !important;
  border: 1px solid var(--pg-border-strong) !important;
  box-shadow: var(--pg-shadow-sheet) !important;
  color: var(--pg-ink);
}
#feedback-box h2 { color: var(--pg-ink) !important; }
#feedback-box .fb-lead { color: var(--pg-ink-soft) !important; }
#feedback-box .fb-lead b { color: var(--pg-gold-deep) !important; }
#feedback-box .fb-chip {
  color: var(--pg-ink-soft) !important;
  background: var(--pg-card) !important;
  border: 1px dashed var(--pg-border-strong) !important;
}
#feedback-box .fb-type {
  color: var(--pg-ink-soft) !important;
  background: linear-gradient(180deg, #fffaf0, #f0e3c6) !important;
  border: 1px solid var(--pg-border) !important;
}
#feedback-box .fb-type:hover { border-color: var(--pg-border-strong) !important; color: var(--pg-ink) !important; }
#feedback-box .fb-type.selected {
  color: var(--pg-cta-gold-ink) !important;
  background: var(--pg-cta-gold) !important;
  border-color: rgba(168, 120, 34, 0.75) !important;
}
#feedback-box .fb-field-lbl { color: var(--pg-ink) !important; }
#feedback-box .fb-optional { color: var(--pg-muted) !important; }
#feedback-box #fb-message,
#feedback-box #fb-contact {
  color: var(--pg-ink) !important;
  background: var(--pg-field) !important;
  border: 1px solid var(--pg-border-strong) !important;
}
#feedback-box #fb-message:focus,
#feedback-box #fb-contact:focus { border-color: #c9942c !important; }
#feedback-box #fb-message::placeholder,
#feedback-box #fb-contact::placeholder { color: var(--pg-muted) !important; }
#feedback-box .fb-count, #feedback-box .fb-note { color: var(--pg-muted) !important; }
#feedback-box #fb-status.ok { color: var(--pg-sage-deep) !important; }
#feedback-box #fb-status.err { color: var(--pg-danger) !important; }

/* --- Informations légales --- */
#legal-box {
  background: var(--pg-sheet) !important;
  border: 1px solid var(--pg-border-strong) !important;
  box-shadow: var(--pg-shadow-sheet) !important;
  color: var(--pg-ink);
}
#legal-box h2 { color: var(--pg-ink) !important; }
#legal-box .legal-lead { color: var(--pg-ink-soft) !important; }
#legal-tabs { border-bottom: 1px solid var(--pg-border) !important; }
#legal-box .legal-tab {
  color: var(--pg-ink-soft) !important;
  background: linear-gradient(180deg, #fffaf0, #f0e3c6) !important;
  border: 1px solid var(--pg-border) !important;
}
#legal-box .legal-tab:hover { border-color: var(--pg-border-strong) !important; color: var(--pg-ink) !important; }
#legal-box .legal-tab.selected {
  color: var(--pg-cta-gold-ink) !important;
  background: var(--pg-cta-gold) !important;
  border-color: rgba(168, 120, 34, 0.75) !important;
}
#legal-box .legal-section h4 { color: var(--pg-gold-deep) !important; }
#legal-box .legal-section p,
#legal-box .legal-credits { color: var(--pg-ink-soft) !important; }
#legal-box .legal-section p b,
#legal-box .legal-credits b { color: var(--pg-ink) !important; }
#legal-box .legal-fineprint { color: var(--pg-muted) !important; }

/* --- Login --- */
#login-box {
  background: var(--pg-sheet) !important;
  border: 1px solid var(--pg-border-strong) !important;
  border-radius: var(--pg-radius) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: var(--pg-shadow-sheet) !important;
  color: var(--pg-ink);
}
#login-box h2, #login-box #login-title { color: var(--pg-ink) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important; }
#login-box .login-lead { color: var(--pg-ink-soft) !important; }
#login-box .login-lead b { color: var(--pg-ink) !important; }
#login-box .login-note { color: var(--pg-muted) !important; }
#login-box .login-perks li { color: var(--pg-ink-soft) !important; }
#login-box .login-perks b { color: var(--pg-ink) !important; }
#login-box .login-perk-ic { color: var(--pg-sage-deep) !important; }

/* ============================ 6. MODALE COFFRE ============================ */
.chest-modal-backdrop {
  background: var(--pg-veil) !important;
  backdrop-filter: blur(9px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(9px) saturate(1.05) !important;
}
.chest-modal-box {
  background:
    radial-gradient(120% 60% at 50% -8%, rgba(255, 216, 130, 0.55), rgba(255, 216, 130, 0) 60%),
    linear-gradient(180deg, #f9f1de, #f2e5c6) !important;
  border: 1px solid rgba(170, 128, 48, 0.6) !important;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: var(--pg-shadow-sheet), 0 0 26px rgba(233, 185, 73, 0.2) !important;
  color: var(--pg-ink);
}
.chest-modal-box h3, .chest-modal-box h2 { color: var(--pg-ink) !important; }
.chest-modal-x {
  background: linear-gradient(180deg, #fffaf0, #f1e5c8) !important;
  border: 1px solid var(--pg-border-strong) !important;
  color: var(--pg-ink) !important;
}

/* ============================ 7. TIENT SANS SCROLL (A5 / #42) ============================ */
/* Règle commune : les BOÎTES des popups de menu sont bornées à la hauteur visible
   (dvh + safe-area) et leur CONTENU défile en interne — l'écran, lui, ne défile pas. */
#tutorial-box, #legal-box, #feedback-box, #quests-box, #login-box {
  max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
/* le scroller interne de chaque boîte est déjà en place (tuto-sections, legal-sections,
   quests-list, feedback-box lui-même) — on fiabilise seulement le comportement : */
.tuto-sections, .legal-sections, .quests-list {
  overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(122, 92, 48, 0.5) transparent;
}

/* Cibles tactiles ≥ 44px dans les popups (boutons d'action + onglets). */
body.vtouch #options-panel .opt-track-toggle,
body.vtouch #options-panel .btn-secondary,
body.vtouch #tutorial-panel .tuto-tab,
body.vtouch #legal-box .legal-tab,
body.vtouch #feedback-box .fb-type,
body.vtouch #quests-panel .btn-secondary { min-height: 44px; }

/* PORTRAIT mobile : options en 1 colonne, cartes pleine largeur, padding réduit. */
@media (max-width: 640px) {
  #options-panel { padding-top: max(10px, env(safe-area-inset-top)); }
  #options-panel #options-grid { grid-template-columns: 1fr; gap: 12px; }
  #options-panel .opt-card { padding: 14px 15px; }
  #options-panel h2 { font-size: 22px; }
  #tutorial-box, #legal-box, #feedback-box, #quests-box {
    width: calc(100vw - 16px);
    padding: 14px 14px;
  }
}

/* PAYSAGE court (téléphone à l'horizontale) : boîtes bord à bord en hauteur,
   en-têtes compactés — tout tient, le corps défile en interne. */
@media (orientation: landscape) and (max-height: 560px) {
  #options-panel { padding-top: 8px; }
  #options-panel h2 { font-size: 19px; margin-bottom: 2px; }
  #options-panel .opt-lead { margin: 0 auto 8px; font-size: 12px; }
  #options-panel #options-grid { gap: 10px; }
  #options-panel .opt-card { padding: 11px 13px; }
  #tutorial-box, #legal-box, #feedback-box, #quests-box, #login-box {
    max-height: calc(100dvh - 12px);
    padding: 12px 16px;
  }
  #tutorial-box h2, #legal-box h2, #feedback-box h2, #quests-box h2 { font-size: 19px; }
  #tuto-tabs, #legal-tabs { margin-bottom: 8px; padding-bottom: 8px; }
}

/* ============================================================================================
   PARAMÈTRES EN PAYSAGE TÉLÉPHONE — proportions (2026-07-13). Mesuré à 900×420 / 667×375 (établi) :
   la grille `repeat(auto-fit, minmax(248px,1fr))` ÉTIRAIT chaque carte à la hauteur de la plus haute
   de sa rangée → des cartes courtes (Audio, Streamer, Application) devenaient d'immenses boîtes à
   moitié vides, et les longues `.opt-note` (celle de la carte Mobile faisait 378 px à elle seule)
   poussaient le panneau à ~1170 px de contenu → ~1030 px de défilement (2,5 écrans) et un rendu
   « mal proportionné ». Trois corrections, paysage court UNIQUEMENT (portrait/desktop/tablette
   inchangés — la grille normale y a la place) :
     1) MASONRY : la grille passe en colonnes CSS (`column-width`) → les cartes s'empaquettent
        verticalement à leur hauteur RÉELLE, plus d'étirement ni de trous (contenu ~360 px au lieu
        de ~1170 → défilement ~190 px, < 0,5 écran). `break-inside: avoid` = aucune carte coupée.
     2) NOTES d'aide (.opt-note) masquées : ce sont des paragraphes explicatifs longs ; les libellés
        des réglages se suffisent sur un écran compact (le détail reste en portrait / desktop).
     3) SELECTS (« Niveau de détail ») empilés SOUS leur libellé + `max-width` levé : dans une colonne
        étroite le `max-width:58%` (style.css) tronquait « Automatique (recommandé) » → « Automatiqu ».
   ============================================================================================ */
@media (orientation: landscape) and (max-height: 560px) {
  #options-panel { padding-top: 6px; }
  #options-panel h2 { font-size: 16px; }
  #options-panel .opt-lead { display: none; }

  /* 1 — masonry : empaquetage vertical des cartes à leur hauteur réelle (fin de l'étirement en grille). */
  #options-panel #options-grid {
    display: block;
    column-width: 210px; column-gap: 8px;
    width: min(1180px, 96vw);
  }
  #options-panel .opt-card {
    break-inside: avoid; -webkit-column-break-inside: avoid;
    display: inline-block; width: 100%; vertical-align: top;
    margin: 0 0 8px; padding: 8px 11px;
  }
  #options-panel .opt-card h4 { margin: 7px 0 5px; font-size: 11px; }
  #options-panel .opt-card h4:first-child { margin-top: 0; }
  #options-panel .opt-card label { margin: 4px 0; font-size: 12.5px; line-height: 1.25; }

  /* 2 — notes d'aide longues masquées (le détail vit en portrait / desktop). */
  #options-panel .opt-card .opt-note { display: none; }

  /* 3 — selects empilés sous leur libellé (sinon tronqués dans la colonne étroite). */
  #options-panel .opt-card label:has(select) { flex-direction: column; align-items: stretch; gap: 4px; }
  #options-panel .opt-card label:has(select) select { max-width: none; width: 100%; min-width: 0; }
}

/* Mouvement réduit. */
@media (prefers-reduced-motion: reduce) {
  #options-panel .opt-track,
  #tutorial-panel .tuto-tab,
  #legal-box .legal-tab,
  #feedback-box .fb-type { transition: none !important; }
}

/* ============================ 8. MES ACHATS (#stuff-panel) — carte + responsive ============================
   Le panneau n'avait AUCUN thème (absent des listes ci-dessus) : son contenu flottait, transparent,
   par-dessus l'accueil (illisible). Il reçoit désormais le voile commun + une vraie carte-feuille,
   avec le scroll À L'INTÉRIEUR de la carte (et non sur l'overlay). */
#stuff-panel { padding: 0 !important; align-items: center; justify-content: center; overflow: hidden; }
#stuff-box {
  position: relative;
  width: min(560px, calc(100vw - 28px));
  max-height: min(86vh, calc(100dvh - 96px));
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: var(--pg-sheet);
  border: 1.5px solid var(--pg-border-strong);
  border-radius: var(--pg-radius);
  box-shadow: var(--pg-shadow-sheet);
  padding: 22px 20px 18px;
  color: var(--pg-ink);
}
#stuff-box h2 { color: var(--pg-ink); text-align: center; }
#stuff-box h3 { color: var(--pg-gold-deep); }
#stuff-panel .inv-reserve {
  background: var(--pg-card-bg); border: 1px solid var(--pg-border);
  color: var(--pg-ink); box-shadow: var(--pg-shadow-card);
}
#stuff-panel .inv-reserve-ic { color: var(--pg-gold-deep); }
#stuff-panel .inv-line { color: var(--pg-ink); }
#stuff-panel .inv-ok { color: var(--pg-sage-deep); }
#stuff-panel .inv-off { color: var(--pg-gold-deep); }
#stuff-panel .inv-sub, #stuff-panel .inv-hint,
#stuff-panel .inv-empty, #stuff-panel .inv-mut,
#stuff-panel .inv-boost-desc, #stuff-panel .inv-boost-foot { color: var(--pg-muted); }
#stuff-panel .inv-acc { color: var(--pg-sage-deep); }
#stuff-panel .inv-boost {
  background: var(--pg-card-bg); border: 1px solid var(--pg-border);
  box-shadow: var(--pg-shadow-card); color: var(--pg-ink);
}
#stuff-panel .inv-boost--on { border-color: var(--pg-border-strong); }
#stuff-panel .inv-step {
  background: linear-gradient(180deg, #fffaf0, #efe3c6);
  border: 1px solid var(--pg-border-strong); color: var(--pg-ink);
  min-width: 34px; min-height: 34px;
}
#stuff-panel .inv-step:hover:not([disabled]) { border-color: var(--pg-ink-soft); }
#stuff-panel .inv-qty { color: var(--pg-ink); }
#stuff-panel .inv-summary { border-top: 1px solid var(--pg-border); }
#stuff-panel .inv-chip {
  background: var(--pg-cta-gold); border: 1px solid var(--pg-border-strong); color: var(--pg-cta-gold-ink);
}
#stuff-box #btn-close-stuff { display: block; width: 100%; margin-top: 10px; }

/* Petits écrans / paysage mobile : carte plus compacte, texte qui ne déborde jamais. */
@media (max-width: 560px) {
  #stuff-box { padding: 16px 13px 14px; border-radius: 14px; }
  #stuff-box h2 { font-size: 19px; }
  #stuff-panel .inv-boost { grid-template-columns: 1fr auto; padding: 9px 10px; }
  #stuff-panel .inv-boost-txt b { font-size: 13.5px; }
  #stuff-panel .inv-boost-desc { font-size: 11.5px; }
}
@media (orientation: landscape) and (max-height: 560px) {
  #stuff-box { max-height: calc(100dvh - 20px); padding: 12px 14px 12px; }
  #stuff-box h2 { font-size: 17px; margin-bottom: 8px; }
  #stuff-panel .inv-hint { display: none; }
  #stuff-panel .inv-boost { margin-bottom: 6px; padding: 7px 10px; }
}