/* =====================================================================================
   DOVION — GLASS UI  (refonte 2026-07-10)
   -------------------------------------------------------------------------------------
   Design system « verre liquide » GLOBAL : généralise la recette de l'accueil
   (css/menu-refonte.css, scopée #menu) à TOUTES les interfaces du jeu — boutique,
   paramètres, écran de mort, popups, modales, HUD. But : cohérence visuelle totale
   avec la page d'accueil (blur fort, verre/glace, reflets spéculaires, profondeur en
   couches, palette marine glacée + accents cyan/or, CTA chaud lustré), sans sacrifier
   la LISIBILITÉ (contraste préservé : surfaces de contenu plus opaques que l'accueil).

   Chargé APRÈS style.css / menu-refonte.css / privacy-notice.css → prime par l'ordre
   source (même spécificité) ; spécificité relevée là où des règles injectées à
   l'exécution (js/shop-stripe.js) doivent être battues (#premium-panel .xxx).

   Sommaire :
     0. Tokens globaux (:root)
     1. Fond des overlays (givre sombre unifié) + base .panel / .panel-x
     2. Boutique (#premium-panel) — refonte complète + scroll fix
     3. Paramètres (#options-panel) — refonte complète
     4. Écran de mort (#death-screen)
     5. Popups navires (equip/class/arm/gallery) + login + tutoriel + quêtes + divers
     6. HUD en jeu + leaderboard
     7. Responsive (feuilles mobiles, cibles tactiles, safe-area)
     8. prefers-reduced-motion
   ===================================================================================== */

/* ============================ 0. TOKENS GLOBAUX ============================ */
:root {
  --g-radius: 20px;
  --g-radius-lg: 24px;
  --g-radius-sm: 12px;

  --g-hi: rgba(255, 255, 255, 0.30);          /* arête de lumière (reflet spéculaire haut) */
  --g-edge: rgba(168, 214, 244, 0.22);        /* liseré verre (cyan glacé) */
  --g-edge-strong: rgba(168, 214, 244, 0.42);
  --g-accent: 127, 212, 255;                  /* cyan glacé (rgb) — halos / focus / hover */
  --g-gold: #ffd772;
  --g-gold-soft: 255, 215, 114;
  --g-danger: #ff6b6b;
  --g-teal: #7fe0c0;
  --g-text: #eaf3fb;
  --g-text-soft: #cfe0ee;
  --g-muted: #9fb4c6;

  /* Surfaces (fond peint SOUS le contenu → le texte ne perd jamais en lisibilité).
     Deux couches : un gloss diagonal léger + un scrim marine translucide. */
  --g-panel-bg:
    linear-gradient(157deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.02) 32%, rgba(9, 20, 32, 0.05) 100%),
    linear-gradient(180deg, rgba(20, 35, 51, 0.84), rgba(12, 24, 38, 0.90));
  --g-card-bg:
    linear-gradient(162deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.015) 44%, rgba(9, 20, 32, 0.03)),
    linear-gradient(180deg, rgba(26, 42, 58, 0.46), rgba(16, 30, 45, 0.56));
  --g-card-bg-2:
    linear-gradient(162deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01) 50%, rgba(9, 20, 32, 0.02)),
    linear-gradient(180deg, rgba(22, 38, 54, 0.55), rgba(13, 26, 40, 0.64));
  --g-field-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(10, 22, 34, 0.55);

  /* Voile d'arrière-plan des modales : givre la scène (mer/jeu) en froid marine. */
  --g-veil:
    radial-gradient(ellipse at 50% -4%, rgba(36, 66, 92, 0.36), rgba(6, 14, 22, 0) 60%),
    linear-gradient(180deg, rgba(6, 15, 24, 0.68), rgba(5, 11, 18, 0.80));

  --g-shadow-panel:
    inset 0 1px 0 var(--g-hi),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 -30px 62px rgba(6, 16, 26, 0.22),
    0 30px 72px rgba(3, 12, 22, 0.55);
  --g-shadow-card:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 12px 30px rgba(4, 14, 24, 0.34);
  --g-shadow-float:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 22px rgba(4, 14, 24, 0.42);
}

/* ============================ 1. FOND OVERLAYS + BASE ============================ */
/* Givre SOMBRE unifié pour toutes les modales (remplace le frost clair incohérent des
   Options/Boutique/Tutoriel + normalise les autres). La scène derrière reste visible,
   floutée et teintée froid — l'ouverture d'une popup « givre » simplement le décor. */
#options-panel,
#premium-panel,
#tutorial-panel,
#login-panel,
#quests-panel,
#feedback-panel,
#legal-panel,
#foot-panel,
#minimap-modal {
  background: var(--g-veil);
  backdrop-filter: blur(15px) saturate(1.15) brightness(0.94);
  -webkit-backdrop-filter: blur(15px) saturate(1.15) brightness(0.94);
}

/* Titre des panneaux : blanc glacé lisible, léger halo. */
.panel h2 {
  color: var(--g-text);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

/* Croix de fermeture : bouton de verre cohérent (le rouge n'apparaît qu'au survol). */
.panel-x {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
    rgba(14, 27, 40, 0.55) !important;
  border: 1px solid var(--g-edge) !important;
  color: var(--g-text-soft);
  box-shadow: var(--g-shadow-float);
}
.panel-x:hover {
  background: rgba(214, 71, 63, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #fff;
}

/* Bouton secondaire (Installer l'app, formulaire…) en verre. */
.btn-secondary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03)),
    rgba(15, 29, 42, 0.5);
  border: 1px solid var(--g-edge);
  color: var(--g-text);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--g-shadow-float);
}
.btn-secondary:hover { border-color: rgba(var(--g-accent), 0.55); color: #fff; }

/* ============================ 2. BOUTIQUE (#premium-panel) ============================ */
/* Objectif : lisible, hiérarchisée, cartes propres, offres attractives, scroll fluide,
   responsive. La boîte est un panneau de verre ; en-tête + barre d'action FIXES, seul
   le corps défile. */

/* --- Palette GHIBLI VERRE CHAUD : re-teinte les tokens --g-* dans le scope boutique ---
   La boutique conserve la structure « verre liquide » (blur, reflets, couches, ombres) mais
   bascule sa palette froide (marine/cyan) en tons Ghibli chauds : parchemin, aube dorée,
   sauge, or miel. Toutes les règles #premium-panel / #dovion-shop-ov ci-dessous héritent
   automatiquement de cette palette (retinte au niveau des variables, pas règle par règle).
   Le reste du jeu (options, popups, HUD) garde sa palette froide → chaleur = désir en boutique,
   sans casser la cohérence verre du jeu. */
#premium-panel,
#dovion-shop-ov {
  --g-hi: rgba(255, 250, 240, 0.34);
  --g-edge: rgba(228, 178, 96, 0.30);          /* liseré or miel (remplace le cyan glacé) */
  --g-edge-strong: rgba(228, 178, 96, 0.5);
  --g-accent: 158, 194, 140;                   /* sauge Ghibli (halos, hover, focus) */
  --g-gold: #ffce7e;
  --g-gold-soft: 255, 206, 126;
  --g-teal: #a6cf92;                            /* sauge (réserve d'XP, prix abordables) */
  --g-text: #f7edd9;                            /* crème clair chaud */
  --g-text-soft: #e9d9be;
  --g-muted: #bda98a;                           /* taupe chaud (texte discret) */

  /* Surfaces chaudes (peintes SOUS le contenu → lisibilité préservée) : léger halo d'aube +
     gloss crème + scrim bois/nuit chaude, au lieu du scrim marine froid. */
  --g-panel-bg:
    radial-gradient(120% 70% at 20% -10%, rgba(255, 226, 170, 0.14), rgba(255, 226, 170, 0) 60%),
    linear-gradient(157deg, rgba(255, 248, 233, 0.12), rgba(255, 248, 233, 0.02) 32%, rgba(44, 30, 18, 0.06) 100%),
    linear-gradient(180deg, rgba(58, 44, 29, 0.86), rgba(38, 29, 19, 0.92));
  --g-card-bg:
    linear-gradient(162deg, rgba(255, 248, 233, 0.10), rgba(255, 248, 233, 0.02) 44%, rgba(44, 30, 18, 0.04)),
    linear-gradient(180deg, rgba(70, 54, 36, 0.50), rgba(50, 38, 25, 0.60));
  --g-card-bg-2:
    linear-gradient(162deg, rgba(255, 248, 233, 0.07), rgba(255, 248, 233, 0.015) 50%, rgba(44, 30, 18, 0.03)),
    linear-gradient(180deg, rgba(64, 49, 32, 0.56), rgba(46, 35, 23, 0.66));
  --g-field-bg:
    linear-gradient(180deg, rgba(255, 248, 233, 0.08), rgba(255, 248, 233, 0.02)),
    rgba(40, 30, 20, 0.55);
  /* Voile d'arrière-plan de la modale boutique : dorure d'aube chaude (givre chaud du décor). */
  --g-veil:
    radial-gradient(ellipse at 50% -4%, rgba(120, 90, 50, 0.40), rgba(20, 14, 8, 0) 60%),
    linear-gradient(180deg, rgba(24, 17, 10, 0.66), rgba(16, 11, 7, 0.80));
}

/* --- Boîte : dalle de verre (en-tête fixe + corps défilant + barre d'action fixe) --- */
#premium-panel { padding: clamp(12px, 3vh, 34px) 0; }
#premium-panel #premium-box {
  width: min(1120px, 95vw);
  max-height: min(90vh, 940px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--g-panel-bg) !important;
  border: 1px solid var(--g-edge) !important;
  border-radius: var(--g-radius-lg) !important;
  backdrop-filter: blur(22px) saturate(1.4) brightness(1.03);
  -webkit-backdrop-filter: blur(22px) saturate(1.4) brightness(1.03);
  box-shadow: var(--g-shadow-panel) !important;
  color: var(--g-text);
}

/* --- En-tête FIXE : titre + réserve + onglets --- */
#premium-panel #premium-head {
  flex: 0 0 auto;
  padding: 16px 22px 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01)) !important;
  border-bottom: 1px solid var(--g-edge) !important;
}
#premium-panel #premium-head h2 {
  font-size: clamp(18px, 3.2vw, 23px); font-weight: 900; letter-spacing: 0.4px;
  color: #fff !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;
}
#premium-panel #shop-reserve {
  background:
    linear-gradient(180deg, rgba(166, 207, 146, 0.20), rgba(166, 207, 146, 0.06)),
    rgba(40, 30, 20, 0.5) !important;
  border: 1px solid rgba(166, 207, 146, 0.42) !important;
  color: var(--g-text-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255, 250, 240, 0.2);
}
#premium-panel .shop-reserve-ic, #premium-panel #shop-reserve b { color: var(--g-teal) !important; }
#premium-panel .shop-reserve-rank {
  color: var(--g-gold) !important;
  background: rgba(var(--g-gold-soft), 0.16) !important;
  border: 1px solid rgba(var(--g-gold-soft), 0.3);
}

/* --- Onglets (injectés par shop-stripe.js) : pilules de verre (fini le vert crème) --- */
#premium-panel .shop-tabbar { gap: 8px; margin: 12px 0 2px; }
#premium-panel .shop-tab {
  flex: 1; border-radius: 12px; padding: 10px 12px;
  font: 800 13.5px/1 'Trebuchet MS', system-ui, sans-serif !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(12, 26, 38, 0.5) !important;
  border: 1px solid var(--g-edge) !important;
  color: var(--g-text-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: border-color .15s ease, transform .1s ease, background .18s ease, color .15s ease;
}
#premium-panel .shop-tab:hover { transform: translateY(-1px); border-color: rgba(var(--g-accent), 0.5) !important; color: #fff !important; }
#premium-panel .shop-tab.is-active {
  background:
    linear-gradient(180deg, rgba(158, 194, 140, 0.30), rgba(120, 160, 100, 0.16)),
    rgba(40, 34, 22, 0.5) !important;
  border-color: rgba(var(--g-accent), 0.6) !important; color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 250, 240, 0.24), 0 6px 16px rgba(120, 160, 90, 0.3) !important;
}
/* onglet Premium/Trésor actif : accent doré (paiement réel). */
#premium-panel .shop-tabbar .shop-tab:first-child.is-active {
  background:
    linear-gradient(180deg, rgba(245, 210, 120, 0.30), rgba(200, 155, 60, 0.16)),
    rgba(26, 30, 36, 0.5) !important;
  border-color: rgba(var(--g-gold-soft), 0.6) !important; color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 6px 16px rgba(200, 150, 60, 0.32) !important;
}
#premium-panel .shop-hist-link { color: var(--g-muted) !important; }
#premium-panel .shop-hist-link:hover { color: var(--g-text) !important; }

/* --- Corps DÉFILANT : seul scroller, fluide (min-height:0 = clé du scroll flex) --- */
#premium-panel #premium-scroll {
  flex: 1 1 auto; min-height: 0;               /* CORRECTIF SCROLL : sans min-height:0 un
                                                  enfant flex ne rétrécit pas → scroll cassé */
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 18px;
  padding: 18px 20px 20px;
  contain: layout paint; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(var(--g-accent), 0.45) transparent;
}
#premium-panel #premium-scroll > * { flex-shrink: 0; }
#premium-panel #premium-scroll::-webkit-scrollbar { width: 9px; }
#premium-panel #premium-scroll::-webkit-scrollbar-track { background: transparent; }
#premium-panel #premium-scroll::-webkit-scrollbar-thumb {
  background: rgba(var(--g-accent), 0.4) !important; border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;
}
#premium-panel #premium-scroll::-webkit-scrollbar-thumb:hover { background: rgba(var(--g-accent), 0.6) !important; }

/* --- Blocs de section : carte de verre légère, en-tête clair --- */
#premium-panel .premium-block {
  padding: 14px 16px; border-radius: var(--g-radius-sm) !important;
  background: var(--g-card-bg) !important;
  border: 1px solid var(--g-edge) !important;
  box-shadow: var(--g-shadow-card) !important;
}
#premium-panel .premium-block-head { margin-bottom: 12px; }
#premium-panel .premium-block-head h4 {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.9px;
  color: #fff !important; font-weight: 800;
}
#premium-panel .shop-tag {
  color: var(--g-muted) !important; font-weight: 600;
}
#premium-panel .shop-zone-head h3 { color: #fff !important; }
#premium-panel .shop-zone-ic { color: var(--g-gold) !important; }
#premium-panel .shop-zone-head::after { background: linear-gradient(90deg, var(--g-edge-strong), transparent) !important; }

/* --- Mini-boosts (.shop-item) : lignes compactes, propres, hiérarchie prix nette --- */
#premium-panel .shop-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
#premium-panel .shop-item {
  padding: 11px 13px; border-radius: 12px;
  background: var(--g-card-bg-2) !important;
  border: 1px solid var(--g-edge) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: border-color .16s ease, background .16s ease, transform .12s ease, box-shadow .16s ease;
}
#premium-panel .shop-item:hover {
  border-color: rgba(var(--g-accent), 0.55) !important;
  background:
    linear-gradient(180deg, rgba(158, 194, 140, 0.12), rgba(158, 194, 140, 0.03)),
    rgba(52, 40, 26, 0.6) !important;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 250, 240, 0.16), 0 8px 18px rgba(24, 15, 6, 0.34);
}
#premium-panel .shop-item-body b { color: #fff !important; font-size: 13px; }
#premium-panel .shop-item-body small { color: var(--g-muted) !important; }
#premium-panel .shop-item-price { color: var(--g-text-soft) !important; }
#premium-panel .shop-item-price.ok { color: var(--g-teal) !important; }
#premium-panel .shop-item-price.owned { color: var(--g-gold) !important; }
#premium-panel .shop-item.locked .shop-item-price { color: #ff9a8a !important; }
#premium-panel .shop-item.owned {
  border-color: rgba(var(--g-gold-soft), 0.5) !important;
  background:
    linear-gradient(180deg, rgba(255, 215, 114, 0.10), rgba(255, 215, 114, 0.02)),
    rgba(20, 30, 30, 0.55) !important;
}
#premium-panel .shop-item.is-selected {
  border-color: var(--g-gold) !important;
  background:
    linear-gradient(180deg, rgba(255, 215, 114, 0.18), rgba(255, 215, 114, 0.05)),
    rgba(22, 30, 26, 0.6) !important;
  box-shadow: 0 0 0 1px rgba(var(--g-gold-soft), 0.4), 0 0 16px rgba(var(--g-gold-soft), 0.28) !important;
}

/* --- Cartes cosmétiques (skins / traînées / pavillons) : tuiles de verre --- */
#premium-panel .premium-card {
  background: var(--g-card-bg-2) !important;
  border: 1px solid var(--g-edge) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: border-color .16s ease, transform .12s ease, box-shadow .16s ease;
}
#premium-panel .premium-card:hover { transform: translateY(-2px); border-color: rgba(var(--g-accent), 0.55) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 22px rgba(4,14,24,.4); }
#premium-panel .premium-card-name { color: var(--g-text) !important; }
#premium-panel .premium-card.is-owned, #premium-panel .premium-card.is-worn {
  border-color: rgba(var(--g-teal), 0.6) !important;
  box-shadow: inset 0 0 0 1px rgba(127, 224, 192, 0.4);
}
#premium-panel .premium-card.is-worn .premium-lock { color: #0c231d !important; background: linear-gradient(90deg, #a9f0d8, #6fd8b8) !important; }
#premium-panel .premium-card.is-selected {
  border-color: var(--g-gold) !important;
  box-shadow: 0 0 0 1px rgba(var(--g-gold-soft), 0.5), 0 0 14px rgba(var(--g-gold-soft), 0.3) !important;
}
#premium-panel .premium-card.is-selected .premium-lock { color: #3a2306 !important; background: linear-gradient(90deg, #ffe6a0, #f0c24a) !important; }

/* --- Emojis premium : tuiles de verre --- */
#premium-panel .shop-emoji {
  background: var(--g-card-bg-2) !important;
  border: 1px solid var(--g-edge) !important;
}
#premium-panel .shop-emoji-req { color: var(--g-muted) !important; }

/* --- Coffre de départ (héros) : carte de verre chaud (identité or, offre premium) --- */
#premium-panel .premium-hero {
  background:
    radial-gradient(ellipse at 16% 20%, rgba(255, 215, 114, 0.18), rgba(0, 0, 0, 0) 60%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01) 40%, rgba(9, 20, 32, 0.02)),
    linear-gradient(160deg, rgba(46, 36, 22, 0.78), rgba(24, 26, 22, 0.86)) !important;
  border: 1px solid rgba(var(--g-gold-soft), 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 12px 30px rgba(4, 14, 24, 0.4) !important;
}
#premium-panel .premium-hero-body h3 { color: #ffe6a0 !important; }
#premium-panel .premium-hero-desc { color: var(--g-text-soft) !important; }
#premium-panel .premium-perks li { color: var(--g-text) !important; }
#premium-panel .premium-soon-note { color: #d9b98a !important; }

/* CTA d'achat (débloquer, packs) : bouton or lustré cohérent avec « Prendre la mer ». */
#premium-panel .premium-buy {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.04) 44%, transparent 58%),
    linear-gradient(180deg, #ffdd6b, #f0b028) !important;
  color: #2a1c04 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 8px 22px rgba(220, 150, 40, 0.5) !important;
}
#premium-panel .premium-buy:hover { filter: brightness(1.05) saturate(1.04); }
#premium-panel .premium-ad {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(15, 29, 42, 0.5) !important;
  border: 1px solid var(--g-edge) !important; color: var(--g-text) !important;
}

/* --- Packs d'XP argent réel (.ds-pack-card injectées) : cartes de verre (fini le crème) --- */
#premium-panel .dovion-xp-grid { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 13px; }
#premium-panel .ds-pack-card {
  padding: 20px 12px 15px; border-radius: 16px !important;
  background: var(--g-card-bg) !important;
  border: 1px solid var(--g-edge) !important;
  box-shadow: var(--g-shadow-card) !important;
  transition: transform .14s ease, box-shadow .2s ease, border-color .16s ease;
}
#premium-panel .ds-pack-card:hover {
  transform: translateY(-4px); border-color: rgba(var(--g-accent), 0.5) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 16px 32px rgba(4, 14, 24, 0.46) !important;
}
#premium-panel .ds-pack-coin { color: var(--g-gold) !important; filter: drop-shadow(0 2px 6px rgba(220, 150, 40, 0.5)); }
#premium-panel .ds-pack-xp { color: #fff !important; }
#premium-panel .ds-pack-xp small { color: var(--g-gold) !important; }
#premium-panel .ds-pack-name { color: var(--g-muted) !important; }
#premium-panel .ds-pack-bonus {
  color: #0c231d !important;
  background: linear-gradient(90deg, #8ff0d0, #58c8a6) !important;
  box-shadow: 0 3px 10px rgba(72, 200, 168, 0.3) !important;
}
#premium-panel .ds-pack-buy {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.04) 46%, transparent 58%),
    linear-gradient(180deg, #b3dd9c, #7fae68) !important;
  color: #143a12 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 16px rgba(120, 168, 90, 0.42) !important;
}
#premium-panel .ds-pack-card.is-popular { border-color: rgba(var(--g-accent), 0.55) !important; box-shadow: 0 0 0 1px rgba(var(--g-accent), 0.4), var(--g-shadow-card) !important; }
#premium-panel .ds-pack-card.is-popular .ds-pack-ribbon { color: #163a12 !important; background: linear-gradient(90deg, #d8ecc6, #a6cf92) !important; }
#premium-panel .ds-pack-card.is-best {
  border-color: rgba(var(--g-gold-soft), 0.6) !important;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255, 215, 114, 0.18), rgba(0, 0, 0, 0) 62%),
    var(--g-card-bg) !important;
  box-shadow: 0 0 0 1px rgba(var(--g-gold-soft), 0.42), var(--g-shadow-card) !important;
}
#premium-panel .ds-pack-card.is-best .ds-pack-ribbon { color: #2a1c04 !important; background: linear-gradient(90deg, #ffe6a0, #f0c24a) !important; box-shadow: 0 2px 8px rgba(200, 150, 40, 0.4) !important; }
#premium-panel .ds-pack-card.is-best .ds-pack-buy {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.04) 46%, transparent 58%),
    linear-gradient(180deg, #ffdd6b, #f0b028) !important;
  color: #2a1c04 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 6px 16px rgba(220, 150, 40, 0.45) !important;
}

/* --- Offre du jour + bundles (injectées) : cohérence verre --- */
#premium-panel .dovion-odj {
  background:
    linear-gradient(90deg, rgba(255, 215, 114, 0.16), rgba(255, 215, 114, 0.02)),
    rgba(14, 27, 40, 0.5) !important;
  border: 1px solid rgba(var(--g-gold-soft), 0.45) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
#premium-panel .odj-title { color: #ffe6a0 !important; }
#premium-panel .odj-cd { color: #ffb39c !important; }
#premium-panel .bundle-card {
  background: var(--g-card-bg) !important;
  border: 1px solid var(--g-edge) !important;
  box-shadow: var(--g-shadow-card) !important;
}
#premium-panel .bundle-name { color: #fff !important; }
#premium-panel .bundle-tag { color: rgba(var(--g-accent), 1) !important; }
#premium-panel .bundle-perks { color: var(--g-text-soft) !important; }
#premium-panel .dovion-fpb {
  color: #3a2306 !important;
  background: linear-gradient(90deg, #ffe0a0, #f0b657) !important;
  box-shadow: 0 6px 18px rgba(220, 160, 60, 0.32) !important;
}

/* --- Barre d'action FIXE (sélection → achat / équipe) : verre dépoli sombre --- */
#premium-panel #shop-action {
  flex: 0 0 auto;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
    rgba(9, 18, 28, 0.86) !important;
  border-top: 1px solid var(--g-edge) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#premium-panel .shop-action-info b { color: #fff !important; }
#premium-panel .shop-action-info small { color: var(--g-muted) !important; }
#premium-panel .shop-action-btn {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.04) 46%, transparent 58%),
    linear-gradient(180deg, #ffdd6b, #f0b028) !important;
  color: #2a1c04 !important; border: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 6px 16px rgba(220, 150, 40, 0.42) !important;
}
#premium-panel .shop-action-btn:disabled {
  background: rgba(255, 255, 255, 0.05) !important; color: var(--g-muted) !important;
  box-shadow: none !important;
}
#premium-panel .shop-action-btn.is-login {
  background:
    linear-gradient(180deg, rgba(158, 194, 140, 0.32), rgba(120, 160, 100, 0.16)),
    rgba(40, 34, 22, 0.6) !important;
  color: #fff !important;
}

/* --- Bouton Fermer (sous la boîte) : verre sombre cohérent (fini le blanc crème) --- */
#premium-panel #btn-close-premium {
  margin-top: 12px; padding: 12px 40px; border-radius: 12px;
  font: 800 14.5px 'Trebuchet MS', system-ui, sans-serif; letter-spacing: 0.4px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
    rgba(15, 29, 42, 0.6) !important;
  border: 1px solid var(--g-edge) !important; color: var(--g-text) !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--g-shadow-float) !important;
}
#premium-panel #btn-close-premium:hover {
  border-color: rgba(var(--g-accent), 0.55) !important; color: #fff !important;
  transform: translateY(-1px);
}

/* --- Popup boutique AUTONOME (#dovion-shop-ov : liste open() + « Mes achats ») : verre chaud ---
   Ce popup n'est PAS sous #premium-panel → non atteint par les règles ci-dessus. On le ré-habille
   ici (il n'était qu'en slate sombre injecté par shop-stripe.js). Il hérite des tokens chauds via
   le scope #dovion-shop-ov ; spécificité #id .classe → prime sur le style injecté à l'exécution. */
#dovion-shop-ov {
  background: var(--g-veil) !important;
  backdrop-filter: blur(15px) saturate(1.12) brightness(0.98);
  -webkit-backdrop-filter: blur(15px) saturate(1.12) brightness(0.98);
}
#dovion-shop-ov .ds-card {
  background: var(--g-panel-bg) !important; color: var(--g-text) !important;
  border: 1px solid var(--g-edge) !important; border-radius: var(--g-radius-lg) !important;
  backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: var(--g-shadow-panel) !important;
}
#dovion-shop-ov .ds-card h2 { color: #fff !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); }
#dovion-shop-ov .ds-sub, #dovion-shop-ov .ds-note { color: var(--g-muted) !important; }
#dovion-shop-ov .ds-pack {
  background: var(--g-card-bg-2) !important; border: 1px solid var(--g-edge) !important;
  border-radius: 12px !important;
}
#dovion-shop-ov .ds-pack b { color: #fff !important; }
#dovion-shop-ov .ds-pack small { color: var(--g-muted) !important; }
#dovion-shop-ov .ds-buy {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.04) 46%, transparent 58%),
    linear-gradient(180deg, #ffdd6b, #f0b028) !important;
  color: #2a1c04 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 6px 16px rgba(220, 150, 40, 0.42) !important;
}
#dovion-shop-ov .ds-close {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
    rgba(40, 30, 20, 0.55) !important;
  border: 1px solid var(--g-edge) !important; color: var(--g-text) !important;
}
#dovion-shop-ov .ds-close:hover { border-color: var(--g-edge-strong) !important; color: #fff !important; }

/* Confirmation d'achat + toast (dalles autonomes append au body) : verre chaud explicite
   (hors scope des tokens, on peint en dur pour rester cohérent avec la boutique). */
#dovion-buy-celebrate .dbc-card {
  background:
    radial-gradient(120% 90% at 50% -6%, rgba(255, 206, 126, 0.20), transparent 62%),
    linear-gradient(157deg, rgba(255, 248, 233, 0.10), rgba(255, 248, 233, 0.02) 34%, rgba(44, 30, 18, 0.04)),
    linear-gradient(180deg, rgba(58, 44, 29, 0.92), rgba(40, 30, 19, 0.95)) !important;
  border: 1px solid rgba(255, 206, 126, 0.5) !important;
  box-shadow: inset 0 1px 0 rgba(255, 250, 240, 0.22), 0 22px 60px rgba(10, 7, 4, 0.6), 0 0 26px rgba(255, 206, 126, 0.18) !important;
}
#dovion-buy-celebrate .dbc-check { background: linear-gradient(180deg, #a6cf92, #7fae68) !important; }
#dovion-buy-celebrate .dbc-title { color: #f7edd9 !important; }
#dovion-buy-celebrate .dbc-sub { color: #ffce7e !important; }
#dovion-buy-celebrate .dbc-coin { color: #ffce7e !important; }
#dovion-shop-toast {
  background: linear-gradient(180deg, rgba(58, 44, 29, 0.92), rgba(40, 30, 19, 0.95)) !important;
  border: 1px solid rgba(228, 178, 96, 0.3) !important; color: #f7edd9 !important;
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
}

/* ============================ 3. PARAMÈTRES (#options-panel) ============================ */
#options-panel .opt-lead { color: var(--g-text-soft); }
#options-panel #options-grid { gap: 16px; }

/* Cartes de réglage : verre léger, en-tête net, icône dorée. */
#options-panel .opt-card {
  background: var(--g-card-bg) !important;
  border: 1px solid var(--g-edge) !important;
  border-radius: var(--g-radius-sm) !important;
  padding: 16px 18px;
  box-shadow: var(--g-shadow-card);
}
#options-panel .opt-card h4 { color: #fff; }
#options-panel .opt-ic {
  background:
    linear-gradient(180deg, rgba(255, 215, 114, 0.28), rgba(255, 215, 114, 0.1)),
    rgba(12, 26, 38, 0.5) !important;
  border: 1px solid rgba(var(--g-gold-soft), 0.4);
  color: var(--g-gold) !important;
}
#options-panel .opt-note { color: var(--g-muted); }

/* Curseurs : rail de verre creusé + remplissage cyan→or lumineux. */
#options-panel .opt-card label input[type="range"] {
  height: 7px;
  background: linear-gradient(90deg, #48c8ff, var(--g-gold)) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
#options-panel .opt-card label input[type="range"]::-webkit-slider-thumb {
  background: #f4fbff; border: 2px solid var(--g-gold);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 0 4px rgba(var(--g-gold-soft), 0);
  transition: transform .12s ease, box-shadow .15s ease;
}
#options-panel .opt-card label input[type="range"]::-webkit-slider-thumb:hover { box-shadow: 0 2px 8px rgba(0,0,0,.45), 0 0 0 5px rgba(var(--g-gold-soft), 0.18); }

/* Sélecteurs / cases : verre. */
#options-panel .opt-card label select {
  background-color: rgba(10, 22, 34, 0.6);
  border: 1px solid var(--g-edge); color: var(--g-text);
}
#options-panel .opt-card label select:hover { border-color: rgba(var(--g-accent), 0.55); }
#options-panel .opt-card label.chk input[type="checkbox"] {
  background: rgba(10, 22, 34, 0.6); border: 2px solid var(--g-edge-strong);
}
#options-panel .opt-card label.chk input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #48c8ff, var(--g-gold)); border-color: var(--g-gold);
}

/* Interrupteur (mode radio) : rail de verre. */
#options-panel .opt-switch {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)),
    rgba(10, 22, 34, 0.7);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}
#options-panel .opt-switch:checked { background: linear-gradient(90deg, #48c8ff, var(--g-gold)); }

/* Ligne mode radio : bandeau de verre. */
#options-panel .opt-radio-row {
  background: var(--g-card-bg-2) !important;
  border: 1px solid var(--g-edge) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Sélecteur de piste (popup) : verre. */
#options-panel .opt-track-toggle {
  background: var(--g-field-bg); border: 1px solid var(--g-edge); color: var(--g-text);
}
#options-panel .opt-track-toggle:hover { border-color: rgba(var(--g-accent), 0.55); }
#options-panel .opt-track-toggle[aria-expanded="true"] { border-color: var(--g-gold); }
#options-panel .opt-track-toggle-cur { color: var(--g-gold); }
#options-panel .opt-track-pop {
  background: rgba(12, 26, 40, 0.94) !important;
  border: 1px solid var(--g-edge-strong) !important;
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 20px 48px rgba(0, 0, 0, 0.5) !important;
}
#options-panel .opt-track {
  background: var(--g-card-bg-2) !important; border: 1px solid var(--g-edge) !important;
}
#options-panel .opt-track:hover { border-color: rgba(var(--g-accent), 0.55) !important; }
#options-panel .opt-track.selected { border-color: var(--g-gold) !important; background: linear-gradient(180deg, rgba(255,215,114,.12), rgba(255,215,114,.03)), rgba(18,30,26,.6) !important; }
#options-panel .opt-track.selected .opt-track-name { color: var(--g-gold); }
#options-panel .opt-track-listen {
  background:
    linear-gradient(180deg, rgba(127, 212, 255, 0.2), rgba(72, 160, 220, 0.08)),
    rgba(12, 26, 38, 0.5); border: 1px solid rgba(var(--g-accent), 0.4); color: var(--g-text-soft);
}
#options-panel .opt-track-listen:hover { border-color: rgba(var(--g-accent), 0.7); color: #fff; }

/* Liste des meilleurs capitaines. */
#options-panel .opt-captains-list li { border-bottom-color: rgba(255, 255, 255, 0.07); }
#options-panel .opt-captains-list b { color: var(--g-gold); }

/* ============================ 4. ÉCRAN DE MORT (#death-screen) ============================ */
/* Refonte Ghibli CLAIRE 2026-07-10 : l'écran de mort n'est plus une dalle de verre SOMBRE.
   Son thème (carte porcelaine sur ciel de beau jour) + son layout « tient sans scroll »
   vivent désormais dans style.css (section « ÉCRAN DE MORT — refonte Ghibli »), source de
   vérité UNIQUE. glass-ui ne surcharge plus la mort — sinon ses `!important` sombres
   reprendraient le dessus (glass-ui est chargé en dernier). Ne PAS réintroduire ici de
   règle #death-* : la modifier dans style.css. Le garde-fou anti-débordement latéral
   (width: min(900px, calc(100vw - 24px))) a été repris tel quel côté style.css. */

/* ============================ 5. AUTRES POPUPS ============================ */
/* Popups navires (equip/class/arm) : fond givré sombre + boîtes de verre.
   ⚠ #gallery-panel (arbre Y) RETIRÉ du groupe (2026-07-13) : le voile sombre + blur(14px)
   masquaient totalement la partie — or le Y doit laisser VOIR le jeu derrière
   (« je vois si on m'attaque »). Son style vit dans style.css (teinte légère ; son flou
   résiduel a depuis été retiré pour la perf — PERF 2026-08 —, fond de boîte opacifié). */
#equip-panel, #class-panel, #arm-panel {
  background: var(--g-veil) !important;
  background-image:
    linear-gradient(rgba(127, 212, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 212, 255, 0.03) 1px, transparent 1px),
    var(--g-veil) !important;
  background-size: 46px 46px, 46px 46px, auto !important;
  backdrop-filter: blur(14px) saturate(1.12) brightness(0.94);
  -webkit-backdrop-filter: blur(14px) saturate(1.12) brightness(0.94);
}

/* Tutoriel : boîte de verre + onglets pilules. */
#tutorial-box {
  background: var(--g-panel-bg) !important;
  border: 1px solid var(--g-edge) !important;
  border-radius: var(--g-radius-lg) !important;
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: var(--g-shadow-panel) !important;
}
#tutorial-panel .tuto-tab {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
    rgba(12, 26, 38, 0.5);
  border: 1px solid var(--g-edge); color: var(--g-text-soft);
}
#tutorial-panel .tuto-tab:hover { border-color: rgba(var(--g-accent), 0.55); color: #fff; }
#tutorial-panel .tuto-tab.selected {
  color: #06263a;
  background: linear-gradient(180deg, #9ee0ff, #5ab6ea);
  border-color: rgba(var(--g-accent), 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 12px rgba(72, 160, 220, 0.35);
}

/* Quêtes : boîte de verre. */
#quests-box {
  background: var(--g-panel-bg) !important;
  border: 1px solid var(--g-edge) !important;
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: var(--g-shadow-panel) !important;
}

/* Modale coffre (récompense) : voile givré + dalle de verre chaud. */
.chest-modal-backdrop {
  background: var(--g-veil) !important;
  backdrop-filter: blur(14px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.1) !important;
}
.chest-modal-box {
  background:
    radial-gradient(120% 90% at 50% -6%, rgba(255, 215, 114, 0.18), transparent 62%),
    linear-gradient(157deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02) 34%, rgba(9, 20, 32, 0.04)),
    linear-gradient(180deg, rgba(24, 38, 56, 0.9), rgba(15, 27, 42, 0.94)) !important;
  border: 1px solid rgba(var(--g-gold-soft), 0.5) !important;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--g-shadow-panel), 0 0 26px rgba(var(--g-gold-soft), 0.16) !important;
}
.chest-modal-x {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
    rgba(14, 27, 40, 0.5);
  border: 1px solid var(--g-edge); color: var(--g-text-soft);
}

/* Panneaux navires (equip/class/arm/gallery) : colonnes + cartes de verre. */
.equip-col {
  background: var(--g-card-bg) !important;
  border: 1px solid var(--g-edge) !important;
  box-shadow: var(--g-shadow-card);
}
.equip-opt, .arm-slot {
  background: var(--g-card-bg-2) !important;
  border: 1px solid var(--g-edge) !important;
}
.equip-opt.recommended { border-color: rgba(var(--g-accent), 0.7) !important; box-shadow: 0 0 0 1px rgba(var(--g-accent), 0.5) inset; }
.equip-opt.owned, .arm-slot.sel { border-color: rgba(var(--g-gold-soft), 0.7) !important; }
.class-card, .gallery-card {
  background: var(--g-card-bg) !important;
  border: 1px solid var(--g-edge) !important;
  box-shadow: var(--g-shadow-card);
  transition: border-color .16s ease, transform .12s ease, box-shadow .16s ease;
}
.class-card:hover, .gallery-card:hover {
  border-color: rgba(var(--g-accent), 0.55) !important; transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 24px rgba(4, 14, 24, 0.4);
}

/* Formulaire de contact / feedback : champs de verre. */
#feedback-panel input,
#feedback-panel textarea,
#feedback-panel select {
  background: var(--g-field-bg);
  border: 1px solid var(--g-edge); color: var(--g-text);
}
#feedback-panel input:focus,
#feedback-panel textarea:focus { outline: none; border-color: rgba(var(--g-accent), 0.7); }

/* Leaderboard en jeu : verre discret, très lisible. */
/* Le classement est affiché en PERMANENCE en jeu → son backdrop-filter blur(14px) recompositait tout
   le canvas animé sous lui à CHAQUE frame (gros coût constant). Retiré ; fond remonté 0.62 → 0.80 pour
   garder l'aspect « verre sombre » et la lisibilité sans le flou (imperceptible sur une liste de texte). */
#leaderboard {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),
    rgba(9, 18, 28, 0.80) !important;
  border: 1px solid var(--g-edge) !important;
  border-radius: 14px !important;
  box-shadow: var(--g-shadow-card);
}

/* ============================ 6. HUD EN JEU ============================ */
/* Bulle de quête : verre sombre lisible (priorité contraste > effet). */
#quest-bubble {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01)),
    rgba(10, 20, 30, 0.82) !important;
  border: 1px solid var(--g-edge) !important;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: var(--g-shadow-float);
}

/* Bandeau boutique d'île en jeu (#shop-bar) : verre sombre. */
#shop-bar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),
    rgba(9, 18, 28, 0.78) !important;
  border: 1px solid var(--g-edge) !important;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

/* Bannières broadcast d'événement (boss / héli) : recette verre + accent sémantique
   conservé (vert boss, or héli) → cohérence sans perdre la lecture fonctionnelle.
   Le liseré animé du bas (::after, signature broadcast) reste géré par style.css. */
#boss-banner,
#heli-notice {
  color: var(--g-text) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02) 40%, rgba(9, 20, 32, 0.04)),
    linear-gradient(100deg, rgba(12, 24, 38, 0.86), rgba(16, 32, 50, 0.82)) !important;
  border: 1px solid var(--g-edge) !important;
  border-left: 4px solid #4ec98a !important;     /* accent boss (vert désaturé) */
  border-radius: var(--g-radius-sm) !important;
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  box-shadow: var(--g-shadow-float) !important;
}
#heli-notice { border-left-color: var(--g-gold) !important; }   /* accent héli (or) */

/* Radio du Gardien : ALERTE → le rouge reste (fonctionnel), habillé en verre.
   La pulsation d'ombre (gRadioPulse) et le liseré du bas restent gérés par style.css. */
#gardien-radio {
  color: #ffe9e6 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02) 40%, rgba(20, 6, 6, 0.05)),
    linear-gradient(100deg, rgba(52, 10, 10, 0.86), rgba(74, 14, 14, 0.82)) !important;
  border: 1px solid rgba(255, 120, 110, 0.6) !important;
  border-left: 5px solid #ff5b4f !important;     /* alerte : rouge conservé */
  border-radius: var(--g-radius-sm) !important;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

/* Killfeed (ticker d'événements) : messages en verre discret, accent or conservé. */
#killfeed .feed-msg {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),
    rgba(9, 18, 28, 0.66) !important;
  border-left: 3px solid var(--g-gold) !important;
  border-radius: var(--g-radius-sm) !important;
  color: var(--g-text) !important;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}

/* Menu emoji flottant : verre sombre unifié (remplace le fond noir plat). */
#emoji-menu {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
    rgba(10, 20, 30, 0.72) !important;
  border: 1px solid var(--g-edge) !important;
  border-radius: var(--g-radius) !important;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--g-shadow-panel) !important;
}
#emoji-menu button {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),
    rgba(9, 18, 28, 0.5) !important;
  border: 1px solid var(--g-edge) !important;
}

/* Panneaux Flotte + Améliorations (base MOBILE/vtouch) : verre discret.
   Le rendu PC — Flotte + « Améliorations qui surgit » (body.has-stat-pts, sans cadre) —
   a une spécificité supérieure et n'est PAS touché ici ; son flou d'origine est depuis
   NEUTRALISÉ par la section 8 PERFORMANCE plus bas (fond opacifié 0,72 en compensation). */
body.vtouch #fleet-panel,
body.vtouch #stats-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),
    rgba(9, 18, 28, 0.62) !important;
  border: 1px solid var(--g-edge) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

/* Cartes du chantier naval (évolution de coque en mer) : verre + accent or au survol.
   `:not([class*="sy-b-"])` — les cartes d'évolution portent désormais un CODE COULEUR PAR BRANCHE
   (fond plein rouge/orange/bleu/jaune, cf. style.css .sy-b-*) : le verre sombre les écraserait. Seule
   la carte SANS branche (amélioration d'armement niv. 2) garde le traitement verre d'origine. */
#shipyard-bar .sy-card:not([class*="sy-b-"]) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
    rgba(12, 26, 40, 0.78) !important;
  border: 1px solid var(--g-edge) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}
/* cartes à code couleur : on ne reprend du verre que la géométrie (rayon, épaisseur de bord) */
#shipyard-bar .sy-card[class*="sy-b-"] { border-width: 2px; border-radius: 12px; }
#shipyard-bar .sy-card:not([class*="sy-b-"]):hover { border-color: rgba(var(--g-gold-soft), 0.7) !important; }

/* ============================ 7. RESPONSIVE ============================ */
/* --- Boutique : feuille quasi plein écran sur mobile, cibles plus grandes --- */
@media (max-width: 768px) {
  #premium-panel { padding: 0; }
  #premium-panel #premium-box {
    width: 100vw; max-height: 100dvh; height: 100dvh;
    border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important;
    /* fond plus opaque sur mobile = scroll plus fluide (moins de recomposition backdrop) */
    background:
      linear-gradient(157deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.015) 32%, rgba(9, 20, 32, 0.03)),
      linear-gradient(180deg, rgba(18, 32, 47, 0.96), rgba(11, 22, 34, 0.98)) !important;
  }
  #premium-panel #premium-scroll { padding: 14px 14px 16px; gap: 14px; }
  #premium-panel .premium-block { padding: 12px 13px; }
  #premium-panel #btn-close-premium { display: none; }   /* la croix .panel-x suffit en mobile plein écran */
  #premium-panel .panel-x { display: flex; }
  #premium-panel .shop-grid { grid-template-columns: 1fr; }
  #premium-panel .dovion-xp-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* --- Options : cartes pleine largeur sur petit écran --- */
@media (max-width: 640px) {
  #options-panel #options-grid { grid-template-columns: 1fr; gap: 12px; }
  #options-panel .opt-card { padding: 14px 15px; }
}

/* --- Death : responsive géré côté style.css (section « ÉCRAN DE MORT — refonte Ghibli »).
   glass-ui ne surcharge plus #death-box en responsive (sinon son padding, chargé après,
   reprendrait le dessus sur la compaction paysage). --- */

/* --- Boutique mobile : en-tête qui respire (titre + réserve empilables) --- */
@media (max-width: 560px) {
  #premium-panel .premium-head-row { gap: 8px; }
  #premium-panel #shop-reserve { font-size: 12px; padding: 5px 11px; }
}

/* Zone tactile : cibles ≥ 44px sur les actions principales des modales. */
body.vtouch #premium-panel .shop-action-btn,
body.vtouch #premium-panel .premium-buy,
body.vtouch #premium-panel .ds-pack-buy,
body.vtouch #btn-death-menu { min-height: 46px; }

/* Encoches / safe-area (iOS) sur les feuilles plein écran. */
@supports (padding: max(0px)) {
  @media (max-width: 768px) {
    #premium-panel #premium-head { padding-top: max(16px, env(safe-area-inset-top)); }
    #premium-panel #shop-action { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  }
}

/* ============================ 8. prefers-reduced-motion ============================ */
@media (prefers-reduced-motion: reduce) {
  #premium-panel .shop-item,
  #premium-panel .premium-card,
  #premium-panel .ds-pack-card,
  #premium-panel .shop-tab { transition: none !important; }
}

/* ====================================================================
   8. PERFORMANCE — pas de flou d'arrière-plan AU-DESSUS DU JEU
   ====================================================================
   Ajouté le 2026-07-25 (chasse aux micro-freezes).

   MESURE : le log du profileur (logs/perf.log) montrait des saccades
   INEXPLIQUÉES — ftAvg 2,75-5,31 ms (le JS du jeu ne coûte rien) mais
   gapMax jusqu'à 128,9 ms, 1 à 5 saccades par fenêtre de 2 s. Le réseau
   et l'application des instantanés ont été innocentés par la mesure
   (livraison 20,0/s, p99 67 ms ; applySnap 0,17 ms et 0,2 Ko de déchets
   par appel). Le temps part donc HORS de notre boucle JS : GC, style,
   ou COMPOSITION.

   POURQUOI CES RÈGLES-LÀ : `backdrop-filter: blur()` oblige le
   compositeur à re-flouter la zone dès que l'arrière-plan change. Or
   ici l'arrière-plan EST le canvas du jeu, qui change à CHAQUE frame —
   le flou est donc recalculé en continu, et une nouvelle surface est
   allouée à chaque APPARITION de l'élément. Les surcouches ci-dessous
   sont précisément celles qui surgissent PENDANT l'action (killfeed à
   chaque kill, bulle de quête, bandeaux boss/héli, radio du Gardien,
   chantier naval) : ça colle au symptôme « par moment ».

   COÛT VISUEL ~NUL : ces éléments ont déjà un fond opaque à 0,62-0,86 ;
   seul le killfeed (0,66) est remonté à 0,80 pour garder la lisibilité.
   Les PANNEAUX ET MODALES (boutique, options, arbre de classes,
   tutoriel, minimap plein écran…) gardent leur flou : leur arrière-plan
   est quasi statique, le compositeur n'y recalcule presque rien.

   RÉVERSIBLE : supprimer ce bloc restaure exactement l'ancien rendu. */
#quest-bubble,
#shop-bar,
#boss-banner,
#heli-notice,
#gardien-radio,
#killfeed .feed-msg,
#emoji-menu,
#shipyard-bar .sy-card,
body.vtouch #fleet-panel,
body.vtouch #stats-panel {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Killfeed : fond remonté 0,66 → 0,80 pour compenser la perte du flou
   (c'est la surcouche la plus transparente, et la plus fréquente). */
#killfeed .feed-msg {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),
    rgba(9, 18, 28, 0.80) !important;
}

/* Améliorations PC (#stats-panel hors vtouch) : le panneau SURGIT au-dessus du canvas animé
   dès qu'un point est dépensable (body.has-stat-pts — 2 points par niveau) ET à chaque passage
   de la souris dans le coin bas-gauche (body.stats-peek) — or on pilote à la souris, donc
   apparitions FRÉQUENTES en pleine action. Chaque apparition allouait une surface de backdrop,
   puis chaque frame payait le re-flou du jeu derrière (même famille de saccades que ci-dessus).
   Fond remonté 0,44 → 0,72 pour compenser la perte du flou (même recette que #leaderboard
   0,62 → 0,80) ; le fond 0,72 s'applique AUSSI à la variante épinglée .stats-pinned (avant :
   0,44) — cohérent et voulu, c'est le même panneau. `display` volontairement NON déclaré ici :
   l'affichage (none par défaut, block via les variantes) reste piloté par style.css seul. */
body:not(.vtouch).has-stat-pts #stats-panel,
body:not(.vtouch).stats-peek #stats-panel,
body:not(.vtouch).stats-pinned #stats-panel,
body:not(.vtouch) #stats-panel.stats-leaving {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(10, 24, 34, 0.72) !important;
}

/* Popups OUVRABLES EN PLEINE PARTIE (lot 3, audit 2026-08-14) : équipement/évolution/armement,
   quêtes et grande carte. La justification « arrière-plan quasi statique » des modales (plus haut)
   est FAUSSE pour celles-ci quand elles s'ouvrent PENDANT le jeu (openEquip/openClass à l'évolution,
   openArmUpgrade, openQuests via le chip, openMinimap au clic minimap) : le monde continue d'être
   rendu derrière (render() ne s'arrête jamais en play) → leur blur(14-15px) plein viewport (+22px
   pour la boîte interne des quêtes) était recomposité à CHAQUE frame. `body.in-game` est posé par
   la boucle (main.js, state ≠ menu — mort/spectateur inclus) : EN JEU le flou saute, au MENU
   (« Voir tout » des quêtes depuis l'accueil…) le verre est conservé. COÛT VISUEL ~NUL : le fond
   var(--g-veil) est déjà opaque à 0,68-0,80 — le « givre » reste porté par la teinte. */
body.in-game #equip-panel,
body.in-game #class-panel,
body.in-game #arm-panel,
body.in-game #quests-panel,
body.in-game #minimap-modal,
body.in-game #quests-box {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}