/* ===================================================================
   Quiz Arena — direction artistique « bleu nuit » (v7), tous écrans.
   Fond uni, cartes gris-bleu à bord fin, icônes plates colorées,
   accent bleu, gros boutons jaunes. Chargé en dernier.
   =================================================================== */
:root {
  --bg: #0b0f1c;
  --surface: #151a2b;
  --surface2: #1b2136;
  --line: #232a40;
  --text: #ffffff;
  --muted: #a3a9bf;
  --blue: #6b7cff;
  --blue2: #5b8dff;
  --violet: #6b7cff;
  --gold: #f5c451;
  --green: #34b36b;
  --coral: #ef4d5a;
  --pink: #ef4d5a;
  --radius: 14px;
  --qa-bg: #0b0f1c;
  --qa-surface: #151a2b;
  --qa-surface2: #1b2136;
  --qa-line: #232a40;
  --qa-text: #ffffff;
  --qa-muted: #a3a9bf;
  --qa-violet: #6b7cff;
  --qa-violet2: #5b8dff;
  --qa-gold: #f5c451;
  --qa-green: #34b36b;
  --qa-danger: #ef4d5a;
  --qa-radius: 14px;
  --panel: #151a2b;
  --panel-soft: #151a2b;
  --rim: #232a40;
  --shadow-card: none;
  --shadow-deep: none;
  --art: none;
  --surface3: #1f2233;
  --panel2: #121729;
  --chip: #1f2a4d;
  --on-surface: #ffffff;
  --card-shadow: none;
}

/* ---------- Fond : uni partout, plus d'étoiles ni de planètes ---------- */
html,
body,
.screen,
.gameScreen,
.gameScreen.themed,
.themed {
  background: var(--bg) !important;
  background-image: none !important;
}
body::before,
body::after,
.gameScreen::before,
.gameScreen::after,
.themed::before,
.themed::after,
.screen::before,
.screen::after {
  display: none !important;
}

/* ---------- Cartes ---------- */
.settingsCard,
.statGrid > *,
.profileHero,
.categoryHero,
.catTile,
.subcatCard,
.modeStudio,
.modeTile,
.modeGrid > button,
.duelEntryBtn,
.resumeBar,
.emptyState,
.socialHero,
.rewardStrip,
.reviewRow,
.reviewList > *,
.questGrid .quest,
.quest,
.friendCard,
.shopLegacyCard,
.dailyHero,
.slotGrid > *,
.jouteChoice,
.jouteCatTile,
.profilLigne,
.resultHero,
.resultProgress,
.rewardGrid > *,
.leaderList > *,
.panel,
.miniMastery > button,
.qaEvent,
.chestCard,
.seasonNode,
.passHead,
.ligueCard,
.clCard {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.settingsCard::before,
.settingsCard::after,
.statGrid > *::before,
.statGrid > *::after,
.profileHero::before,
.profileHero::after,
.categoryHero::before,
.categoryHero::after,
.catTile::before,
.catTile::after,
.subcatCard::before,
.subcatCard::after,
.modeStudio::before,
.modeStudio::after,
.modeGrid > button::before,
.modeGrid > button::after,
.duelEntryBtn::before,
.duelEntryBtn::after,
.emptyState::before,
.emptyState::after,
.socialHero::before,
.socialHero::after,
.quest::before,
.quest::after,
.friendCard::before,
.friendCard::after,
.jouteChoice::before,
.jouteChoice::after,
.jouteCatTile::before,
.jouteCatTile::after,
.profilLigne::before,
.profilLigne::after,
.resultHero::before,
.resultHero::after,
.resultProgress::before,
.resultProgress::after,
.dailyHero::before,
.dailyHero::after,
.leaderList > *::before,
.leaderList > *::after,
.modalCard::before,
.modalCard::after {
  display: none !important;
}

/* ---------- Fenêtres ---------- */
.modalCard,
.modal .modalCard {
  background: var(--panel2) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55) !important;
}

/* ---------- Textes ---------- */
.eyebrow {
  color: var(--blue) !important;
  text-shadow: none !important;
  letter-spacing: 0.4px;
}
.fine,
small {
  text-shadow: none !important;
}
h1,
h2,
h3 {
  text-shadow: none !important;
}
.pageIntro h1 {
  font-size: 26px;
  font-weight: 800;
}

/* ---------- Boutons ---------- */
button.primary,
.primary {
  background: var(--gold) !important;
  background-image: none !important;
  color: #15110a !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 800 !important;
}
button.primary:disabled,
.primary:disabled {
  opacity: 0.5;
}
button.secondary,
.secondary {
  background: var(--surface) !important;
  background-image: none !important;
  color: var(--on-surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
button.back,
.back {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--blue) !important;
  padding: 6px 0 !important;
  font-weight: 700 !important;
}
.dangerBtn {
  background: transparent !important;
  border: 1px solid #ef4d5a !important;
  color: #ff8a93 !important;
  box-shadow: none !important;
}
.chev {
  color: #c9cde0 !important;
}
.bar,
.tileBar {
  background: var(--line) !important;
  box-shadow: none !important;
}
.bar i,
.tileBar em {
  background: var(--blue) !important;
  box-shadow: none !important;
}
input.field,
select.field,
textarea.field,
.field {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--on-surface) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

/* ---------- Icônes ---------- */
img.daImg {
  filter: none !important;
  object-fit: contain !important;
  background: none !important;
  border-radius: 0 !important;
}
.daCatIc {
  display: grid;
  place-items: center;
}
.daCatIc svg {
  width: 100%;
  height: 100%;
  stroke: none;
}
.modeIcon,
.modeIc,
.jouteChoiceIcon,
.questIcon {
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* ---------- Univers ---------- */
.catGrid {
  gap: 8px !important;
}
.catTile {
  min-height: 0 !important;
  aspect-ratio: auto !important;
  padding: 14px 6px 10px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: var(--tileBg, var(--surface)) !important;
}
.catTile .glyphWrap {
  width: 40px !important;
  height: 40px !important;
  margin: 0 0 6px !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  position: static !important;
  display: grid !important;
}
.catTile b {
  font-size: 12.5px !important;
  line-height: 1.2 !important;
  text-align: center !important;
  min-height: 2.4em;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.catTile small {
  color: var(--muted) !important;
  font-size: 10.5px !important;
}
.catTile .tileBar {
  width: 70% !important;
  margin: 6px auto 0 !important;
}
.categoryHero {
  background: var(--surface) !important;
}
.categoryHero .bigCat {
  width: 64px !important;
  height: 64px !important;
  background: var(--surface2) !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  padding: 10px !important;
  box-shadow: none !important;
  border: 0 !important;
}
.categoryHero .bigCat .daCatIc {
  width: 44px;
  height: 44px;
}
.subcatDot {
  background: var(--blue) !important;
  box-shadow: none !important;
}
.daCatFond {
  background-size: 0 0 !important;
}
.jouteCatTile .daCatIc,
.miniMastery .daCatIc,
.hqUni .daCatIc {
  width: 34px;
  height: 34px;
}

/* ---------- Partie ---------- */
.gameTop > button,
.gameTop .gameStat,
.gameTop .gameCount,
.reportBtn {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}
.timerBar {
  background: var(--line) !important;
  box-shadow: none !important;
}
.timerBar i {
  background: var(--blue) !important;
  box-shadow: none !important;
}
.questionVisual.daQv {
  display: flex !important;
  align-items: center;
  gap: 10px;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  padding: 10px 12px !important;
  margin: 4px 0 10px !important;
  background: var(--dbg) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.questionVisual.daQv::before,
.questionVisual.daQv::after {
  display: none !important;
}
.daQvIc {
  width: 34px;
  height: 34px;
  flex: none;
}
.daQvIc svg {
  width: 100%;
  height: 100%;
  stroke: none;
}
.daQv b {
  font-size: 15px;
  font-weight: 800;
  color: var(--on-surface);
}
.questionTitle {
  text-shadow: none !important;
}
.answers .answer,
button.answer {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  color: var(--on-surface) !important;
}
.answer > span {
  background: var(--chip) !important;
  color: #8fa0ff !important;
  box-shadow: none !important;
  border: 0 !important;
}
.answer.correct,
button.answer.correct {
  background: #143524 !important;
  border-color: #34b36b !important;
}
.answer.correct > span {
  background: #34b36b !important;
  color: #fff !important;
}
.answer.wrong,
button.answer.wrong {
  background: #3a1a20 !important;
  border-color: #ef4d5a !important;
}
.answer.wrong > span {
  background: #ef4d5a !important;
  color: #fff !important;
}
.answerFeedback {
  background: var(--panel2) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5) !important;
}

/* ---------- Résultat ---------- */
.resultHero {
  padding: 20px 16px !important;
}
.resultHero h1 {
  color: var(--on-surface) !important;
  background: none !important;
  -webkit-text-fill-color: var(--on-surface) !important;
}
.resultMark img {
  width: 64px !important;
  height: 64px !important;
}

/* ---------- Barre de navigation ---------- */
nav.arenaNav,
#nav {
  background: var(--panel2) !important;
}

/* --- Ajustements après captures --- */
.catGrid .catTile:not(.catMore) .glyphWrap,
.catTile .glyphWrap {
  display: grid !important;
  place-items: center;
}
.catGrid .catTile .glyphWrap .daCatIc {
  width: 40px;
  height: 40px;
}
.catGrid .catTile,
.catTile {
  background: color-mix(in srgb, var(--tileC, #6b7cff) 14%, var(--surface)) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}
.catTile b {
  color: var(--on-surface) !important;
  text-shadow: none !important;
}
.gameBody .questionVisual.daQv {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
.rewardStrip > div {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.rewardStrip > div::before,
.rewardStrip > div::after {
  display: none !important;
}
#toast {
  background: var(--surface2) !important;
  color: var(--on-surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
}
.gameTop .gameStat {
  background: none !important;
  border: 0 !important;
}
.resultHero h1,
.resultHero .bigScore,
.resultHero strong {
  text-shadow: none !important;
}

/* --- Avatars, ligues, social, défi du jour --- */
.persoGrid > *,
.persoHero,
.ligPalier,
.ligHero,
.socialActions button,
.socialFriends,
.profileIdCard,
.idBox,
.leader,
.settingsCard,
.legalLinks,
.reglageDanger,
.dangerZone {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}
.persoGrid > *::before,
.persoGrid > *::after,
.ligPalier::before,
.ligPalier::after,
.ligHero::before,
.ligHero::after,
.socialActions button::before,
.socialActions button::after,
.leader::before,
.leader::after {
  display: none !important;
}
.persoGrid > .equipe,
.persoGrid > .on,
.persoGrid > [class*='equip'],
.ligPalier.ici,
.ligPalier.actuel,
.leader.me {
  border-color: var(--gold) !important;
  background: var(--surface3) !important;
}
.persoPic,
.persoBuyPic {
  background: var(--surface2) !important;
  box-shadow: none !important;
}
.dailyHero img,
.dailyHero .daImg,
.dailyFaitArt img {
  width: 96px !important;
  height: 96px !important;
  max-width: 96px !important;
  margin: 4px auto 10px !important;
}
.catTile .glyphWrap::before,
.catTile .glyphWrap::after {
  display: none !important;
}
.catTile .glyphWrap,
.catTile .glyphWrap svg {
  filter: none !important;
}
.toggle,
.switch {
  box-shadow: none !important;
}

/* --- Boutique : même ligne du haut que partout --- */
.qa-wallet {
  display: none !important;
}
.qa-shop-root,
.qa-shop-shell {
  background: var(--bg) !important;
  background-image: none !important;
}
.qa-card,
.qa-offer,
.qa-pass,
.qa-shop-sheet {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}
.qa-card::before,
.qa-card::after,
.qa-offer::before,
.qa-offer::after,
.qa-pass::before,
.qa-pass::after,
.qa-pass-bg {
  display: none !important;
}
.qa-tabs button,
.qa-tabs > * {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
  color: #c9cde0 !important;
}
.qa-tabs button.active,
.qa-tabs button[aria-selected='true'],
.qa-tabs > .active {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: #fff !important;
}
.qa-gold-btn {
  background: var(--gold) !important;
  background-image: none !important;
  color: #15110a !important;
  box-shadow: none !important;
}
.qa-dark-btn {
  background: var(--surface2) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}
.qa-shop-title {
  text-shadow: none !important;
}
.clTrophee svg {
  width: 30px;
  height: 30px;
  stroke: none;
}
.clBtn {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}
.clBtn::before,
.clBtn::after {
  display: none !important;
}
.modalClose {
  background: var(--surface2) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
  color: #c9cde0 !important;
}
.liveBoard {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}
.liveBoard::before,
.liveBoard::after {
  display: none !important;
}
.jouteChoiceIcon svg,
.jouteChoice svg {
  stroke: none;
}
.mixTile .daCatIc:first-child:not(:only-child) {
  display: none;
}
#qaGate,
#splash,
.onboard,
.introScreen {
  background: var(--bg) !important;
  background-image: none !important;
}

/* --- Retours du 25/09 --- */
/* Fiche d'univers : l'icône de l'univers réapparaît dans l'en-tête. */
.screen .categoryHero .bigCat > .daCatIc {
  display: grid !important;
}
.categoryHero .bigCat {
  background-image: none !important;
}
/* Modes Classique / Blitz : icônes visibles, sans ombre. */
.modeStudio .modeIcon {
  filter: none !important;
}
/* Partie : le nom de l'univers n'apparaît qu'une fois (dans le bandeau). */
.gameScreen:has(.daQv) .gameTop .gameStat small {
  display: none !important;
}
/* Partie : plus de grand vide sous les réponses — elles prennent la place. */
.gameScreen .gameBody {
  display: flex !important;
  flex-direction: column !important;
  min-height: calc(100dvh - 110px - env(safe-area-inset-top, 0px)) !important;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
}
.gameScreen .gameBody .answers {
  flex: 1 1 auto !important;
  display: grid !important;
  grid-auto-rows: minmax(58px, 1fr) !important;
  max-height: 480px;
  margin-top: 6px !important;
}
.gameScreen .gameBody .answer {
  min-height: 58px !important;
  height: auto !important;
  font-size: 16px !important;
}
.gameScreen .questionTitle {
  font-size: clamp(20px, 2.9dvh, 26px) !important;
  line-height: 1.25 !important;
  margin: 6px 0 14px !important;
}
/* Logo avant « Quiz Arena » */
.qtBrand {
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
}
.qtLogo {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
}
.qtLogo svg {
  width: 100%;
  height: 100%;
}
.qtBrandTxt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* Ligne du haut avec logo : tout tient sur une ligne, même sur petit écran */
.qtTop {
  gap: 5px !important;
}
.qtTop .qtBrand {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.qtLogo {
  width: 30px;
  height: 30px;
}
.qtBrandTxt {
  overflow: hidden;
}
.qtBrand b {
  font-size: 20px !important;
  font-family: inherit;
}
.qtBrand small {
  font-size: 9px !important;
}
.qtTop .qtRes {
  font-size: 12px !important;
  padding: 3px 3px 3px 5px !important;
}
.qtAvImg {
  width: 38px !important;
  height: 38px !important;
}
.gameScreen .gameBody .answers {
  flex: 0 1 auto !important;
  grid-auto-rows: minmax(58px, 80px) !important;
  max-height: none;
}
.qtTop .qtBrand {
  flex: 1 1 0 !important;
}
.gameScreen .gameBody .answers {
  flex: 1 1 auto !important;
  grid-auto-rows: minmax(58px, 100px) !important;
  align-content: start;
}
.qtHome > .qtTop {
  width: auto !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.qtLogo {
  width: 26px !important;
  height: 26px !important;
}
.qtBrand {
  gap: 6px !important;
}
.qtBrand b {
  font-size: 18px !important;
  letter-spacing: -0.3px !important;
}
.qtTop .qtRes {
  gap: 3px !important;
  font-size: 11.5px !important;
}
.qtRes em {
  width: 14px !important;
  height: 14px !important;
  font-size: 12px !important;
}
/* Le titre ne se coupe jamais : la petite phrase s'adapte à sa largeur */
.qtTop .qtBrand {
  flex: 0 0 auto !important;
  margin-right: auto;
  overflow: visible;
}
.qtBrandTxt small {
  width: 0;
  min-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 380px) {
  .qtBrand b {
    font-size: 16px !important;
  }
  .qtLogo {
    width: 22px !important;
    height: 22px !important;
  }
  .qtAvImg {
    width: 34px !important;
    height: 34px !important;
  }
}

/* ---------- Boutique v3 : tout au même style que le jeu ---------- */
.qa-chest-grid,
.qa-chest-grid-full {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
.qa-money-grid,
.qa-boost-grid {
  gap: 8px !important;
}
.qa-card {
  border-radius: 14px !important;
  padding: 12px 8px !important;
}
.qa-chest-card[data-rarity],
.qa-money-card[data-rarity] {
  background: var(--surface) !important;
  background-image: none !important;
}
.qa-chest-art,
.qa-money-art,
.qa-boost-art,
.qa-cos-card > div {
  background: none !important;
  filter: none !important;
  display: grid !important;
  place-items: center !important;
  height: 58px !important;
}
.qa-chest-art svg,
.qa-money-art svg,
.qa-boost-art svg,
.qa-cos-card > div svg,
.qa-sheet-art svg,
.qa-purchase-art svg,
.qa-offer-art svg {
  width: 52px !important;
  height: 52px !important;
  stroke: none;
}
.qa-chest-card::before,
.qa-chest-card::after,
.qa-money-card::before,
.qa-money-card::after,
.qa-boost-card::before,
.qa-boost-card::after {
  display: none !important;
}
.qa-money-price {
  background: var(--surface2) !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--on-surface) !important;
  border-radius: 10px !important;
}
.qa-money-price svg {
  width: 15px !important;
  height: 15px !important;
  stroke: none;
}
.qa-pass-bg {
  display: grid !important;
  place-items: center end;
  opacity: 0.9;
  padding-right: 18px;
}
.qa-pass-bg svg {
  width: 84px;
  height: 84px;
  stroke: none;
}
/* Fenêtre d'un article : identique aux autres fenêtres du jeu */
.qa-shop-overlay {
  background: rgba(5, 8, 16, 0.72) !important;
  backdrop-filter: blur(6px);
}
.qa-shop-sheet {
  background: var(--panel2) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55) !important;
  color: var(--on-surface) !important;
  text-align: center;
}
.qa-sheet-handle {
  background: var(--line) !important;
}
.qa-sheet-art {
  background: var(--surface2) !important;
  border-radius: 18px !important;
  width: 96px !important;
  height: 96px !important;
  margin: 6px auto 10px !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: none !important;
}
.qa-sheet-rarity {
  color: var(--blue) !important;
  background: none !important;
  border: 0 !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-size: 12px !important;
}
.qa-sheet-actions .qa-dark-btn {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--on-surface) !important;
  border-radius: 14px !important;
}
.qa-sheet-actions .qa-gold-btn {
  border-radius: 14px !important;
  font-weight: 800 !important;
}
.qa-purchase-flash > div {
  background: var(--panel2) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55) !important;
}
.qa-purchase-flash span {
  color: var(--blue) !important;
}
/* Vitrine des avatars */
.qa-av-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.qa-av-card {
  --rc: #5b8dff;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 26px 6px 10px;
  background: color-mix(in srgb, var(--rc) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent);
  border-radius: 14px;
  color: var(--on-surface);
  font: inherit;
  cursor: pointer;
}
.qa-av-card.r-epique {
  --rc: #a78bfa;
}
.qa-av-card.r-legendaire {
  --rc: #f5c451;
}
.qa-av-rar {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--rc);
  color: #10131f;
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 7px;
  white-space: nowrap;
}
.qa-av-pic {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
}
.qa-av-pic > * {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.qa-av-card b {
  font-size: 13px;
}
.qa-av-card small {
  color: var(--muted);
  font-size: 11.5px;
}
.qa-av-card.ok small {
  color: #6fd08c;
}
.qa-av-grid + .qa-cos-grid {
  margin-top: 8px;
}
/* Les anciennes images de la boutique posées en fond ne s'affichent plus :
   ce sont les icônes du jeu (dans la carte) qui sont montrées. */
.qa-shop-root .qa-chest-art,
.qa-shop-root .qa-money-art,
.qa-shop-root .qa-boost-art,
.qa-shop-root .qa-pass-bg,
.qa-shop-root .qa-offer-art,
.qa-shop-root .qa-cos-card > div {
  background: none !important;
  background-image: none !important;
}
.qa-shop-root .qa-chest-art > *,
.qa-shop-root .qa-money-art > *,
.qa-shop-root .qa-boost-art > *,
.qa-shop-root .qa-pass-bg > *,
.qa-shop-root .qa-offer-art > *,
.qa-shop-root .qa-cos-card > div > * {
  display: block !important;
}
.qa-shop-root .qa-pass-bg {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 84px;
  height: 84px;
  padding: 0;
}
.qa-shop-root .qa-pass-bg svg {
  width: 84px !important;
  height: 84px !important;
}
.qa-shop-root .qa-pass {
  position: relative !important;
  overflow: hidden !important;
}
.qa-shop-root .qa-pass .qa-pass-bg {
  inset: auto !important;
  left: auto !important;
  bottom: auto !important;
  right: 18px !important;
  top: 50% !important;
  width: 84px !important;
  height: 84px !important;
  transform: translateY(-50%) !important;
  opacity: 1 !important;
}
.qa-shop-root .qa-pass .qa-pass-bg::before,
.qa-shop-root .qa-pass .qa-pass-bg::after {
  display: none !important;
}
.qa-shop-root .qa-pass .qa-pass-bg,
.qa-shop-root .qa-pass .qa-pass-bg svg {
  filter: none !important;
  mix-blend-mode: normal !important;
  -webkit-mask: none !important;
  mask: none !important;
}

/* ---------- Saison, Pass 100 paliers, fragments ---------- */
.saisonFin {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 10px;
  padding: 10px 14px;
  background: var(--surface3);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: 14px;
}
.saisonFin b {
  color: var(--gold);
  font-size: 14px;
}
.saisonFin small {
  color: var(--muted);
  font-size: 12px;
}
.seasonNode.gros {
  border-color: color-mix(in srgb, var(--gold) 55%, transparent) !important;
  background: color-mix(in srgb, var(--gold) 9%, var(--surface)) !important;
}
.seasonNode.gros b {
  color: var(--gold);
}
.qtTag svg {
  width: 17px;
  height: 17px;
  stroke: none;
}
.fragChip {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.fragAv {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  overflow: hidden;
  display: inline-grid;
}
.fragAv > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fragBarre {
  position: relative;
  display: block;
  width: 86%;
  height: 14px;
  margin-top: 4px;
  border-radius: 7px;
  background: var(--line);
  overflow: hidden;
}
.fragBarre i {
  position: absolute;
  inset: 0 auto 0 0;
  background: color-mix(in srgb, var(--rc, #6b7cff) 80%, transparent);
}
.fragBarre em {
  position: relative;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 14px;
  color: #fff;
}
/* Grand moment (coffre, niveau…) au style des fenêtres */
.bigMoment .bmInner {
  background: var(--panel2) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55) !important;
}
.bigMoment .bmInner::before,
.bigMoment .bmInner::after,
.bigMoment .bmBurst {
  display: none !important;
}
.bigMoment .bmRibbon {
  background: var(--blue) !important;
  box-shadow: none !important;
}
.bigMoment .bmKicker {
  color: #fff !important;
}
.chestLoot > span {
  background: var(--surface2) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}
.chestLoot .fragChip {
  border-color: color-mix(in srgb, var(--gold) 50%, transparent) !important;
}
.chestLoot .fragAv {
  width: 30px;
  height: 30px;
  flex: none;
}
.chestLoot .fragAv img,
.chestLoot .fragAv svg {
  width: 30px !important;
  height: 30px !important;
  max-width: none !important;
}

/* ---------- Coffres : taux affichés et image selon le gain ---------- */
.coffreTaux {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  margin: 8px 0;
  font-size: 11.5px;
  color: var(--muted);
  text-align: left;
}
.coffreTaux span {
  display: flex;
  gap: 6px;
  align-items: baseline;
  background: var(--surface2);
  border-radius: 8px;
  padding: 4px 8px;
}
.coffreTaux b {
  color: var(--on-surface);
  min-width: 36px;
}
.coffreTaux .rareTx b {
  color: var(--gold);
}
.qa-shop-sheet .coffreTaux {
  margin: 10px auto 12px;
  max-width: 300px;
}
.slotGrid .slot {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}
.gainIc {
  width: 110px;
  height: 110px;
  margin: 0 auto;
}
.gainIc svg {
  width: 100%;
  height: 100%;
  stroke: none;
}
.gainFrag {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto;
}
.gainFragAv {
  display: block;
  width: 120px;
  height: 120px;
  border-radius: 24px;
  overflow: hidden;
  border: 2px solid var(--gold);
}
.gainFragAv > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gainFragIc {
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 46px;
  height: 46px;
  --fc: #f5c451;
}
.gainFragIc svg {
  width: 100%;
  height: 100%;
  stroke: none;
}