/* ARCADE JOUET — boutique (2026-10-18). Scopée html body.ui-arcade, chargée après css/accueil-arcade.css.
   Réutilise les jetons --ar-* posés par css/accueil-arcade.css (body.ui-arcade). */
/* =====================================================================================
   BOUTIQUE « ARCADE JOUET » (maquette « Boutique : deux onglets, une grille », choix Simon : style B).
   Une fenêtre crème, titre « Boutique », solde de perles, croix, 4 onglets (Cosmétiques, Perles, Boosts,
   Mes achats) posés par js/shop-stripe.js (setupArcadeShop), et UNE grille de cartes identiques :
   image, nom, prix au même endroit, bouton dodu (vert = acheter, bleu = équiper, orange = plus de perles).
   ⚠️ Le CSS du jeu empile 10 couches et des milliers de !important : chaque règle est scopée
   `html body.ui-arcade #premium-panel` (+ id) et en !important. Rien ne s'applique sans body.ui-arcade.
   ===================================================================================== */

/* ---------- 1. LE VOILE ET LA FENÊTRE ---------- */
html body.ui-arcade #premium-panel {
  background: rgba(16, 52, 74, .62) !important; backdrop-filter: none !important;
  padding: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important;
  box-sizing: border-box !important;
}
html body.ui-arcade #premium-panel.hidden { display: none !important; }
html body.ui-arcade #premium-panel, html body.ui-arcade #premium-panel * { font-family: var(--ar-font) !important; }
html body.ui-arcade #premium-panel #premium-box {
  position: relative !important; box-sizing: border-box !important;
  width: min(920px, 100%) !important; max-width: 100% !important;
  height: auto !important; max-height: calc(100vh - 32px) !important; max-height: calc(100dvh - 32px) !important;
  display: flex !important; flex-direction: column !important; overflow: hidden !important;
  margin: 0 auto !important; padding: 0 !important;
  background: var(--gc-stone) !important; color: var(--gc-text) !important;
  border: 4px solid var(--ar-ink) !important; border-radius: 26px !important;
  box-shadow: 0 8px 0 var(--ar-ink), 0 18px 40px rgba(0, 0, 0, .3) !important;
  backdrop-filter: none !important;
}
html body.ui-arcade #premium-panel #premium-box::before,
html body.ui-arcade #premium-panel #premium-box::after { display: none !important; }
html body.ui-arcade #premium-panel #btn-close-premium,
html body.ui-arcade #premium-panel #shop-action,
html body.ui-arcade #premium-panel .shop-hist-wrap,
html body.ui-arcade #premium-panel #shop-reserve-rank,
html body.ui-arcade #premium-panel #dovion-odj-cd,
html body.ui-arcade #premium-panel .shop-tag { display: none !important; }
html body.ui-arcade #premium-panel #premium-box :is(h2, h3, h4, b, span, p, li, small, div) { color: inherit; }

/* ---------- 2. LA CROIX ---------- */
html body.ui-arcade #premium-panel #premium-box > .panel-x {
  position: absolute !important; top: 12px !important; right: 12px !important; left: auto !important; z-index: 5 !important;
  width: 44px !important; height: 44px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font: 900 26px/1 var(--ar-font) !important; color: #fff !important;
  background: var(--ar-red) !important; border: 4px solid var(--ar-ink) !important; border-radius: 14px !important;
  box-shadow: 0 4px 0 var(--ar-ink) !important; transform: none !important; cursor: pointer !important;
}
html body.ui-arcade #premium-panel #premium-box > .panel-x:active { transform: translateY(3px) !important; box-shadow: 0 1px 0 var(--ar-ink) !important; }

/* ---------- 3. L'EN-TÊTE : titre, solde, onglets ---------- */
html body.ui-arcade #premium-panel #premium-head {
  flex: 0 0 auto !important; position: static !important; margin: 0 !important;
  padding: 14px 68px 12px 18px !important; background: transparent !important;
  border: 0 !important; border-bottom: 4px solid var(--ar-ink) !important; box-shadow: none !important;
}
html body.ui-arcade #premium-panel .premium-head-row {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px 14px !important; margin: 0 !important;
}
html body.ui-arcade #premium-panel #premium-head h2 {
  margin: 0 !important; font: 900 30px/1.05 var(--ar-font) !important; color: var(--gc-text) !important;
  letter-spacing: .01em !important; text-shadow: none !important; -webkit-text-fill-color: currentColor !important; background: none !important;
}
html body.ui-arcade #premium-panel #shop-reserve {
  display: inline-flex !important; align-items: center !important; gap: 6px !important; margin: 0 !important;
  padding: 6px 12px !important; border-radius: 999px !important; white-space: nowrap !important;
  background: var(--ar-yellow) !important; color: var(--ar-ink-2) !important;
  border: 3px solid var(--ar-ink) !important; box-shadow: 0 3px 0 var(--ar-ink) !important;
  font: 800 15px/1 var(--ar-font) !important;
}
html body.ui-arcade #premium-panel #shop-reserve :is(span, b) { color: var(--ar-ink-2) !important; font-weight: 900 !important; }
html body.ui-arcade #premium-panel .ar-tabbar {
  display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; margin: 14px 0 2px !important;
  overflow-x: auto !important; scrollbar-width: none !important; padding: 0 0 6px !important;
}
html body.ui-arcade #premium-panel .ar-tabbar::-webkit-scrollbar { display: none !important; }
html body.ui-arcade #premium-panel .ar-tabbar .ar-tab {
  flex: 1 1 0 !important; min-width: max-content !important; margin: 0 !important; padding: 10px 14px !important;
  font: 900 15px/1 var(--ar-font) !important; color: var(--gc-text) !important; white-space: nowrap !important;
  background: var(--gc-card) !important; border: 3px solid var(--ar-ink) !important; border-radius: 14px !important;
  box-shadow: 0 4px 0 var(--ar-ink) !important; transform: none !important; cursor: pointer !important;
}
html body.ui-arcade #premium-panel .ar-tabbar .ar-tab.is-active {
  background: var(--ar-blue) !important; color: #fff !important; box-shadow: 0 4px 0 var(--ar-blue-d) !important; border-color: var(--ar-blue-d) !important;
}
html body.ui-arcade #premium-panel .ar-tabbar .ar-tab:active { transform: translateY(3px) !important; box-shadow: 0 1px 0 var(--ar-ink) !important; }

/* ---------- 4. LE CORPS QUI DÉFILE ---------- */
html body.ui-arcade #premium-panel #premium-scroll {
  flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important;
  padding: 16px 18px 22px !important; margin: 0 !important; max-height: none !important; background: transparent !important;
}
html body.ui-arcade #premium-panel .shop-zone { display: block !important; padding: 0 !important; margin: 0 !important; }
html body.ui-arcade #premium-panel .shop-zone.hidden,
html body.ui-arcade #premium-panel .hidden { display: none !important; }
html body.ui-arcade #premium-panel .premium-block {
  background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 18px !important;
}
html body.ui-arcade #premium-panel .premium-block-head { margin: 0 0 10px !important; padding: 0 !important; border: 0 !important; background: none !important; }
html body.ui-arcade #premium-panel .premium-block-head h4,
html body.ui-arcade #premium-panel .cosmo-sub {
  margin: 0 !important; font: 900 18px/1.2 var(--ar-font) !important; color: var(--gc-text) !important;
  text-transform: none !important; letter-spacing: 0 !important; background: none !important; -webkit-text-fill-color: currentColor !important;
}
html body.ui-arcade #premium-panel .cosmo-sub { margin: 16px 0 10px !important; font-size: 16px !important; opacity: .85 !important; text-align: left !important; }
html body.ui-arcade #premium-panel .premium-block-head { text-align: left !important; display: block !important; }
html body.ui-arcade #premium-panel .cosmo-sub:first-of-type { margin-top: 0 !important; }
html body.ui-arcade #premium-panel .shop-emoji-hint { display: block !important; font: 700 12px/1.3 var(--ar-font) !important; opacity: .7 !important; margin-top: 2px !important; }

/* ---------- 5. LA GRILLE ET LA CARTE UNIQUE ---------- */
html body.ui-arcade #premium-panel :is(#premium-skins, #premium-trails, #premium-flags, #shop-boosts, #ar-daily, #dovion-xp-packs, #dovion-bundles) {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 14px !important; margin: 0 !important; padding: 4px 0 6px !important; width: 100% !important; box-sizing: border-box !important;
  overflow: visible !important; flex-wrap: initial !important;
}
html body.ui-arcade #premium-panel #ar-daily { margin: 0 0 16px !important; }
html body.ui-arcade #premium-panel #ar-daily.hidden { display: none !important; }
html body.ui-arcade #premium-panel :is(.ar-card, .ds-pack-card, .bundle-card) {
  position: relative !important; box-sizing: border-box !important; min-width: 0 !important; width: auto !important; height: auto !important;
  display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 6px !important;
  margin: 0 !important; padding: 10px 10px 12px !important; text-align: center !important;
  background: var(--gc-card) !important; color: var(--gc-text) !important;
  border: 3px solid var(--ar-ink) !important; border-radius: 18px !important;
  box-shadow: 0 5px 0 var(--ar-ink) !important; transform: none !important; filter: none !important; opacity: 1 !important;
  cursor: default !important; overflow: visible !important;
}
html body.ui-arcade #premium-panel :is(.ar-card, .ds-pack-card, .bundle-card)::before,
html body.ui-arcade #premium-panel :is(.ar-card, .ds-pack-card, .bundle-card)::after { display: none !important; }
html body.ui-arcade #premium-panel .ar-card.is-worn { background: #5a4128 !important; }
html body.ui-arcade #premium-panel .ar-card.is-selected { outline: none !important; }
/* image : même cadre pour tout le monde */
html body.ui-arcade #premium-panel .ar-card .premium-card-prev,
html body.ui-arcade #premium-panel .ar-card .shop-item-ic {
  display: flex !important; align-items: center !important; justify-content: center !important;
  height: 86px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important;
  border-radius: 12px !important; overflow: hidden !important; border: 2px solid rgba(26, 61, 85, .2) !important;
  background: #3a2817 !important; font-size: 44px !important; line-height: 1 !important; position: static !important;
}
html body.ui-arcade #premium-panel .ar-card .premium-card-prev canvas { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
html body.ui-arcade #premium-panel .ar-card .premium-card-prev .flag-vis { width: 80% !important; height: 70% !important; position: relative !important; }
html body.ui-arcade #premium-panel .ar-daily-card .premium-card-prev { background: var(--ar-yellow) !important; }
html body.ui-arcade #premium-panel .ar-daily-card .premium-card-prev svg { width: 64px !important; height: 54px !important; }
/* nom */
html body.ui-arcade #premium-panel .ar-card :is(.premium-card-name, .shop-item-body > b) {
  display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
  margin: 2px 0 0 !important; font: 900 15px/1.15 var(--ar-font) !important; color: var(--gc-text) !important; min-height: 2.3em !important;
  white-space: normal !important; overflow: hidden !important; position: static !important; text-transform: none !important; letter-spacing: 0 !important;
}
html body.ui-arcade #premium-panel .ar-card .shop-item-body { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; margin: 0 !important; }
html body.ui-arcade #premium-panel .ar-card .shop-item-body small {
  display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important;
  font: 700 12px/1.25 var(--ar-font) !important; color: var(--gc-text) !important; opacity: .7 !important; min-height: 30px !important;
}
/* prix / état : toujours juste au-dessus du bouton */
html body.ui-arcade #premium-panel .ar-card :is(.premium-lock, .shop-item-price) {
  position: static !important; display: block !important; margin: auto 0 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important; transform: none !important;
  font: 900 14px/1.2 var(--ar-font) !important; color: var(--ar-orange-d) !important; white-space: nowrap !important;
  overflow: hidden !important; text-overflow: ellipsis !important; inset: auto !important; text-transform: none !important; letter-spacing: 0 !important;
}
html body.ui-arcade #premium-panel .ar-card .lock-owned { color: var(--ar-blue-d) !important; }
html body.ui-arcade #premium-panel .ar-card .shop-item-qty {
  position: absolute !important; top: 6px !important; right: 6px !important; z-index: 2 !important;
  padding: 3px 8px !important; border-radius: 999px !important; font: 900 13px/1 var(--ar-font) !important;
  background: var(--ar-yellow) !important; color: var(--ar-ink-2) !important; border: 2px solid var(--ar-ink) !important;
}
/* le bouton dodu (cartes perles ET packs en €) */
html body.ui-arcade #premium-panel :is(.ar-buy, .ds-pack-buy) {
  display: block !important; width: 100% !important; box-sizing: border-box !important; margin: 4px 0 0 !important; padding: 10px 8px !important;
  font: 900 15px/1 var(--ar-font) !important; color: #fff !important; white-space: nowrap !important;
  overflow: hidden !important; text-overflow: ellipsis !important;
  background: var(--ar-green) !important; border: 3px solid var(--ar-green-d) !important; border-radius: 13px !important;
  box-shadow: 0 4px 0 var(--ar-green-d) !important; text-shadow: 0 1px 0 rgba(0, 0, 0, .25) !important;
  transform: none !important; filter: none !important; opacity: 1 !important; cursor: pointer !important;
}
html body.ui-arcade #premium-panel :is(.ar-buy, .ds-pack-buy):active:not(:disabled) { transform: translateY(3px) !important; box-shadow: 0 1px 0 var(--ar-green-d) !important; }
html body.ui-arcade #premium-panel .ar-buy--equip { background: var(--ar-blue) !important; border-color: var(--ar-blue-d) !important; box-shadow: 0 4px 0 var(--ar-blue-d) !important; }
html body.ui-arcade #premium-panel .ar-buy--more { background: var(--ar-orange) !important; border-color: var(--ar-orange-d) !important; box-shadow: 0 4px 0 var(--ar-orange-d) !important; }
html body.ui-arcade #premium-panel .ar-buy--off,
html body.ui-arcade #premium-panel :is(.ar-buy, .ds-pack-buy):disabled {
  background: #4a3a2a !important; color: var(--gc-text-dim) !important; border-color: rgba(26, 61, 85, .35) !important;
  box-shadow: 0 4px 0 rgba(26, 61, 85, .25) !important; text-shadow: none !important; cursor: default !important;
}

/* ---------- 6. ONGLET PERLES : packs en €, trésors, encarts ---------- */
html body.ui-arcade #premium-panel .ds-pack-card { padding-top: 16px !important; }
html body.ui-arcade #premium-panel .ds-pack-card .ds-pack-coin {
  /* (2026-10-21) visuel = tas de perles nacrées en SVG (cf. shop-stripe.js pearlPile) : fond clair chaud, hauteur libre */
  height: auto !important; min-height: 74px !important; display: flex !important; align-items: flex-end !important; justify-content: center !important;
  font-size: 0 !important; filter: none !important; padding: 6px 4px 4px !important;
  background: radial-gradient(90% 90% at 50% 70%, rgba(255, 226, 140, .8), rgba(255, 250, 240, .25) 75%) !important; border-radius: 12px !important; border: 2px solid rgba(59, 42, 0, .25) !important;
}
html body.ui-arcade #premium-panel .ds-pack-card .ds-pack-xp { font: 900 22px/1 var(--ar-font) !important; color: var(--gc-text) !important; }
html body.ui-arcade #premium-panel .ds-pack-card .ds-pack-xp small { font-size: 12px !important; color: var(--gc-text) !important; opacity: .7 !important; }
html body.ui-arcade #premium-panel .ds-pack-card :is(.ds-pack-name) { font: 700 12px/1.2 var(--ar-font) !important; color: var(--gc-text) !important; opacity: .75 !important; min-height: 0 !important; }
html body.ui-arcade #premium-panel .ds-pack-card .ds-pack-bonus {
  align-self: center !important; font: 900 12px/1 var(--ar-font) !important; color: var(--ar-green-d) !important;
  background: #dff5d8 !important; border: 2px solid var(--ar-green-d) !important; border-radius: 999px !important; padding: 4px 10px !important; box-shadow: none !important;
}
html body.ui-arcade #premium-panel :is(#dovion-xp-packs, #dovion-bundles) :is(.ds-pack-card, .bundle-card) .ds-pack-buy:not(:disabled),
html body.ui-arcade #premium-panel #dovion-odj .ds-pack-buy:not(:disabled) {
  margin-top: auto !important; background: var(--ar-green) !important; background-color: var(--ar-green) !important; background-image: none !important;
  color: #fff !important; border-color: var(--ar-green-d) !important; box-shadow: 0 4px 0 var(--ar-green-d) !important;
}
html body.ui-arcade #premium-panel #dovion-odj .ds-pack-buy:not(:disabled) { margin-top: 0 !important; }
html body.ui-arcade #premium-panel .ds-pack-card .ds-pack-ribbon {
  position: absolute !important; top: -12px !important; left: 50% !important; transform: translateX(-50%) !important;
  font: 900 11px/1 var(--ar-font) !important; letter-spacing: .03em !important; padding: 4px 10px !important;
  color: #fff !important; background: var(--ar-orange) !important; border: 2px solid var(--ar-ink) !important; border-radius: 999px !important; box-shadow: none !important;
}
html body.ui-arcade #premium-panel .bundle-card :is(.bundle-name) { font: 900 16px/1.2 var(--ar-font) !important; color: var(--gc-text) !important; }
html body.ui-arcade #premium-panel .bundle-card :is(.bundle-tag, .bundle-perks) { font: 700 12px/1.3 var(--ar-font) !important; color: var(--gc-text) !important; opacity: .75 !important; margin: 0 !important; }
html body.ui-arcade #premium-panel .bundle-card .ds-pack-buy { margin-top: auto !important; }
html body.ui-arcade #premium-panel .ar-perles-top, html body.ui-arcade #premium-panel .ar-perles-bottom { display: block !important; }
/* encarts (1er achat doublé, offre du jour, pub) : une bande sobre, sans compte à rebours */
html body.ui-arcade #premium-panel :is(#dovion-fpb, #dovion-odj) {
  display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important;
  margin: 0 0 16px !important; padding: 10px 14px !important; box-sizing: border-box !important;
  background: var(--ar-yellow) !important; color: var(--ar-ink-2) !important;
  border: 3px solid var(--ar-ink) !important; border-radius: 16px !important; box-shadow: 0 4px 0 var(--ar-ink) !important;
  font: 800 14px/1.3 var(--ar-font) !important;
}
html body.ui-arcade #premium-panel #dovion-odj { background: var(--gc-card) !important; color: var(--gc-text) !important; }
html body.ui-arcade #premium-panel #dovion-odj :is(.odj-star) { color: var(--ar-orange) !important; font-size: 22px !important; }
html body.ui-arcade #premium-panel #dovion-odj .odj-title { font: 800 14px/1.3 var(--ar-font) !important; color: var(--gc-text) !important; }
html body.ui-arcade #premium-panel #dovion-odj .odj-buy { width: auto !important; margin: 0 !important; padding: 9px 16px !important; }
html body.ui-arcade #premium-panel #shop-ad-block .premium-cta-row { display: flex !important; }
html body.ui-arcade #premium-panel #shop-ad-xp {
  width: 100% !important; padding: 12px !important; font: 900 15px/1.2 var(--ar-font) !important; color: #fff !important;
  background: var(--ar-blue) !important; border: 3px solid var(--ar-blue-d) !important; border-radius: 14px !important; box-shadow: 0 4px 0 var(--ar-blue-d) !important;
}
/* carte VIP : même cadre crème/encre, une colonne */
html body.ui-arcade #premium-panel #shop-grade-card {
  display: block !important; margin: 0 0 18px !important; padding: 14px 16px !important; box-sizing: border-box !important;
  background: var(--gc-card) !important; color: var(--gc-text) !important; border: 3px solid var(--ar-ink) !important;
  border-radius: 18px !important; box-shadow: 0 5px 0 var(--ar-ink) !important; animation: none !important;
}
html body.ui-arcade #premium-panel #shop-grade-card::before, html body.ui-arcade #premium-panel #shop-grade-card::after { display: none !important; }
html body.ui-arcade #premium-panel #shop-grade-card :is(.sg-eyebrow, .sg-title, .sg-sub, .sg-perks li, .sg-hint, .sg-st-row span) { color: var(--gc-text) !important; -webkit-text-fill-color: currentColor !important; background-image: none !important; }
html body.ui-arcade #premium-panel #shop-grade-card .sg-title { font: 900 20px/1.1 var(--ar-font) !important; }
html body.ui-arcade #premium-panel #shop-grade-card .sg-cta { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }
html body.ui-arcade #premium-panel #shop-grade-card .sg-btn {
  flex: 1 1 140px !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important;
  padding: 10px 12px !important; color: #fff !important; font: 900 14px/1.1 var(--ar-font) !important;
  background: var(--ar-green) !important; border: 3px solid var(--ar-green-d) !important; border-radius: 14px !important; box-shadow: 0 4px 0 var(--ar-green-d) !important;
}
html body.ui-arcade #premium-panel #shop-grade-card .sg-btn * { color: #fff !important; }
html body.ui-arcade #premium-panel #shop-grade-card .sg-btn.sg-eur { background: var(--ar-orange) !important; border-color: var(--ar-orange-d) !important; box-shadow: 0 4px 0 var(--ar-orange-d) !important; }

/* ---------- 7. ONGLET MES ACHATS : inventaire + historique ---------- */
html body.ui-arcade #premium-panel #inv-body { color: var(--gc-text) !important; }
html body.ui-arcade #premium-panel #inv-body :is(h3, b, span, p, li) { color: var(--gc-text) !important; }
html body.ui-arcade #premium-panel #inv-body .inv-tiles { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; gap: 12px !important; }
html body.ui-arcade #premium-panel #inv-body :is(.inv-tile, .inv-sec, .inv-boost) {
  background: var(--gc-card) !important; border: 3px solid var(--ar-ink) !important; border-radius: 16px !important; box-shadow: 0 4px 0 var(--ar-ink) !important; box-sizing: border-box !important;
}
html body.ui-arcade #premium-panel #inv-body .inv-sec { margin: 14px 0 0 !important; padding: 12px 14px !important; text-align: left !important; }
/* les règles d'origine de l'inventaire sont scopées #stuff-panel : on redonne ici sa mise en page */
html body.ui-arcade #premium-panel #inv-body .inv-tile { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 3px !important; padding: 10px 12px !important; min-width: 0 !important; }
html body.ui-arcade #premium-panel #inv-body .inv-tile-k { font: 800 12px/1.2 var(--ar-font) !important; opacity: .7 !important; text-transform: uppercase !important; letter-spacing: .03em !important; }
html body.ui-arcade #premium-panel #inv-body .inv-tile-v { font: 900 22px/1.1 var(--ar-font) !important; }
html body.ui-arcade #premium-panel #inv-body .inv-tile-s { font: 700 12px/1.25 var(--ar-font) !important; opacity: .75 !important; }
html body.ui-arcade #premium-panel #inv-body .inv-tile--vip { background: var(--ar-yellow) !important; }
html body.ui-arcade #premium-panel #inv-body h3 { margin: 0 0 4px !important; font: 900 16px/1.2 var(--ar-font) !important; text-align: left !important; }
html body.ui-arcade #premium-panel #inv-body :is(.inv-hint, .inv-line, .inv-empty) { margin: 0 0 8px !important; font: 700 13px/1.35 var(--ar-font) !important; opacity: .8 !important; text-align: left !important; }
html body.ui-arcade #premium-panel #inv-body .inv-perks { list-style: none !important; margin: 0 0 10px !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; text-align: left !important; }
html body.ui-arcade #premium-panel #inv-body .inv-perks li { font: 700 13px/1.35 var(--ar-font) !important; }
html body.ui-arcade #premium-panel #inv-body .inv-login-cta { display: block !important; width: 100% !important; margin: 8px 0 0 !important; padding: 12px !important; font: 900 15px/1 var(--ar-font) !important; }
html body.ui-arcade #premium-panel #inv-body .inv-cd { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 4px 10px !important; padding: 6px 0 !important; border-top: 2px dashed rgba(26, 61, 85, .2) !important; }
html body.ui-arcade #premium-panel #inv-body .inv-cd-nm { flex: 1 1 180px !important; font: 800 13px/1.3 var(--ar-font) !important; }
html body.ui-arcade #premium-panel #inv-body .inv-cd-st { font: 700 12px/1.3 var(--ar-font) !important; }
html body.ui-arcade #premium-panel #inv-body .inv-cd-ok { color: var(--ar-green-d) !important; }
html body.ui-arcade #premium-panel #inv-body .inv-boost {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 4px 10px !important;
  margin: 8px 0 0 !important; padding: 8px 10px !important; background: var(--gc-card) !important;
}
html body.ui-arcade #premium-panel #inv-body .inv-boost-head { display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; }
html body.ui-arcade #premium-panel #inv-body .inv-boost-ic { font-size: 22px !important; }
html body.ui-arcade #premium-panel #inv-body .inv-boost-txt { display: flex !important; flex-direction: column !important; min-width: 0 !important; }
html body.ui-arcade #premium-panel #inv-body .inv-boost-txt b { font: 900 14px/1.2 var(--ar-font) !important; }
html body.ui-arcade #premium-panel #inv-body .inv-boost-desc { font: 700 12px/1.25 var(--ar-font) !important; opacity: .7 !important; }
html body.ui-arcade #premium-panel #inv-body .inv-boost-ctl { display: flex !important; align-items: center !important; gap: 8px !important; }
html body.ui-arcade #premium-panel #inv-body .inv-step { width: 36px !important; height: 36px !important; padding: 0 !important; font: 900 20px/1 var(--ar-font) !important; }
html body.ui-arcade #premium-panel #inv-body .inv-qty { font: 900 15px/1 var(--ar-font) !important; min-width: 28px !important; text-align: center !important; }
html body.ui-arcade #premium-panel #inv-body .inv-boost-foot { grid-column: 1 / -1 !important; font: 700 12px/1.3 var(--ar-font) !important; opacity: .75 !important; display: flex !important; flex-wrap: wrap !important; gap: 4px 10px !important; }
html body.ui-arcade #premium-panel #inv-body .inv-chip { display: inline-block !important; padding: 3px 9px !important; border-radius: 999px !important; background: var(--ar-yellow) !important; border: 2px solid var(--ar-ink) !important; font: 800 13px/1 var(--ar-font) !important; }
html body.ui-arcade #premium-panel #inv-body .inv-sec .inv-boost { box-shadow: none !important; border-width: 2px !important; }
html body.ui-arcade #premium-panel #inv-body .inv-step {
  color: #fff !important; background: var(--ar-blue) !important; border: 3px solid var(--ar-blue-d) !important; border-radius: 10px !important; box-shadow: 0 3px 0 var(--ar-blue-d) !important;
}
html body.ui-arcade #premium-panel #inv-body .inv-step:disabled { background: #4a3a2a !important; border-color: rgba(26, 61, 85, .3) !important; box-shadow: none !important; }
html body.ui-arcade #premium-panel #inv-body .inv-login-cta {
  color: #fff !important; background: var(--ar-green) !important; border: 3px solid var(--ar-green-d) !important; border-radius: 14px !important; box-shadow: 0 4px 0 var(--ar-green-d) !important;
}
html body.ui-arcade #premium-panel .ar-hist-status { margin: 0 0 8px !important; font: 700 14px/1.4 var(--ar-font) !important; color: var(--gc-text) !important; opacity: .8 !important; }
html body.ui-arcade #premium-panel .ar-hist-status:empty { display: none !important; }
html body.ui-arcade #premium-panel .ar-hist-list { display: flex !important; flex-direction: column !important; gap: 8px !important; }
html body.ui-arcade #premium-panel .ar-hist-row {
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important;
  padding: 10px 14px !important; background: var(--gc-card) !important; border: 3px solid var(--ar-ink) !important; border-radius: 14px !important;
}
html body.ui-arcade #premium-panel .ar-hist-row .ar-hist-l { display: flex !important; flex-direction: column !important; min-width: 0 !important; }
html body.ui-arcade #premium-panel .ar-hist-row b { font: 900 14px/1.2 var(--ar-font) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
html body.ui-arcade #premium-panel .ar-hist-row small { font: 700 12px/1.2 var(--ar-font) !important; opacity: .7 !important; }
html body.ui-arcade #premium-panel .ar-hist-amt { font: 900 15px/1 var(--ar-font) !important; color: var(--ar-orange-d) !important; white-space: nowrap !important; }

/* ---------- 8. EMOJIS (débloqués par rang : pas de bouton, petite grille) ---------- */
html body.ui-arcade #premium-panel #shop-emojis { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)) !important; gap: 10px !important; }
html body.ui-arcade #premium-panel #shop-emojis .shop-emoji {
  background: var(--gc-card) !important; border: 3px solid var(--ar-ink) !important; border-radius: 14px !important; box-shadow: 0 3px 0 var(--ar-ink) !important;
  color: var(--gc-text) !important; padding: 8px 4px !important; min-width: 0 !important; overflow: hidden !important;
}
html body.ui-arcade #premium-panel #shop-emojis .shop-emoji-req { color: var(--gc-text) !important; font: 700 11px/1.2 var(--ar-font) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; display: block !important; }

/* ---------- 9. TÉLÉPHONE : plein écran, 2 cartes par rangée ---------- */
@media (max-width: 600px) {
  html body.ui-arcade #premium-panel { padding: 0 !important; align-items: stretch !important; }
  html body.ui-arcade #premium-panel #premium-box {
    width: 100% !important; max-height: none !important; height: 100% !important;
    border-radius: 0 !important; border-width: 0 !important; box-shadow: none !important;
  }
  html body.ui-arcade #premium-panel #premium-head { padding: calc(12px + env(safe-area-inset-top)) 64px 10px 16px !important; }
  html body.ui-arcade #premium-panel #premium-box > .panel-x { top: calc(10px + env(safe-area-inset-top)) !important; right: 12px !important; }
  html body.ui-arcade #premium-panel #premium-head h2 { font-size: 24px !important; }
  /* les 4 onglets tiennent sur 343 px : la rangée passe sous la croix (le titre, lui, s'arrête avant) */
  html body.ui-arcade #premium-panel .ar-tabbar { margin-right: -48px !important; gap: 5px !important; }
  html body.ui-arcade #premium-panel .ar-tabbar .ar-tab { padding: 9px 6px !important; font-size: 13px !important; min-width: 0 !important; flex: 1 1 auto !important; border-width: 3px !important; }
  html body.ui-arcade #premium-panel #premium-scroll { padding: 14px 16px calc(20px + env(safe-area-inset-bottom)) !important; }
  html body.ui-arcade #premium-panel :is(#premium-skins, #premium-trails, #premium-flags, #shop-boosts, #ar-daily, #dovion-xp-packs, #dovion-bundles) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important;
  }
  html body.ui-arcade #premium-panel #inv-body .inv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}