/* =====================================================================================
   DOVION — CHARTE « SUNSET ARCADE » (2026-07-12)
   -------------------------------------------------------------------------------------
   Nouvelle identité de tout le HORS-JEU (accueil, écran de mort, boutique, paramètres,
   tuto, idée, quêtes, légal…). On quitte le parchemin clair « Ghibli » pour un
   CRÉPUSCULE CHAUD : panneaux prune-nuit, encre crème, CTA orange→corail, accents
   rose vif / or / turquoise. Objectif : jeune, punchy, « TikTok », lisible.

   MÉTHODE — le hors-jeu est piloté par 4 familles de JETONS partagés :
     --ag-*  (accueil, sur #menu)      --shg-* (boutique)
     --pg-*  (popups)                  --dth-* (écran de mort)
   On REDÉFINIT ces jetons ici (mêmes sélecteurs/scopes → gagne la cascade car chargé en
   DERNIER), puis on surcharge la poignée de surfaces qui codaient une couleur EN DUR
   (fonds crème, ombres brunes, reflets blancs) pour finir l'inversion clair→sombre.

   Chargé APRÈS accueil-ghibli.css. Fichier DÉDIÉ → aucune des feuilles claires n'est
   modifiée (réversible, et sans conflit avec les éditions concurrentes). Aucun id/classe
   touché (rendus JS intacts). prefers-reduced-motion respecté.
   ===================================================================================== */

/* ============================ PALETTE SUNSET (référence) ============================
   plum-deep #1c0f2e · plum #241338 · panel #2a1740 · card #2e1a45 · field #35204f
   ink #fff2e9 · ink-soft #edd9ec · muted #c3a7d6
   gold #ffd23f · teal #28e0c0 · coral/danger #ff6a80 · pink #ff4fd8
   CTA orange→corail #ff8a1a → #ff2e63
   =================================================================================== */

/* ============================ 1. JETONS — REDÉFINITION SOMBRE ============================ */

/* Accueil (#menu) */
#menu {
  --ag-paper: #241338; --ag-paper-2: #1c0f2e;
  --ag-card: #2e1a45; --ag-card-warm: #34204c;
  --ag-border: rgba(255, 175, 120, 0.20);
  --ag-border-strong: rgba(255, 150, 110, 0.38);
  --ag-ink: #fff2e9; --ag-ink-soft: #edd9ec; --ag-muted: #c3a7d6;
  --ag-gold-deep: #ffd23f; --ag-gold: #ffcf3f;
  --ag-sage-deep: #28e0c0; --ag-sage: #28e0c0;
  --ag-danger: #ff6a80;
  --ag-shadow-panel: 0 24px 56px rgba(6, 2, 14, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --ag-shadow-card: 0 8px 20px rgba(6, 2, 14, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* Popups (paramètres, tuto, login, quêtes, idée, légal, chest) */
#options-panel, #tutorial-panel, #login-panel, #quests-panel,
#feedback-panel, #legal-panel, #stuff-panel, .chest-modal-backdrop {
  --pg-paper: #241338; --pg-card: #2e1a45; --pg-field: #35204f;
  /* CORRECTIF CONTRASTE : --pg-card-bg (popups-ghibli) mélangeait --pg-card avec un crème EN DUR
     (#f6ecd4). Avec --pg-card repassé en prune, le dégradé finissait violet→crème + texte clair
     illisible en bas (cartes Options .opt-card/.opt-track, sections tuto, lignes de quêtes). On le
     repasse en prune plein. */
  --pg-card-bg: linear-gradient(180deg, #2e1a45, #241338);
  --pg-border: rgba(255, 175, 120, 0.20);
  --pg-border-strong: rgba(255, 150, 110, 0.38);
  --pg-ink: #fff2e9; --pg-ink-soft: #edd9ec; --pg-muted: #c3a7d6;
  --pg-gold-deep: #ffd23f; --pg-gold: #ffcf3f;
  --pg-sage-deep: #28e0c0; --pg-sage: #28e0c0;
  --pg-danger: #ff6a80;
  --pg-veil:
    radial-gradient(120% 90% at 50% 0%, rgba(60, 26, 80, 0.55), rgba(12, 6, 22, 0.72) 70%);
  --pg-sheet:
    radial-gradient(130% 70% at 50% -10%, rgba(90, 40, 110, 0.55), rgba(90, 40, 110, 0) 60%),
    linear-gradient(180deg, #33204d 0%, #241338 46%, #1c0f2e 100%);
}

/* Boutique */
#premium-panel, #dovion-shop-ov, #dovion-buy-celebrate {
  --shg-paper: #241338; --shg-paper-2: #1c0f2e;
  --shg-card: #2e1a45; --shg-card-warm: #34204c;
  --shg-border: rgba(255, 175, 120, 0.20);
  --shg-border-strong: rgba(255, 150, 110, 0.38);
  --shg-ink: #fff2e9; --shg-ink-soft: #edd9ec; --shg-muted: #c3a7d6;
  --shg-gold-deep: #ffd23f; --shg-gold: #ffcf3f;
  --shg-sage-deep: #28e0c0; --shg-sage: #28e0c0;
  --shg-danger: #ff6a80;
  --shg-shadow-card: 0 8px 20px rgba(6, 2, 14, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shg-cta-brown: linear-gradient(180deg, #d1603a, #a83a1c);
  --shg-cta-brown-ink: #fff2e9;
  --shg-cta-sage: linear-gradient(180deg, #2fe3c2, #1eb89b);
  --shg-cta-sage-ink: #06231f;
}

/* Écran de mort */
#death-screen.death-lite {
  --dth-surface: rgba(36, 19, 56, 0.96);
  --dth-surface-2: rgba(255, 255, 255, 0.06);
  --dth-border: rgba(255, 175, 120, 0.26);
  --dth-text: #fff2e9; --dth-muted: #c9aed9;
  --dth-gold: #ffd23f; --dth-danger: #ff6a80; --dth-accent: #28e0c0;
}

/* ============================ 2. STRAGGLERS COMMUNS (couleurs EN DUR) ============================
   Reflets blancs → discrets ; ombres brunes → sombres. Ciblage large mais borné au hors-jeu. */
#menu .menu-card, #menu #team-card,
#options-panel .panel-x, #tutorial-panel .panel-x, #login-panel .panel-x,
#quests-panel .panel-x, #feedback-panel .panel-x, #legal-panel .panel-x {
  /* neutralisé plus bas par des règles spécifiques ; placeholder de groupe */
}

/* ============================ 3. ACCUEIL — héro Sunset (surcharge mon bloc « tape à l'œil ») ============================ */
/* Panneau : prune-nuit avec halo coucher de soleil chaud. */
#menu #menu-main {
  background:
    radial-gradient(115% 78% at 50% -12%, rgba(255, 150, 90, 0.30), rgba(255, 150, 90, 0) 60%),
    radial-gradient(90% 55% at 50% 2%, rgba(255, 79, 216, 0.16), rgba(255, 79, 216, 0) 58%),
    linear-gradient(180deg, #33204d 0%, #241338 60%, #1c0f2e 100%) !important;
  border: 1.5px solid rgba(255, 150, 110, 0.34) !important;
  box-shadow:
    0 26px 60px rgba(6, 2, 14, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -40px 60px rgba(255, 120, 80, 0.06) !important;
}
/* Carte équipe + champs : plaques sombres. */
#menu #team-card {
  background: linear-gradient(180deg, rgba(52, 32, 76, 0.86), rgba(40, 24, 62, 0.9)) !important;
  border: 1.5px solid rgba(255, 150, 110, 0.24) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
#menu .pseudo-flag-row #pseudo-edit,
#menu .flag-open,
#menu .srv-toggle {
  background: linear-gradient(180deg, #3a2358, #2b1942) !important;
  border: 1.5px solid rgba(255, 150, 110, 0.30) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 8px rgba(6, 2, 14, 0.35) !important;
  color: #fff2e9 !important;
}
#menu #name-input { color: #fff2e9 !important; }
#menu #name-input::placeholder { color: #b79ccb !important; }
#menu .pseudo-flag-row #pseudo-edit:focus-within {
  border-color: #ff8a1a !important;
  box-shadow: 0 0 0 3px rgba(255, 138, 26, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
#menu #flag-open-name { color: #fff2e9 !important; }
#menu .flag-open-txt b, #menu .srv-lbl { color: #c3a7d6 !important; }
#menu .srv-val { color: #ffd23f !important; }
/* CTA orange→corail (identique à la charte). */
#menu #btn-play {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.05) 44%, transparent 60%),
    linear-gradient(150deg, #ff8a1a 0%, #ff5a2e 48%, #ff2e63 100%) !important;
  color: #fff !important; border: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -3px 6px rgba(150, 20, 40, 0.4),
    0 16px 40px rgba(255, 46, 99, 0.58), 0 0 0 0 rgba(255, 150, 40, 0.7) !important;
  animation: tkPlayPulse 1.8s ease-in-out infinite;
}
/* MISE EN AVANT (demande Simon) : pulse plus MARQUÉ — anneau plus large + glow plus vif → le CTA
   « Prendre la mer » attire nettement l'œil. Box-shadow seul (aucun transform) → zéro conflit avec le
   hover (lift/brightness). */
@keyframes tkPlayPulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 6px rgba(150,20,40,.4), 0 16px 40px rgba(255,46,99,.58), 0 0 0 0 rgba(255,150,40,.7); }
  55% { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 6px rgba(150,20,40,.4), 0 22px 52px rgba(255,46,99,.7), 0 0 0 20px rgba(255,150,40,0); }
}
/* coffre + howto + point live */
#menu .menu-chest-badge {
  background: linear-gradient(180deg, #3a2358, #2b1942) !important;
  border: 1.5px solid rgba(255, 210, 63, 0.6) !important;
}
#menu .menu-howto-step {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 175, 120, 0.22) !important;
  color: #e9d6ea !important;
}
#menu .srv-ic { background: #38e07a !important; box-shadow: 0 0 0 3px rgba(56,224,122,.2), 0 0 8px rgba(56,224,122,.7) !important; }
/* QUÊTES DÉSACTIVÉES (META.QUESTS_DISABLED) : la carte « Missions & quêtes » n'a plus de contenu (hors
   Coffre du jour) → son cadre restait VIDE sur l'accueil. On retire tout son habillage ; le #menu-daily
   (Coffre du jour) garde son propre style quand il y a une récompense. Classe posée par ui.js. */
#menu-missions-card.quests-off {
  background: none !important; border: none !important; box-shadow: none !important;
  padding: 0 !important; min-height: 0 !important; margin-top: 0 !important;
}

/* ---- CORRECTION CHEVAUCHEMENT (v2) : le coin est ANCRÉ EN HAUT À DROITE (accueil = panneau
   centré → coin dans la mer, jamais sur le contenu). L'ancien calage JS sur #menu-side le posait
   sur le bas de #menu-main (recouvrait « Comment jouer ») ; positionCorner ne pose plus d'inline. ---- */
@media (min-width: 941px) {
  #menu #menu-corner {
    position: absolute !important; top: 16px !important; right: 20px !important;
    left: auto !important; width: auto !important; margin: 0 !important;
    justify-content: flex-end !important;
  }
}

/* « Affiché mais vide » (colonne droite #menu-side sans carte visible) : masquée par JS
   (UI.refreshMenu) car les cartes sont cachées par des règles CSS, non par du style inline —
   un sélecteur :has([style]) ne pouvait pas les détecter de façon fiable. */

/* Menu serveur déroulant : plaque sombre. */
#menu .srv-toggle:hover { border-color: #ffb03a !important; }
#menu .srv-menu {
  background: linear-gradient(180deg, #33204d, #241338) !important;
  border: 1.5px solid rgba(255, 150, 110, 0.4) !important;
  box-shadow: 0 24px 54px rgba(6, 2, 14, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
#menu .srv-opt { color: #edd9ec !important; }
#menu .srv-opt-name { color: #fff2e9 !important; }
#menu .srv-opt.is-selected {
  background: linear-gradient(180deg, rgba(255, 138, 26, 0.22), rgba(255, 46, 99, 0.14)) !important;
  border-color: rgba(255, 180, 90, 0.7) !important;
}

/* Boutons du coin : Login turquoise vif, Shop or, icônes sombres. */
#menu-corner .menu-corner-btn {
  background: linear-gradient(180deg, #3a2358, #2a1740) !important;
  border: 1.5px solid rgba(255, 175, 120, 0.3) !important;
  color: #fff2e9 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 12px rgba(6, 2, 14, 0.4) !important;
}
#menu-corner .menu-corner-btn.btn-login:not(.is-connected) {
  background: linear-gradient(180deg, #34e6c8, #1fbfa2) !important;
  border-color: rgba(120, 255, 230, 0.6) !important;
  color: #06231f !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 16px rgba(40, 224, 192, 0.45) !important;
}
#menu-corner .menu-corner-btn.btn-shop {
  background: linear-gradient(180deg, #ffd23f, #f0a821) !important;
  border-color: rgba(255, 210, 90, 0.7) !important;
}
#menu-corner .menu-corner-btn.btn-shop .btn-shop-txt { color: #3a2504 !important; }
#menu-corner .corner-icon { color: #fff2e9 !important; }

/* ============================ 4. POPUPS — stragglers ============================ */
/* Croix de fermeture + boutons secondaires codaient un fond crème en dur → plaque sombre. */
#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 {
  background: linear-gradient(180deg, #3a2358, #2a1740) !important;
  color: #edd9ec !important;
}
#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, #3a2358, #2a1740) !important;
  border: 1px solid rgba(255, 175, 120, 0.3) !important;
  color: #fff2e9 !important;
}

/* Options (paramètres) : le conteneur codait un fond crème EN DUR (pas le jeton) + onglets
   crème + ombre de titre blanche → tout en prune. */
#options-panel {
  background:
    radial-gradient(120% 42% at 50% -6%, rgba(255, 150, 90, 0.22), rgba(255, 150, 90, 0) 60%),
    linear-gradient(180deg, #33204d, #1c0f2e) !important;
}
#options-panel h2 { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4) !important; }
#options-panel #opt-tabs .opt-tab {
  background: linear-gradient(180deg, #3a2358, #2a1740) !important;
  color: #edd9ec !important;
}
/* Rangée d'option (toggle « mode radio ») + liste déroulante des pistes : crème EN DUR → prune. */
#options-panel .opt-radio-row { background: linear-gradient(180deg, #3a2358, #2b1942) !important; }
#options-panel .opt-track-pop { background: linear-gradient(180deg, #33204d, #241338) !important; }

/* Tuto : onglets crème EN DUR + ombre de titre blanche → prune. (#tutorial-box utilise déjà
   le jeton --pg-sheet, donc son fond suit.) */
#tutorial-box h2 { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4) !important; }
#tutorial-panel .tuto-tab {
  background: linear-gradient(180deg, #3a2358, #2a1740) !important;
  color: #edd9ec !important;
}

/* Login (popup de connexion) : boîte navire/verre héritée → prune, cohérente avec le reste. */
#login-box {
  background:
    radial-gradient(120% 60% at 50% -8%, rgba(255, 150, 90, 0.16), rgba(255, 150, 90, 0) 60%),
    linear-gradient(180deg, #33204d, #1c0f2e) !important;
  border: 1px solid rgba(255, 150, 110, 0.34) !important;
  box-shadow: 0 26px 70px rgba(6, 2, 14, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
#login-box h2 { color: #fff2e9 !important; }
#login-box .login-lead { color: #d8c6da !important; }
#login-box .login-lead b { color: #ffd23f !important; }
#login-box .login-note { color: #b79ccb !important; }
#login-box .login-perks li { color: #edd9ec !important; }

/* ============================ 5. ÉCRAN DE MORT — straggler ============================ */
/* Le fond de #death-box superposait des crèmes littéraux : on repasse en prune. */
#death-box {
  background:
    linear-gradient(160deg, rgba(58, 35, 88, 0.82), rgba(44, 24, 66, 0.62) 42%, rgba(36, 19, 56, 0.82)),
    radial-gradient(130% 90% at 50% -14%, rgba(255, 120, 80, 0.16), transparent 58%),
    var(--dth-surface) !important;
  box-shadow: 0 24px 60px rgba(6, 2, 14, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
#death-box h2 { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4) !important; }

/* ============================ 5b. ACCUEIL — stragglers restants ============================ */
/* Colonne droite (#menu-side) : fond crème littéral d'accueil-ghibli → prune. Vaut aussi
   pour les cartes internes (Réserve/Records/Missions) du joueur connecté. */
#menu #menu-side {
  background:
    radial-gradient(130% 60% at 50% -8%, rgba(255, 150, 90, 0.14), rgba(255, 150, 90, 0) 58%),
    linear-gradient(180deg, #2a1740, #1c0f2e) !important;
  border: 1.5px solid rgba(255, 150, 110, 0.28) !important;
  box-shadow: 0 24px 56px rgba(6, 2, 14, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
#menu .menu-card {
  background: linear-gradient(180deg, #2e1a45, #241338) !important;
  border: 1px solid rgba(255, 175, 120, 0.20) !important;
  box-shadow: 0 8px 20px rgba(6, 2, 14, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
#menu .menu-records-row .menu-rec {
  background: linear-gradient(180deg, #34204c, #2a1740) !important;
  border: 1px solid rgba(255, 175, 120, 0.20) !important;
}

/* Bouton « Voir tout » (missions & quêtes) : héritait d'un pavé CRÈME de l'ancien thème Ghibli
   (accueil-ghibli.css) → délavé et peu contrasté sur la carte sombre du thème sunset (à peine
   lisible). On le repeint en pastille OR sur fond sombre translucide : bon contraste, cohérent
   avec le thème, clairement cliquable. !important pour battre le crème d'accueil-ghibli. */
#menu .quest-see-all {
  background: rgba(255, 210, 63, 0.16) !important;
  border: 1.5px solid rgba(255, 210, 63, 0.85) !important;
  color: #ffd23f !important;
  font-weight: 800 !important;
}
#menu .quest-see-all:hover {
  background: #ffd23f !important;
  border-color: #ffd23f !important;
  color: #2a1740 !important;
}

/* Bandeau cookies (#privacy-notice) : dernière surface claire → prune chaud. */
#privacy-notice {
  background: linear-gradient(180deg, rgba(42, 23, 64, 0.98), rgba(28, 15, 46, 0.98)) !important;
  border-top: 1px solid rgba(255, 150, 110, 0.34) !important;
  box-shadow: 0 -8px 24px rgba(6, 2, 14, 0.4) !important;
}
#privacy-notice .pn-text { color: #d8c6da !important; }
#privacy-notice .pn-text b { color: #fff2e9 !important; }
#privacy-notice .pn-ic { color: #ffd23f !important; }
#privacy-notice .pn-btn--ghost {
  color: #fff2e9 !important; background: linear-gradient(180deg, #3a2358, #2a1740) !important;
  border: 1px solid rgba(255, 175, 120, 0.34) !important;
}
#privacy-notice .pn-btn--primary {
  color: #06231f !important; background: linear-gradient(180deg, #34e6c8, #1fbfa2) !important;
  border: 1px solid rgba(120, 255, 230, 0.5) !important;
}

/* Invite « Activer le son ? » (#sound-prompt) : plaque prune. */
#sound-prompt .sp-inner {
  background: linear-gradient(180deg, rgba(42, 23, 64, 0.98), rgba(28, 15, 46, 0.98)) !important;
  border: 1px solid rgba(255, 150, 110, 0.34) !important;
  color: #fff2e9 !important;
  box-shadow: 0 12px 30px rgba(6, 2, 14, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
#sound-prompt .sp-text b { color: #fff2e9 !important; }
#sound-prompt .sp-text span { color: #c3a7d6 !important; }
#sound-prompt .sp-ic { color: #3a2504 !important; background: linear-gradient(180deg, #ffd764, #e8a92b) !important; }
#sound-prompt .sp-close { color: #c3a7d6 !important; }

/* ============================ 5c. BOUTIQUE — stragglers (surfaces EN DUR) ============================
   La boutique code ~30 fonds crème littéraux (pas des jetons) → on les repasse en prune.
   CTA or/turquoise (jetons --shg-cta-*) conservés : ils claquent déjà sur le sombre. */

/* Sheets plein écran : fond, en-tête, barre d'action. */
#premium-panel {
  background:
    radial-gradient(120% 46% at 50% -6%, rgba(255, 150, 90, 0.20), rgba(255, 150, 90, 0) 60%),
    linear-gradient(180deg, #33204d 0%, #241338 40%, #1c0f2e 100%) !important;
}
#premium-panel #premium-head {
  background: linear-gradient(180deg, rgba(42, 23, 64, 0.96), rgba(28, 15, 46, 0.94)) !important;
  border-bottom: 1px solid rgba(255, 150, 110, 0.28) !important;
}
#premium-panel #premium-head h2 { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4) !important; }
#premium-panel #shop-action {
  background: linear-gradient(180deg, rgba(42, 23, 64, 0.97), rgba(28, 15, 46, 0.97)) !important;
  border-top: 1px solid rgba(255, 150, 110, 0.34) !important;
}

/* Croix + onglets. */
#premium-panel .panel-x {
  background: linear-gradient(180deg, #3a2358, #2a1740) !important;
  color: #edd9ec !important;
  box-shadow: 0 4px 12px rgba(6, 2, 14, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
#premium-panel .shop-tab {
  background: linear-gradient(180deg, #3a2358, #2a1740) !important;
  color: #edd9ec !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
#premium-panel .shop-tab.selected {
  background: var(--shg-cta-gold) !important; color: #3a2504 !important;
  border-color: rgba(255, 210, 90, 0.7) !important;
}

/* Réserve d'XP (en-tête) : plaque turquoise sombre. */
#premium-panel #shop-reserve {
  background: linear-gradient(180deg, #22424a, #172f36) !important;
  border: 1px solid rgba(40, 224, 192, 0.4) !important;
}
#premium-panel .shop-reserve-ic, #premium-panel #shop-reserve b { color: #28e0c0 !important; }

/* Cartes STANDARD → plaque prune. */
#premium-panel .premium-block,
#premium-panel .shop-item,
#premium-panel .premium-card,
#premium-panel .shop-emoji,
#premium-panel .premium-ad,
#dovion-shop-ov .ds-card,
#dovion-shop-ov .ds-pack {
  background: linear-gradient(180deg, #2e1a45, #241338) !important;
  border-color: rgba(255, 175, 120, 0.20) !important;
  box-shadow: 0 8px 20px rgba(6, 2, 14, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
#premium-panel .shop-item:hover, #premium-panel .premium-card:hover {
  background: linear-gradient(180deg, #3a2358, #2b1942) !important;
  border-color: rgba(255, 150, 110, 0.4) !important;
}

/* Cartes MISES EN AVANT (VIP / possédé / meilleur / héros / offre / bundle) → prune + liseré or. */
#premium-panel .shop-grade,
#premium-panel .shop-item.owned,
#premium-panel .shop-item.is-selected,
#premium-panel .ds-pack-card,
#premium-panel .ds-pack-card.is-best,
#premium-panel .premium-hero,
#premium-panel .bundle-card,
#premium-panel .dovion-odj {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255, 210, 63, 0.14), rgba(255, 210, 63, 0) 60%),
    linear-gradient(180deg, #352048, #28173c) !important;
  border-color: rgba(255, 200, 90, 0.42) !important;
}

/* Sous-surfaces claires (statuts, boutons désactivés, chips crème) → sombre translucide.
   Spécificité alignée sur l'original `.shop-grade .sg-*` (0,3,0) pour gagner la cascade. */
#premium-panel .shop-grade .sg-status,
#premium-panel .shop-grade .sg-xp.sg-need,
#premium-panel .shop-action-btn:disabled {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 175, 120, 0.2) !important;
  color: #c3a7d6 !important;
}
/* Chips « actif » sauge → turquoise sombre. */
#premium-panel .shop-grade .sg-badge,
#premium-panel .shop-grade .sg-st-ok {
  background: rgba(40, 224, 192, 0.16) !important; color: #28e0c0 !important;
  border-color: rgba(40, 224, 192, 0.4) !important;
}
/* Icône VIP (pastille) : garde l'or. */
#premium-panel .shop-grade .sg-ic { text-shadow: none !important; }
#dovion-shop-ov .ds-card h2 { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4) !important; }

/* ============================ 5d. PIED DE PAGE LÉGAL ============================
   Le pied de page (liens « Une idée ? Contact · CGU · RGPD · Mentions légales ») gardait
   un fond CRÈME de la feuille claire → avec l'encre passée en clair, liens blancs sur
   crème = invisibles. Et la barre était trop présente. On la rend DISCRÈTE : fond
   transparent (plus de barre), liens petits et sobres mais lisibles sur la mer (ombre
   portée), survol doré. Le joueur n'a pas à s'y attarder. */
#menu .menu-legal-footer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 3px 10px !important;
}
#menu .menu-legal-footer .legal-link {
  color: rgba(255, 248, 235, 0.72) !important;
  font-size: 11px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55) !important;
}
#menu .menu-legal-footer .legal-link:hover { color: #ffd23f !important; }
#menu .menu-legal-footer .legal-sep {
  color: rgba(255, 248, 235, 0.4) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

/* ============================ 5c-bis. CONTRASTE — segments/onglets INACTIFS & badge de rang ======
   Les segments « Idée · Contact · Bug » et les onglets légaux « Conditions · Confidentialité ·
   Mentions » gardaient un fond CRÈME (#fffaf0→#f0e3c6) hérité du thème parchemin ; avec l'encre
   passée en clair (--pg-ink-soft), le texte des états INACTIFS devenait illisible (clair sur crème).
   On repasse ces plaques inactives en prune sombre → l'encre claire ressort. L'état sélectionné/actif
   garde sa plaque dorée à encre sombre (bon contraste, inchangé). */
#feedback-box .fb-type,
#legal-box .legal-tab {
  background: linear-gradient(180deg, #35204f, #2a1840) !important;
  border: 1px solid rgba(255, 175, 120, 0.22) !important;
}
#feedback-box .fb-type:hover,
#legal-box .legal-tab:hover {
  background: linear-gradient(180deg, #3f2a5c, #33204d) !important;
  border-color: rgba(255, 150, 110, 0.45) !important;
  color: var(--pg-ink) !important;
}
/* Badge de rang « Moussaillon » (réserve d'XP) : encre or vif (--shg-gold-deep repassé clair) sur
   puce or PÂLE = illisible. On force l'encre en brun sombre (le contraste des plaques dorées). */
#premium-panel #shop-reserve-rank,
#premium-panel .shop-reserve-rank {
  color: #3a2504 !important;
}

/* ============================ 5c-ter. PILULE « OUVRIR L'ARSENAL / AMIRAUTÉ » ======================
   Demande utilisateur : la pastille d'accostage était « moche » (or plat). On la garde CTA doré (elle
   doit taper à l'œil quand on accoste) mais on l'harmonise au thème violet/or : dégradé or du thème,
   encre brun-sombre, RELIEF VERRE (liseré haut clair + creux bas chaud), halo or + ANNEAU PRUNE fin,
   ombre portée prune sombre. La pulsation est re-teintée en conséquence. */
.ship-interact {
  border: 1.5px solid rgba(255, 209, 102, 0.92) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 44%),
    linear-gradient(180deg, #ffd764, #e8a92b) !important;
  color: #3a2504 !important;
  text-shadow: 0 1px 0 rgba(255, 241, 194, 0.5) !important;
  box-shadow:
    0 10px 26px rgba(18, 7, 28, 0.55),
    0 0 22px rgba(255, 190, 70, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -7px 13px rgba(150, 90, 20, 0.24),
    0 0 0 3px rgba(90, 40, 110, 0.35) !important;
}
.ship-interact:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 44%),
    linear-gradient(180deg, #ffe291, #efb63e) !important;
  border-color: rgba(255, 228, 154, 1) !important;
}
/* Pulsation re-teintée (le dernier @keyframes du même nom l'emporte sur celui de style.css). */
@keyframes shipInteractPulse {
  0%, 100% { transform: translateX(-50%) scale(1);
    box-shadow: 0 10px 26px rgba(18,7,28,.55), 0 0 20px rgba(255,190,70,.5), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -7px 13px rgba(150,90,20,.24), 0 0 0 3px rgba(90,40,110,.35); }
  50%      { transform: translateX(-50%) scale(1.05);
    box-shadow: 0 12px 32px rgba(18,7,28,.6), 0 0 34px rgba(255,205,90,.9), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -7px 13px rgba(150,90,20,.28), 0 0 0 6px rgba(90,40,110,.42); }
}

/* ============================ 5e. BOUTIQUE — GRAND MÉNAGE ============================
   1) Sous-titres de la section « Cosmétiques » fusionnée (skins/traînées/pavillons/emojis).
   2) shop-stripe.js INJECTE au runtime des couleurs qui jurent (boutons bleus, bundles violets,
      bannière verte, ruban bleu). On les ramène toutes en palette Sunset — id + !important pour
      battre l'injection (certaines classes injectées portent !important). */

/* 1. Sous-titres discrets de « Cosmétiques ». */
#premium-panel .cosmo-sub {
  font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  color: #c3a7d6; margin: 12px 0 6px; padding-top: 10px;
  border-top: 1px solid rgba(255, 175, 120, 0.14);
}
#premium-panel .cosmo-sub:first-of-type { border-top: none; padding-top: 0; margin-top: 2px; }

/* Précision « utilisable en jeu » à côté du sous-titre Emojis — pas un simple cosmétique passif. */
#premium-panel .cosmo-sub .shop-emoji-hint {
  display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: #8fd6a8;
}

/* Badge « + N tickets » sur les packs Moyen/Gros (bonus de revanche) → pastille turquoise. */
#premium-panel .ds-pack-tickets {
  font: 800 11px/1 system-ui; color: #06231f;
  background: linear-gradient(90deg, #2fe3c2, #1eb89b);
  border-radius: 999px; padding: 4px 10px; margin: 1px 0;
  box-shadow: 0 2px 8px rgba(40, 224, 192, 0.3);
}

/* Bandeau « Offre du jour » (#dovion-odj) dans la boutique : retiré (demande Simon). */
#premium-panel #dovion-odj, #dovion-odj { display: none !important; }

/* Cartes SKINS / PAVILLONS : le badge prix/état (.premium-lock) était en encre CLAIRE (jeton
   --shg-ink-soft passé en clair) sur fond doré → illisible. On force une encre FONCÉE (le fond
   des badges est toujours clair : or/vert/gris). Et on ALIGNE tous les badges en bas de carte
   (margin-top:auto) pour que les boutons d'achat soient sur une même ligne, quelle que soit la
   longueur du nom (1 ou 2 lignes). */
#premium-panel .premium-card .premium-lock {
  color: #2c1a06 !important;
  margin-top: auto !important;
}
#premium-panel .premium-card { height: 100%; justify-content: flex-start; }

/* 2. Couleurs injectées matées → Sunset. */
/* Boutons d'achat des packs XP (injectés en bleu) → corail. */
#premium-panel .ds-pack-buy, #dovion-shop-ov .ds-pack-buy {
  background: linear-gradient(180deg, #ff8a4d, #e0431f) !important;
  color: #fff !important; box-shadow: 0 6px 14px rgba(224, 67, 31, 0.4) !important;
}
/* Ruban « populaire » des packs (injecté en bleu) → or. */
#premium-panel .ds-pack-card.is-popular .ds-pack-ribbon {
  background: linear-gradient(90deg, #ffe08a, #e0a83c) !important; color: #3a2306 !important;
}
/* Bannière « 1er achat doublé » (injectée en vert) → turquoise. */
#premium-panel .dovion-fpb {
  background: linear-gradient(90deg, #2fe3c2, #1eb89b) !important;
  color: #06231f !important; box-shadow: 0 6px 18px rgba(40, 224, 192, 0.3) !important;
}
/* Bundles (injectés en violet) → accents Sunset. */
#premium-panel .bundle-name { color: #ffd23f !important; }
#premium-panel .bundle-tag { color: #c3a7d6 !important; }
#premium-panel .bundle-buy {
  background: linear-gradient(90deg, #ff8a4d, #e0431f) !important; color: #fff !important;
}
/* Modale « Mes achats » (#dovion-shop-ov, injectée en navy) : liens + textes lisibles. */
#premium-panel .shop-hist-link { color: #c3a7d6 !important; }
#premium-panel .shop-hist-link:hover { color: #ffd23f !important; }
#dovion-shop-ov .ds-pack small { color: #b79ccb !important; }

/* ============================ 5f. ÉCRAN DE MORT — vide + contraste ============================
   Retours : (1) sans quêtes, la colonne « Bilan » laisse un GROS vide (la carte a une hauteur
   fixe de 680px et la colonne de gauche, courte, ne la remplit pas) ; (2) contraste faible sur
   les cellules de stats (fond blanc translucide littéral) et sur le bouton « Retour à l'accueil »
   (bleu clair translucide littéral) — non couverts par les jetons --dth. */

/* (1) VIDE : la carte s'adapte au contenu (fini les 680px imposés) et le bilan se CENTRE
   verticalement dans sa colonne — `safe` évite de rogner le haut si le contenu est long. */
#death-box { height: auto !important; }
#death-screen .death-recap { justify-content: safe center; }

/* (2a) CELLULES DE STATS : plaque prune nette + libellés plus clairs (valeurs déjà en or). */
#death-screen .dsg-cell {
  background: linear-gradient(180deg, #352048, #28173c) !important;
  border: 1px solid rgba(255, 175, 120, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
#death-screen .dsg-lbl { color: #d8c6da !important; }
#death-screen .dsg-val { color: #ffd23f !important; }
#death-screen .death-col-head { color: #c3a7d6 !important; }

/* (2b) BOUTON « Retour à l'accueil » : plaque prune lisible (fini le bleu clair délavé). */
#death-screen #btn-death-menu {
  background: linear-gradient(180deg, #3a2358, #2a1740) !important;
  border: 1.5px solid rgba(255, 175, 120, 0.45) !important;
  color: #fff2e9 !important;
}
#death-screen #btn-death-menu:hover {
  background: linear-gradient(180deg, #46296a, #33204d) !important;
  border-color: #ffb03a !important;
}

/* ============================ 5g. ÉCRAN DE MORT — revanche / record / partage ============================ */

/* (1) CARTES DE REVANCHE : quand le joueur n'a pas de tickets, shop-stripe.js les GRISE
   (opacity .42 + grayscale) → ternes, aucune envie de cliquer. On retire le filtre : elles
   restent vibrantes (c'est l'accroche « prends ta revanche » qui pousse à acheter des tickets). */
#death-revenge #btn-revenge:disabled,
#death-revenge #btn-crush:disabled {
  opacity: 1 !important; filter: none !important;
}

/* (2) BOUTONS « en acheter » / « doubler l'or » : trop gros + fond blanc délavé → compacts et
   lisibles (plaque prune, texte doré). */
#death-screen #btn-double-gold,
#death-revenge #btn-buy-tickets {
  padding: 8px 14px !important; font-size: 12.5px !important; font-weight: 800 !important;
  background: linear-gradient(180deg, #3a2358, #2a1740) !important;
  border: 1px solid rgba(255, 175, 120, 0.4) !important;
  color: #ffd23f !important;
}
#death-screen #btn-double-gold:hover,
#death-revenge #btn-buy-tickets:hover {
  background: linear-gradient(180deg, #46296a, #33204d) !important;
  border-color: #ffb03a !important;
}
/* PAYSAGE COURT (≤560px de haut, tous téléphones à l'horizontale) : ce bouton (padding 8px
   !important ci-dessus + margin-top:10px injecté par shop-stripe.js) débordait sous la carte de
   revanche à 390px déjà. On le compacte pour libérer la hauteur — la compaction :has() côté
   style.css resserre le reste en parallèle. Sélecteur 2 ids + !important : bat sunset ET shop-stripe. */
@media (orientation: landscape) and (max-height: 560px) {
  #death-revenge #btn-buy-tickets { padding: 5px 12px !important; font-size: 11.5px !important; margin-top: 3px !important; }
}
/* PAYSAGE TRÈS COURT (≤380px de haut) : compaction ENCORE plus serrée du bouton (placée APRÈS le
   bloc ≤560 → gagne pour les plus petits écrans, où chaque pixel compte). */
@media (orientation: landscape) and (max-height: 380px) {
  /* margin-top:10px vient d'une règle injectée à l'exécution par shop-stripe.js (#btn-buy-tickets,
     1 id) — la battre nécessite au moins 2 ids, d'où le sélecteur qualifié ci-dessous. */
  #death-revenge #btn-buy-tickets { padding: 4px 10px !important; font-size: 10.5px !important; margin-top: 4px !important; }
}

/* (3) « NOUVEAU RECORD » : sous-texte olive foncé illisible sur le sombre → clair ; flash or vif. */
#death-screen #death-record {
  background: linear-gradient(180deg, rgba(255, 210, 63, 0.16), rgba(255, 210, 63, 0.05)) !important;
  border: 1px solid rgba(255, 210, 63, 0.5) !important;
}
#death-screen #death-record .dr-flash {
  color: #ffd23f !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}
#death-screen #death-record .dr-sub { color: #ecd9b0 !important; opacity: 1 !important; }

/* (4) BOUTONS DE PARTAGE mis EN AVANT (boucle virale) : plus grands, plus punchy. */
#death-screen .dov-cap-share {
  padding: 11px 18px !important; font-size: 13.5px !important;
  border-radius: 12px !important;
}
#death-screen .dov-cap-share.alt {
  background: linear-gradient(180deg, #3a2358, #2a1740) !important;
  color: #ffd23f !important; border: 1px solid rgba(255, 175, 120, 0.4) !important;
}

/* (4b) RANGÉE PLATEFORMES : « partage ton clip sur » + logos TikTok / Twitch / YouTube / X. */
#dov-cap-plat {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 9px; margin: 6px 0 2px;
}
#dov-cap-plat .dcp-lbl { font-size: 12px; font-weight: 700; color: #c3a7d6; }
#dov-cap-plat .dcp-btn {
  width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 175, 120, 0.3);
  background: linear-gradient(180deg, #33204d, #241338);
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
#dov-cap-plat .dcp-btn svg { width: 19px; height: 19px; }
#dov-cap-plat .dcp-btn svg path { fill: #fff2e9; }
#dov-cap-plat .dcp-btn:hover { transform: translateY(-2px) scale(1.06); }
/* teintes de marque au survol (halo) pour qu'on reconnaisse les plateformes */
#dov-cap-plat .dcp-tiktok:hover  { border-color: #25f4ee; box-shadow: 0 4px 14px rgba(37,244,238,.4); }
#dov-cap-plat .dcp-twitch:hover  { border-color: #9146ff; box-shadow: 0 4px 14px rgba(145,70,255,.45); }
#dov-cap-plat .dcp-youtube:hover { border-color: #ff3d3d; box-shadow: 0 4px 14px rgba(255,61,61,.45); }
#dov-cap-plat .dcp-x:hover       { border-color: #eaeaea; box-shadow: 0 4px 14px rgba(255,255,255,.3); }

/* (4c) PAYSAGE COURT (téléphone à l'horizontale, ≤560px de haut) — PIED SUR UNE SEULE RANGÉE.
   Problème : le pied empilait DEUX rangées (partage 🎬/🔗 puis « partage-le sur » + 4 logos ≈ 114px).
   Comme #death-box est plafonné (max-height), ce pied écrasait la grille → la colonne « Rejouer »
   débordait de ~40px et DÉFILAIT pour montrer les 2 offres de revanche (ressenti « obligé de scroller »).
   Correctif : on replie le pied sur UNE rangée — label « partage-le sur » masqué, logos compactés,
   boutons de partage resserrés — et on COLLE « Retour à l'accueil » à DROITE (margin-left:auto).
   Le pied rend ~65px : la grille reprend la hauteur et les cartes de revanche tiennent SANS scroll.
   (Le bouton « 📸 Partager mon score » a été retiré côté JS — js/capture.js.)
   Sélecteurs #death-screen (2 spécificité) + source postérieure : gagnent la cascade proprement. */
@media (orientation: landscape) and (max-height: 560px) {
  #death-screen .death-footer {
    flex-wrap: wrap; justify-content: flex-start;
    gap: 8px; padding-top: 6px;
  }
  /* rangée de partage 🎬 Clip / 🔗 Défier : resserrée (elle reste à gauche du pied) */
  #death-screen .dov-cap-share {
    padding: 7px 11px !important; font-size: 12px !important; border-radius: 10px !important;
  }
  /* logos plateformes : sans le libellé et compactés, ils tiennent sur la même ligne */
  #death-screen #dov-cap-plat { margin: 0; gap: 6px; }
  #death-screen #dov-cap-plat .dcp-lbl { display: none; }
  #death-screen #dov-cap-plat .dcp-btn { width: 28px; height: 28px; }
  #death-screen #dov-cap-plat .dcp-btn svg { width: 15px; height: 15px; }
  /* « Retour à l'accueil » collé au bord DROIT du pied (demande 2026-07-13). Le min-width:240px
     de base (style.css) est neutralisé ici : sur tactile le libellé raccourci (sans « [Entrée] »)
     tient dans un bouton étroit → le pied reste sur UNE rangée. */
  #death-box .death-footer #btn-death-menu { min-width: 0; }
  #death-screen #btn-death-menu { margin-left: auto; }
}

/* ============================================================================================
   ACCUEIL — PAYSAGE COURT (téléphone à l'horizontale, ≤560px de haut) — 2026-07-14
   ----------------------------------------------------------------------------------------------
   PROBLÈME : la mise en page BUREAU se déclenche dès 941px de LARGEUR (cf. menu-refonte.css
   `@media (min-width:941px)` : padding-top:60px, colonnes ÉTIRÉES pleine hauteur `align-items:
   stretch`). Or un téléphone LARGE tenu à l'horizontale a une largeur CSS > 940px MAIS une hauteur
   d'à peine ~350-460px. Résultat sur l'écran d'accueil (capture utilisateur) : logo démesuré,
   immenses vides (la carte ÉQUIPE réservait ~240px pour un drapeau de 60px), cartes étirées dont
   le texte se chevauche (« Missions du jour » / « Toutes tes quêtes »), bouton « Prendre la mer »
   disproportionné — et le bas de page hors écran.
   La compaction mobile existante (`@media (max-width:940px)`) ne s'appliquait PAS à ces écrans
   larges. On cible donc ici la HAUTEUR (paysage court), indépendamment de la largeur, pour forcer
   une mise en page COMPACTE 2 colonnes qui exploite la largeur disponible et tient dans la hauteur
   visible. Bloc placé en FIN de feuille (dernière chargée) + sélecteurs `#menu …` (≥2 ids) → gagne
   proprement la cascade sur les règles bureau. CSS uniquement : aucun id/classe touché (JS intact).
   ============================================================================================ */
@media (orientation: landscape) and (max-height: 560px) {
  /* Conteneur : colonne qui tient dans la hauteur visible (dvh = hors barre d'URL rétractable).
     ⚠️ :not(.hidden) OBLIGATOIRE : `#menu` (id) + !important battait `.hidden{display:none!important}`
     (classe) → EN PLEINE PARTIE, le menu restait affiché PAR-DESSUS le jeu dans toute fenêtre
     paysage ≤560px (vécu : embed CrazyGames 846×430 — « je vois l'accueil mais j'entends le jeu »,
     et le plein écran “réparait” en désactivant ce media query). */
  #menu:not(.hidden) {
    display: flex !important; flex-direction: column;
    height: 100dvh; max-height: 100dvh; overflow-y: auto;
    padding-top: max(4px, env(safe-area-inset-top)) !important;
    padding-bottom: max(4px, env(safe-area-inset-bottom));
  }
  /* Coin Login/Shop/Options : remis DANS le flux, en tête, aligné à droite → plus de padding-top
     bureau (60px) à réserver, aucun recouvrement des cartes. */
  #menu #menu-corner {
    position: static !important; align-self: flex-end;
    margin: 0 6px 4px 0 !important; padding: 0 !important;
    border: 0 !important; width: auto !important; z-index: 20;
  }

  /* DEUX colonnes qui exploitent la largeur (peu de hauteur dispo) — jamais étirées en hauteur. */
  #menu #menu-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    width: min(96vw, 1120px) !important;
    gap: 10px !important; column-gap: 14px !important; row-gap: 8px !important;
    align-items: start !important; align-content: start;
    margin: 0 auto !important; flex: 1 1 auto; min-height: 0;
  }
  #menu #menu-main, #menu #menu-side { padding: 10px 12px !important; margin-top: 0 !important; }
  #menu #menu-main { gap: 6px; }
  /* ACCUEIL INVITÉ : le JS pose `#menu-side { display:none !important }` (ui.js) quand aucune carte
     n'a de progression → sans cela, la 2e colonne resterait un vide qui écraserait #menu-main (CTA
     « Prendre la mer » rogné). On repasse alors en UNE colonne centrée pleine largeur utile. */
  #menu #menu-grid:has(> #menu-side[style*="none"]) {
    grid-template-columns: minmax(0, 560px) !important;
    justify-content: center;
  }

  /* En-tête compact : logo réduit, accroche marketing retirée (inutile sur l'écran de lancement). */
  #menu #menu-main h1 { margin: 0 !important; gap: 0; }
  #menu #menu-main .menu-teaser { display: none; }
  #menu .menu-logo-wrap { max-width: 200px; margin-bottom: 0; }
  #menu #menu-main .menu-logo-img { max-width: 200px !important; }

  /* Carte ÉQUIPE : à ≥941px de large, #team-card est une GRILLE (aires "image"/"button pseudo")
     avec #team-preview en `display:contents` → mais l'aperçu navire est masqué par le JS et
     remplacé par `.flag-stand`, qui n'a AUCUNE aire assignée : il se plaçait en auto et CHEVAUCHAIT
     le pseudo/bouton. On repasse donc la carte en simple flex (comme en portrait), et on annule la
     flex-basis fantôme (240px de vide pour un drapeau de 60px). */
  #menu #team-card { display: flex !important; flex-wrap: wrap; align-items: center; grid-template-areas: none !important; gap: 6px 10px !important; padding: 8px 10px !important; }
  #menu #team-preview { display: flex !important; flex: 0 0 auto !important; min-height: 0; }
  #menu .flag-stand { width: 60px !important; height: 62px !important; margin: 0 auto; }
  #menu .flag-stand .fs-pole { height: 54px !important; }
  #menu .flag-stand .fs-flag { width: 36px !important; height: 23px !important; }

  /* Pseudo + équipe VRAIMENT côte à côte (largeur figée du champ pseudo levée). */
  #menu .pseudo-flag-row { display: flex; flex-direction: row !important; flex-wrap: nowrap; align-items: stretch; gap: 6px; max-width: none; }
  #menu .pseudo-flag-row #preview-caption { flex: 1 1 0; width: auto !important; max-width: none !important; min-width: 0; }
  #menu .pseudo-flag-row #pseudo-edit { width: 100%; }
  #menu .pseudo-flag-row .team-name,
  #menu .pseudo-flag-row .pseudo-input,
  #menu .pseudo-flag-row #name-input { width: 100% !important; max-width: none !important; }
  #menu .pseudo-flag-row .flag-open { flex: 0 0 auto; max-width: 46%; padding: 6px 8px; }

  /* Modes de jeu (masqués tant qu'un seul mode) : côte à côte au cas où. */
  #menu .mode-row { flex-direction: row !important; gap: 6px; }
  #menu .mode-btn { flex: 1 1 0; min-width: 0 !important; }

  /* Bloc d'actions : serveur discret, CTA présent mais proportionné. */
  #menu .menu-side-actions { gap: 6px; }
  #menu #server-select { transform: scale(.94); transform-origin: center; }
  #menu #btn-play, #menu #btn-respawn { padding: 11px 24px !important; font-size: 16px !important; }
  #menu .menu-howto { gap: 6px; flex-wrap: wrap; }

  /* Colonne droite : grille 2 colonnes, cartes compactes, notes verbeuses masquées. « Réserve
     d'XP » et « Tes records » se partagent une rangée → hauteur regagnée, plus de chevauchement. */
  #menu #menu-side {
    display: grid !important; grid-template-columns: 1fr 1fr;
    gap: 6px; align-content: start;
  }
  #menu #menu-side > .menu-card,
  #menu #menu-side > .menu-cta-row { grid-column: 1 / -1; }
  #menu #menu-side > #menu-reserve-card { grid-column: 1 / 2; }
  #menu #menu-side > #menu-records-card { grid-column: 2 / 3; }
  #menu #menu-side .menu-card { padding: 7px 9px !important; border-radius: 14px; }
  #menu #menu-side .menu-card h3 { font-size: 12px; margin: 0 0 3px; }
  #menu #menu-reserve-card { margin: 0; }
  #menu #menu-reserve-card .menu-prog-sub,
  #menu #menu-reserve-card .reserve-note,
  #menu #menu-records-card h3 { display: none; }
  #menu #menu-reserve-card .reserve-row { gap: 6px; }
  #menu #menu-records-card .menu-rec-l { font-size: 9.5px; }

  /* Missions & quêtes : l'en-tête (compteur + « Voir tout ») + le coffre du jour suffisent ;
     le détail vit dans la popup « Voir tout » → plus de chevauchement des sous-titres. */
  #menu #menu-missions-card .menu-reward-note,
  #menu #menu-missions-card .menu-mq-h,
  #menu #menu-missions-card #menu-ach-scroll,
  #menu #menu-missions-card #menu-missions { display: none; }
  #menu #menu-daily { padding: 6px 8px; }

  /* Ta partie : seul le compteur de tickets (dans le titre) est utile ici. */
  #menu #menu-loadout-card .menu-reward-note,
  #menu #menu-loadout-card #menu-loadout { display: none; }
  #menu #menu-loadout-card h3 { margin: 0; }

  /* Offre du jour : carte plus plate. */
  #menu #menu-offer-card.menu-offer { padding: 8px 10px; gap: 8px; }

  /* Pied de page légal : discret, sur une ligne. */
  #menu .menu-legal-footer { padding: 3px 6px; gap: 4px; font-size: 10px; flex-wrap: wrap; }
  #menu .menu-legal-footer .legal-link { font-size: 10px; }
}

/* PAYSAGE TRÈS COURT (≤400px de haut) : un cran plus serré (logo + CTA), placé APRÈS le bloc
   ≤560 pour gagner sur les plus petits écrans à l'horizontale. */
@media (orientation: landscape) and (max-height: 400px) {
  #menu .menu-logo-wrap,
  #menu #menu-main .menu-logo-img { max-width: 168px !important; }
  #menu #menu-main, #menu #menu-side { padding: 8px 10px !important; }
  #menu #btn-play, #menu #btn-respawn { padding: 9px 20px !important; font-size: 15px !important; }
  #menu #menu-grid { row-gap: 6px !important; }
}

/* ============================ 6. ACCESSIBILITÉ ============================ */
@media (prefers-reduced-motion: reduce) {
  #menu #btn-play { animation: none !important; }
  #menu .srv-ic { animation: none !important; }
}

/* ============================ 7. QUÊTES / RANG / ACHATS (2026-07-14) ============================ */

/* PUCES DE QUÊTES (rail « Toutes tes quêtes ») : accueil-ghibli les peignait en CRÈME PLEIN
   (#fffcf4 → #f4e9cf) — sur le prune sunset, les quêtes NON FAITES (les plus nombreuses) formaient
   une bande blanche qui écrasait tout le panneau. On les repasse en carte prune (comme les autres
   cartes du menu) : non faite = sourde, faite = or. */
#menu .ach-chip {
  background: linear-gradient(180deg, #35204f, #2a1740) !important;
  border: 1px solid rgba(255, 175, 120, 0.18) !important;
}
#menu .ach-chip-txt b { color: var(--ag-ink-soft) !important; }
#menu .ach-chip-txt i { color: var(--ag-muted) !important; }
/* non faite : atténuée SANS être blanche (l'icône reste en niveaux de gris, cf. style.css) */
#menu .ach-chip.locked {
  opacity: 1 !important;
  background: linear-gradient(180deg, #2b1a41, #221334) !important;
  border-color: rgba(255, 175, 120, 0.10) !important;
}
#menu .ach-chip.locked .ach-chip-txt b { color: #b79bcb !important; }
#menu .ach-chip.locked .ach-chip-txt i { color: #8f79a8 !important; }
#menu .ach-chip.locked .ach-chip-ico { filter: grayscale(1) opacity(0.45) !important; }
/* faite : or franc, elle doit sauter aux yeux */
#menu .ach-chip.done {
  background: linear-gradient(180deg, #4a3320, #38240f) !important;
  border-color: rgba(255, 210, 63, 0.55) !important;
}
#menu .ach-chip.done .ach-chip-txt b { color: #ffd23f !important; }
#menu .ach-chip.done .ach-chip-txt i { color: var(--ag-sage-deep) !important; }

/* BADGE DE RANG de la réserve (« VIP AMIRAL ») : la pastille est un dégradé OR, et accueil-ghibli
   forçait l'encre en OR aussi (--ag-gold-deep) → texte or sur or = illisible. Encre brun-sombre. */
#menu .reserve-rank,
#menu .reserve-rank.is-vip {
  color: #3a2504 !important;
  background: linear-gradient(180deg, #ffe28c, #e8b84a) !important;
  text-shadow: none !important;
  box-shadow: 0 2px 10px rgba(255, 210, 63, 0.28) !important;
}

/* PASTILLE DE CONTENU sur « Mes achats » (remplace la carte « Ta partie », qui doublonnait avec ce
   même panneau). Affiche le nombre d'articles emportés (tickets + mini-boosts). */
#menu .btn-inventory { position: relative; }
#menu .btn-inv-badge {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px;
  display: none; align-items: center; justify-content: center;
  border-radius: 999px; font: 800 11px/1 system-ui, sans-serif;
  color: #3a2504; background: linear-gradient(180deg, #ffe28c, #e8b84a);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
#menu .btn-inv-badge.on { display: flex; }

/* ============================ 8. « MES ACHATS » — MISE EN PAGE (2026-07-14) ============================
   Le panneau empilait des paragraphes (réserve, VIP, tickets, boosts) : illisible. Trois zones nettes :
   (a) 3 tuiles de chiffres, (b) « se recharge bientôt » = ce qui est épuisé + le délai de retour,
   (c) le sélecteur de boosts. Plus, pour l'INVITÉ, un argumentaire de connexion en tête. */

/* (a) Tuiles */
#stuff-panel .inv-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin: 2px 0 14px;
}
#stuff-panel .inv-tile {
  display: flex; flex-direction: column; gap: 2px; padding: 11px 13px;
  border-radius: 13px; background: linear-gradient(180deg, #35204f, #2a1740);
  border: 1px solid rgba(255, 175, 120, 0.18);
}
#stuff-panel .inv-tile--vip { border-color: rgba(255, 210, 63, 0.5); }
#stuff-panel .inv-tile-k { font: 700 10.5px system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.6px; color: #c3a7d6; }
#stuff-panel .inv-tile-v { font: 800 19px system-ui, sans-serif; color: #fff2e9; letter-spacing: -0.3px; }
#stuff-panel .inv-tile--vip .inv-tile-v { color: #ffd23f; }
#stuff-panel .inv-tile-s { font: 500 11px system-ui, sans-serif; color: #a98fbe; }

/* (b) Se recharge bientôt */
#stuff-panel .inv-cd {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 7px;
  border-radius: 11px; background: rgba(53, 32, 79, 0.55);
  border: 1px solid rgba(255, 175, 120, 0.12);
}
#stuff-panel .inv-cd--on { border-color: rgba(40, 224, 192, 0.4); background: rgba(40, 224, 192, 0.10); }
#stuff-panel .inv-cd-ic { font-size: 16px; line-height: 1; }
#stuff-panel .inv-cd:not(.inv-cd--on) .inv-cd-ic { filter: grayscale(1) opacity(0.5); }
#stuff-panel .inv-cd-nm { flex: 1 1 auto; min-width: 0; font: 600 12.5px system-ui, sans-serif; color: #edd9ec; }
#stuff-panel .inv-cd:not(.inv-cd--on) .inv-cd-nm { color: #a98fbe; }
#stuff-panel .inv-cd-st { flex: 0 0 auto; font: 500 11.5px system-ui, sans-serif; text-align: right; }
#stuff-panel .inv-cd-ok { color: #28e0c0; font-weight: 800; }
#stuff-panel .inv-cd-wait { color: #c3a7d6; }
#stuff-panel .inv-cd-wait b { color: #ffd23f; }

/* (c) Argumentaire de connexion (invité) */
#stuff-panel .inv-pitch {
  border: 1px solid rgba(255, 210, 63, 0.45) !important;
  background: linear-gradient(180deg, #3a2358, #2a1740) !important;
  border-radius: 14px; padding: 14px 15px !important;
}
#stuff-panel .inv-perks { list-style: none; margin: 10px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#stuff-panel .inv-perks li { display: flex; align-items: baseline; gap: 8px; font: 500 12.5px system-ui, sans-serif; color: #edd9ec; }
#stuff-panel .inv-perks b { color: #fff2e9; }
#stuff-panel .inv-perk-ic { flex: 0 0 auto; color: #ffd23f; }
#stuff-panel .inv-login-cta {
  width: 100%; padding: 11px 16px; border: 0; border-radius: 12px; cursor: pointer;
  font: 800 14px system-ui, sans-serif; color: #fff2e9;
  background: linear-gradient(90deg, #ff8a1a, #ff2e63);
  box-shadow: 0 8px 20px rgba(255, 46, 99, 0.3);
}
#stuff-panel .inv-login-cta:hover { filter: brightness(1.08); }

/* Mes achats (#stuff-panel) : les pastilles ±/chips héritées de popups-ghibli sont crème → prune. */
#stuff-panel .inv-step {
  background: linear-gradient(180deg, #3a2358, #2a1740) !important;
  border: 1px solid rgba(255, 175, 120, 0.3) !important;
  color: #fff2e9 !important;
}
#stuff-panel .inv-chip {
  background: linear-gradient(180deg, #ffd764, #e8a92b) !important;
  color: #3a2504 !important;
}

/* ============================================================================================
   ACCUEIL CENTRÉ — FENÊTRE PAYSAGE BASSE PC (embeds portails). Le centrage vertical posé en fin
   de style.css (`#menu-grid { margin: auto 0 }`) était battu par les `margin-top: X !important`
   de menu-refonte.css (chargée après). Ici, DERNIÈRE feuille chargée + !important → gagne la
   cascade : la carte du menu se centre dans la fenêtre au lieu de flotter en haut.
   Scope strict : PC (non tactile) en paysage ≤560px — les layouts téléphone ne bougent pas.
   ============================================================================================ */
@media (orientation: landscape) and (max-height: 560px) {
  body:not(.vtouch) #menu:not(.hidden) { justify-content: center; align-items: center; }
  body:not(.vtouch) #menu-grid { margin-top: auto !important; margin-bottom: auto !important; align-content: center !important; }
}

/* ============================================================================================
   ACCUEIL PC — PAIRE CENTRÉE (côte à côte) quand la colonne droite est légère (2026-07-19, Simon)
   ----------------------------------------------------------------------------------------------
   PROBLÈME : la grille bureau est FIGÉE en 2 colonnes égales (minmax(0,1fr) minmax(0,1fr), largeur
   min(1320px,96vw)). Quand la colonne droite est vide (invité) ou légère (quêtes désactivées → juste
   « Réserve d'XP » + « Coffre du jour »), la carte de gauche reste coincée dans la moitié gauche et
   toute la moitié DROITE se lit comme un grand VIDE.
   SOLUTION : le JS (UI.refreshMenu) pose `body.home-single` quand le contenu droit est léger, et
   `body.home-rich` dès qu'un contenu « riche » apparaît (quêtes actives / coffres prêts / offre du
   jour). En `home-single`, le bloc principal et les cartes de droite se posent CÔTE À CÔTE, centrés
   ensemble avec des largeurs naturelles → on exploite la largeur pour tout afficher SANS SCROLL (les
   cartes ne passent plus SOUS le bloc principal) et sans demi-écran vide. En `home-rich`, la grille 2
   colonnes reprend automatiquement — aucune régression. CSS uniquement (dernière feuille + !important
   → gagne la cascade). Sur mobile (<941px) la classe est ignorée (mise en page tactile inchangée).
   ============================================================================================ */
@media (min-width: 941px) {
  /* Colonne droite LÉGÈRE (Réserve / Coffre du jour) → bloc principal + cartes CÔTE À CÔTE, centrés
     ENSEMBLE avec des largeurs naturelles (pas étirés en demi-écran). On EXPLOITE la largeur dispo
     pour que TOUT s'affiche SANS SCROLL — les cartes ne passent plus SOUS le bloc principal (ce qui
     obligeait à scroller) — tout en évitant le demi-écran vide à droite (paire centrée). Retombe en
     empilé seulement si l'écran est trop étroit (flex-wrap). Demande Simon 2026-07-19 (lot 2). */
  body.home-single #menu #menu-grid {
    display: flex !important; flex-direction: row; flex-wrap: wrap;
    justify-content: center; align-items: center;
    gap: 22px; width: auto !important;
    max-width: min(96vw, 1120px);
    margin-left: auto !important; margin-right: auto !important;
    row-gap: 14px !important;
  }
  body.home-single #menu #menu-main {
    flex: 0 1 auto; width: min(480px, 48vw); max-width: none !important; margin: 0 !important;
  }
  /* Cartes de droite : POSÉES À CÔTÉ du bloc principal (plus en dessous), largeur compacte, sans
     habillage de panneau propre (elles ont déjà leur verre) → paire cohérente, centrée, sans scroll. */
  body.home-single #menu #menu-side {
    flex: 0 1 auto; width: min(360px, 34vw); max-width: none !important; margin: 0 !important;
    align-self: center;
    background: none !important; border: 0 !important; box-shadow: none !important;
    padding: 0 !important;
  }
  /* CONTENU RICHE → 2 colonnes garanties. On restaure explicitement la grille bureau même si le
     joueur est aussi `menu-fresh` (style.css force alors une colonne 480px SANS rétrécir la grille
     1320px → l'ancien vide à droite reviendrait). Ce garde-fou l'emporte (spécificité + !important). */
  body.home-rich #menu #menu-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    width: min(1320px, 96vw) !important;
  }
}

/* Écran PC PEU HAUT (≤860px) en paire centrée : on COMPACTE le bloc principal pour que TOUT tienne
   SANS SCROLL — logo réduit, accroche marketing + bandeau « aussi sur téléphone » masqués (ils ne
   sont pas essentiels sur un lancement compact). Sur écran HAUT, rien n'est masqué (le contenu
   complet s'affiche). S'ajuste donc « selon l'écran » (demande Simon 2026-07-19). */
@media (min-width: 941px) and (max-height: 860px) {
  body.home-single #menu #menu-main .menu-logo-img { max-width: 300px !important; }
  body.home-single #menu #menu-main .menu-teaser { display: none !important; }
  body.home-single #menu #mobile-promo { display: none !important; }
}

/* ============================================================================================
   ACCUEIL MOBILE — EN-TÊTE (coin compte/boutique) QUI NE DÉBORDE JAMAIS (2026-07-19, demande Simon)
   ----------------------------------------------------------------------------------------------
   PROBLÈME (téléphone PORTRAIT) : #menu-corner (roue Options, Son, Login, Shop, « Mes achats »,
   sélecteur 🌐) passe en `position:static` en haut de l'écran (max-width:940, menu-refonte.css) mais
   ses 6 éléments ne tiennent pas dans la largeur d'un téléphone → ils SORTENT de l'écran (roue rognée
   à gauche, langue rognée à droite).
   SOLUTION : autorise le RETOUR À LA LIGNE (flex-wrap) — rien ne peut plus sortir de l'écran — et, sur
   téléphone étroit, réduit les boutons en ICÔNES SEULES pour que tout tienne sur une seule rangée.
   ============================================================================================ */
@media (max-width: 940px) {
  #menu #menu-corner {
    flex-wrap: wrap !important;            /* jamais de débordement hors écran : ça passe à la ligne */
    max-width: 100%; box-sizing: border-box;
    justify-content: flex-end; align-items: center;
    row-gap: 4px; column-gap: 6px;
  }
  #menu #menu-corner #i18n-chip { margin-top: 0 !important; }
}
@media (max-width: 560px) {
  /* Téléphone portrait : libellés masqués → boutons en icônes (personne / sac / carton), pour que
     roue + son + Login + Shop + Mes achats + langue tiennent sur UNE rangée sans rogner. */
  #menu #menu-corner .btn-login-txt,
  #menu #menu-corner .btn-shop-txt,
  #menu #menu-corner .btn-inv-txt { display: none !important; }
  #menu #menu-corner .menu-corner-btn {
    width: 38px !important; min-width: 38px; padding: 0 !important;
    justify-content: center; gap: 0;
  }
  #menu #menu-corner #i18n-chip select { max-width: 96px; }
}

/* ============================================================================================
   LOGO du site en tête du panneau OPTIONS (2026-07-19, demande Simon) : rappel de marque, centré
   au-dessus du titre « Options ». Taille bornée pour ne pas manger la hauteur du panneau.
   ============================================================================================ */
#options-panel .opt-logo { display: flex; justify-content: center; margin: 2px 0 8px; }
#options-panel .opt-logo-img {
  width: auto; max-width: min(220px, 60%); height: auto; display: block;
  filter: drop-shadow(0 4px 12px rgba(6, 2, 14, 0.5));
}
@media (max-width: 560px) { #options-panel .opt-logo-img { max-width: 160px; } }