@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@600;700&display=swap');

/* Quiz Arena — thème cosmique encadré
   Feuille additive : à charger après les quatre feuilles existantes. */

:root {
  --bg: #060821;
  --surface: #101036;
  --surface2: #171448;
  --line: #4d4b91;
  --text: #fbfbff;
  --muted: #b9b8dc;
  --blue: #6c7cff;
  --blue2: #b18cff;
  --violet: #a85cff;
  --gold: #ffc85d;
  --green: #45e7c2;
  --coral: #ff6f9f;
  --pink: #ff72ca;
  --radius: 22px;
  --qa-bg: #060821;
  --qa-surface: #101036;
  --qa-surface2: #171448;
  --qa-line: #4d4b91;
  --qa-text: #fbfbff;
  --qa-muted: #b9b8dc;
  --qa-violet: #785fff;
  --qa-violet2: #bd83ff;
  --qa-gold: #ffc85d;
  --qa-green: #45e7c2;
  --qa-danger: #ff6f9f;
  --qa-radius: 22px;
  --panel: linear-gradient(165deg, rgba(28, 27, 81, 0.96), rgba(10, 11, 40, 0.98));
  --panel-soft: linear-gradient(165deg, rgba(32, 29, 89, 0.9), rgba(12, 12, 46, 0.94));
  --rim: rgba(148, 128, 255, 0.44);
  --shadow-card:
    0 18px 42px rgba(0, 0, 20, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.11), inset 0 -24px 42px rgba(1, 2, 24, 0.3);
  --shadow-deep: 0 30px 80px rgba(0, 0, 20, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

* {
  scrollbar-color: #5648a2 transparent;
}
html {
  background: #040617;
  color-scheme: dark;
}
body {
  min-width: 320px;
  min-height: 100vh;
  color: var(--text);
  font-family: 'Manrope', Inter, ui-sans-serif, system-ui, sans-serif;
  background-color: #050720;
  background-image: linear-gradient(rgba(4, 6, 23, 0.08), rgba(4, 6, 23, 0.22));
  background-position: center top;
  background-attachment: fixed;
}
/* Fond étoilé : sur une couche à part (plutôt que sur body directement)
   pour pouvoir le faire tourner très doucement sans bouger le reste de
   la page. Surdimensionné et centré pour qu'aucun coin de l'écran ne
   se retrouve jamais vide pendant la rotation. En pause pendant une
   partie (classe .in-game posée par le jeu) et si "Réduire les
   animations" est activé (classe .qa-reduced-motion, voir
   home-arena.js) ou si le système demande moins d'animations. */
body::after {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  width: 145vmax;
  height: 145vmax;
  background-image: url('assets/ui/cosmic-space.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: center center;
  pointer-events: none;
  z-index: -2;
  animation: qaCosmicDrift 240s linear infinite;
}
body.in-game::after,
body.qa-reduced-motion::after {
  animation-play-state: paused;
}
@keyframes qaCosmicDrift {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
body:before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 40%, rgba(129, 70, 255, 0.18), transparent 29%),
    radial-gradient(circle at 88% 78%, rgba(43, 104, 255, 0.13), transparent 27%);
  z-index: -1;
}
button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(185, 151, 255, 0.75);
  outline-offset: 3px;
}
h1,
h2,
.splashTitle,
.questionTitle,
.bigScore,
.qa-shop-title h1,
.qa-pass h2 {
  font-family: 'Space Grotesk', 'Manrope', sans-serif;
}

#app {
  max-width: 600px;
  padding: 12px 16px 106px;
  isolation: isolate;
}
.screen {
  padding-top: 8px;
}
.fine,
.pageIntro p,
.eventLanding p {
  color: var(--muted);
}
.eyebrow {
  color: #b9a2ff;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-size: 10px;
}
.pageIntro {
  padding: 22px 4px 10px;
}
.pageIntro h1,
.resultHero h1,
.eventLanding h1 {
  font-size: clamp(31px, 9vw, 48px);
  letter-spacing: -0.045em;
}
.sectionHead {
  margin: 28px 3px 13px;
}
.sectionHead h2,
.passCard h2,
.socialHero h2,
.adminPanel h2 {
  font-size: 21px;
}
.sectionHead .headLink {
  color: #c7bcf5;
  font-size: 12px;
  min-height: 44px;
}

/* En-tête, portefeuille et navigation */
.topbar {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 7px;
  padding: max(10px, env(safe-area-inset-top)) 0 12px;
  background: linear-gradient(180deg, rgba(5, 7, 28, 0.96), rgba(5, 7, 28, 0.8) 72%, transparent);
  backdrop-filter: blur(18px) saturate(1.35);
}
.brandBtn b {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  background: linear-gradient(90deg, #fff 8%, #fff 46%, #ffd46f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brandBtn .brandText small {
  color: #aaa8d2;
}
.logoRing {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 5px 14px rgba(255, 197, 78, 0.25));
}
.wallet .wCoin,
.wallet .wGem,
.profileChip,
.wChest {
  background: linear-gradient(165deg, rgba(26, 25, 74, 0.95), rgba(11, 12, 43, 0.96));
  border: 1px solid rgba(128, 112, 221, 0.5);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.08),
    0 9px 24px rgba(0, 0, 20, 0.35);
}
.wallet .wCoin,
.wallet .wGem {
  height: 38px;
  border-radius: 14px;
  padding: 6px 9px;
}
.wallet .wCoin b,
.wallet .wGem b {
  font-size: 11px;
}
.wallet .wCurrencyIcon,
.wallet .wCurrencyIcon .qaShopSvg {
  width: 20px;
  height: 20px;
}
.profileChip {
  border-radius: 16px;
  padding: 5px;
}
.avatarMini {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px rgba(168, 124, 255, 0.5),
    0 0 22px rgba(80, 111, 255, 0.38);
}
.wChest {
  width: 38px;
  height: 38px;
  border-radius: 14px;
}
.wDot {
  border-color: #090a2b;
}
nav {
  width: min(600px, 100%);
  height: 82px;
  padding: 7px 6px max(7px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(11, 10, 43, 0.93), rgba(5, 7, 27, 0.985));
  border-top: 1px solid rgba(137, 116, 236, 0.45);
  box-shadow:
    0 -18px 52px rgba(0, 0, 22, 0.46),
    inset 0 1px rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(22px) saturate(1.3);
}
nav button {
  position: relative;
  min-height: 58px;
  color: #9694c7;
  border-radius: 16px;
  gap: 5px;
}
nav button.active {
  color: #d6a2ff;
  text-shadow: 0 0 18px rgba(171, 92, 255, 0.65);
}
nav button.active:after {
  content: '';
  position: absolute;
  bottom: 2px;
  width: 26px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, #8c72ff, #de8eff);
  box-shadow: 0 0 14px #a46dff;
}
nav svg {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 4px 9px rgba(0, 0, 0, 0.3));
}
nav small {
  font-size: 9px;
  font-weight: 800;
}

/* Boutons, champs, panneaux et retours */
.primary,
.secondary,
.ghost,
.dangerBtn,
.textBtn,
.back,
.questClaim,
.claimBtn,
.reviewBtn,
.slot button,
.passProg button {
  min-height: 44px;
  border-radius: 15px;
}
.primary {
  background: linear-gradient(135deg, #7568ff, #b55dff 64%, #d27bff);
  box-shadow:
    0 12px 30px rgba(112, 73, 255, 0.38),
    inset 0 1px rgba(255, 255, 255, 0.28),
    inset 0 -2px rgba(38, 18, 104, 0.32);
}
.secondary,
.back {
  background: linear-gradient(165deg, rgba(33, 30, 88, 0.94), rgba(13, 13, 48, 0.96));
  border: 1px solid rgba(131, 112, 221, 0.48);
  color: #f5f2ff;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}
.back {
  display: inline-flex;
  align-items: center;
  padding: 10px 13px;
}
.ghost,
.textBtn {
  color: #c6bee9;
}
.dangerBtn {
  background: linear-gradient(145deg, #521c3d, #291332);
  border-color: #a74372;
}
.field,
.qa-field input,
.qa-field select,
.qa-field textarea,
.searchBox {
  min-height: 44px;
  color: #fff;
  background: linear-gradient(165deg, rgba(12, 13, 48, 0.96), rgba(6, 7, 29, 0.98));
  border: 1px solid rgba(116, 103, 197, 0.56);
  border-radius: 14px;
  box-shadow:
    inset 0 2px 9px rgba(0, 0, 18, 0.45),
    0 1px rgba(255, 255, 255, 0.05);
}
.field:focus,
.qa-field input:focus,
.qa-field select:focus,
.qa-field textarea:focus {
  border-color: #a58aff;
  box-shadow:
    0 0 0 3px rgba(145, 108, 255, 0.18),
    inset 0 2px 9px rgba(0, 0, 18, 0.45);
}
.settingsCard,
.adminPanel,
.profileIdCard,
.categoryAdminCard,
.qa-studio-block {
  background: var(--panel);
  border: 1px solid var(--rim);
  box-shadow: var(--shadow-card);
}

/* Accueil — héro, modes et progression */
.heroMode {
  min-height: 288px;
  border: 1px solid rgba(117, 103, 255, 0.82);
  border-radius: 28px;
  background: linear-gradient(
    110deg,
    rgba(11, 12, 48, 0.98) 0%,
    rgba(24, 17, 75, 0.94) 52%,
    rgba(7, 12, 52, 0.72) 100%
  );
  box-shadow:
    var(--shadow-deep),
    0 0 0 1px rgba(160, 120, 255, 0.11),
    0 0 46px rgba(66, 85, 255, 0.16);
}
.heroMode .heroBg {
  left: auto;
  width: 68%;
  background-image:
    linear-gradient(90deg, rgba(10, 11, 43, 0.96), rgba(10, 11, 43, 0.1) 42%), url('assets/ui/arena-orbit.svg');
  background-repeat: no-repeat;
  background-size: cover, contain;
  background-position:
    center,
    right center;
  opacity: 1;
}
.heroMode:after {
  background: radial-gradient(circle, rgba(97, 129, 255, 0.28), transparent 67%);
  right: -55px;
  top: -58px;
  width: 270px;
  height: 270px;
}
.heroBody {
  padding: 31px 24px 26px;
  max-width: 64%;
  z-index: 2;
}
.heroTag {
  color: #2c1700;
  background: linear-gradient(140deg, #ffe9a3, #ffc34e);
  box-shadow: 0 7px 20px rgba(255, 183, 55, 0.22);
}
.heroMode h2 {
  font-size: 48px;
  letter-spacing: -0.05em;
  text-shadow: 0 8px 28px rgba(0, 0, 30, 0.46);
}
.heroMode p {
  font-size: 13px;
  color: #d1c9ea;
  max-width: 290px;
}
.heroGo {
  min-height: 46px;
  background: linear-gradient(135deg, #8277ff, #bd66ff);
  box-shadow:
    0 13px 34px rgba(126, 79, 255, 0.47),
    inset 0 1px rgba(255, 255, 255, 0.28);
}
.heroShield {
  right: 18px;
  bottom: 16px;
  width: 62px;
  height: 62px;
  filter: drop-shadow(0 8px 20px rgba(74, 232, 199, 0.35));
}
.heroRecord {
  z-index: 3;
}
.modeRow,
.modeGrid {
  gap: 10px;
}
.modeTile,
.modeStudio,
.duelEntryBtn,
.jouteChoice {
  color: #fff;
  border: 1px solid rgba(116, 103, 203, 0.55);
  background-image: url('assets/ui/panel-stars.svg'), var(--panel);
  background-size: cover, auto;
  border-radius: 20px;
  box-shadow: var(--shadow-card);
}
.modeTile {
  min-height: 148px;
  padding: 16px 10px 14px;
}
.modeTile .modeIc,
.modeStudio .modeIcon {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: radial-gradient(circle, rgba(130, 101, 255, 0.26), transparent 70%);
  filter: drop-shadow(0 0 12px currentColor);
}
.modeTile .modeIc svg {
  width: 34px;
  height: 34px;
}
.modeTile b {
  font-size: 13px;
}
.modeTile small {
  font-size: 9px;
  color: #bbb7dc;
}
.modeStudio {
  min-height: 132px;
  padding: 16px 10px;
}
.dailyBand,
.giftBar,
.resumeBar {
  border: 1px solid rgba(119, 104, 202, 0.56);
  border-radius: 20px;
  background-image:
    linear-gradient(90deg, rgba(15, 14, 53, 0.98), rgba(21, 16, 69, 0.88), rgba(10, 10, 39, 0.76)),
    url('assets/ui/planet-horizon.svg');
  background-size:
    auto,
    55% auto;
  background-position:
    center,
    right bottom;
  background-repeat: no-repeat;
  box-shadow: var(--shadow-card);
}
.dailyBand {
  min-height: 76px;
  padding: 15px;
}
.dailyBand .bandIc {
  background: linear-gradient(145deg, #39257a, #251651);
  box-shadow: 0 0 20px rgba(150, 95, 255, 0.28);
}
.dailyBand.ready,
.giftBar.ready {
  border-color: rgba(255, 199, 85, 0.85);
  background-image:
    linear-gradient(90deg, rgba(37, 27, 57, 0.97), rgba(39, 25, 65, 0.84), rgba(18, 12, 38, 0.7)),
    url('assets/ui/planet-horizon.svg');
}
.giftBar {
  min-height: 70px;
  padding: 13px 15px;
}
.giftGo,
.questClaim {
  background: linear-gradient(145deg, #ffe190, #ffb63e);
  color: #2c1800;
  box-shadow: 0 8px 22px rgba(255, 183, 57, 0.25);
}
.questGrid {
  gap: 11px;
}
.quest {
  position: relative;
  min-height: 92px;
  padding: 16px;
  border: 1px solid rgba(112, 99, 191, 0.5);
  border-radius: 20px;
  background-image:
    linear-gradient(95deg, rgba(24, 20, 72, 0.98), rgba(18, 14, 57, 0.88), rgba(10, 10, 39, 0.66)),
    url('assets/ui/planet-horizon.svg');
  background-size:
    auto,
    42% auto;
  background-position:
    center,
    right bottom;
  background-repeat: no-repeat;
  box-shadow: var(--shadow-card);
}
.questIcon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(145deg, #4a2e9b, #2c1a66);
  box-shadow: 0 0 24px rgba(157, 89, 255, 0.22);
}
.bar {
  height: 7px;
  background: rgba(16, 14, 55, 0.88);
  box-shadow: inset 0 2px 5px rgba(0, 0, 15, 0.58);
}
.bar i {
  background: linear-gradient(90deg, #706dff, #bd70ff);
  box-shadow: 0 0 14px rgba(172, 102, 255, 0.4);
}
.passCard,
.socialHero {
  border: 1px solid rgba(119, 104, 204, 0.54);
  background-image:
    linear-gradient(95deg, rgba(18, 15, 57, 0.98), rgba(25, 19, 73, 0.88), rgba(8, 9, 37, 0.35)),
    url('assets/ui/crown-orbit.svg');
  background-size:
    auto,
    46% auto;
  background-position:
    center,
    right center;
  background-repeat: no-repeat;
  box-shadow: var(--shadow-card);
}
.passProg button {
  background: linear-gradient(135deg, #322267, #452482);
  border: 1px solid rgba(148, 113, 237, 0.4);
}

/* Univers — ombrage des cartes de la maquette */
.catGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 11px !important;
  padding: 3px !important;
}
.catRail {
  gap: 11px;
  padding-bottom: 12px;
}
.catRail .catTile {
  flex: 0 0 112px;
}
.catTile {
  position: relative;
  isolation: isolate;
  min-height: 176px !important;
  padding: 15px 8px 13px !important;
  border: 1px solid color-mix(in srgb, var(--tileC) 68%, #6758a8) !important;
  border-radius: 21px !important;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--tileC) 18%, #14134d) 0%,
    color-mix(in srgb, var(--tileC) 10%, #11103b) 47%,
    #090a2b 100%
  ) !important;
  box-shadow:
    0 17px 33px rgba(0, 0, 22, 0.46),
    0 0 24px color-mix(in srgb, var(--tileC) 16%, transparent),
    inset 0 1px rgba(255, 255, 255, 0.12),
    inset 0 -35px 46px rgba(0, 0, 20, 0.42) !important;
  overflow: hidden;
}
.catTile:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--tileC) 34%, transparent), transparent 42%),
    url('assets/ui/panel-stars.svg');
  background-size: auto, cover;
  opacity: 0.9;
}
.catTile:after {
  content: '';
  position: absolute;
  z-index: 0;
  left: -28%;
  right: -28%;
  top: 28%;
  height: 54%;
  background: url('assets/ui/planet-horizon.svg') center bottom/cover no-repeat;
  opacity: 0.28;
  filter: hue-rotate(20deg) saturate(1.15);
}
.catTile > * {
  position: relative;
  z-index: 2;
}
.catTile .glyphWrap {
  width: 68px !important;
  height: 68px !important;
  margin: 0 auto 9px !important;
  border-radius: 50% !important;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.13),
    rgba(255, 255, 255, 0.02) 62%,
    transparent 66%
  ) !important;
  filter: drop-shadow(0 12px 15px rgba(0, 0, 20, 0.62)) drop-shadow(0 0 13px var(--tileC));
}
.catTile .glyphSvg {
  filter: drop-shadow(0 7px 8px rgba(0, 0, 20, 0.45));
}
.catTile b {
  font-size: 12px !important;
  line-height: 1.2 !important;
  text-shadow: 0 3px 10px rgba(0, 0, 18, 0.8);
}
.catTile small {
  font-size: 9px !important;
  color: #bebada !important;
  margin-top: 4px !important;
}
.catTile .tileBar {
  height: 4px !important;
  margin-top: 11px !important;
  background: rgba(5, 6, 28, 0.72) !important;
}
.catTile .tileBar em {
  box-shadow: 0 0 10px var(--tileC);
}
.catMore {
  background: linear-gradient(165deg, #1a174e, #0b0b31) !important;
}
.catStack .catTile {
  min-height: 122px !important;
  display: grid !important;
  grid-template-columns: 70px 1fr !important;
  grid-template-rows: auto auto auto !important;
  text-align: left !important;
  column-gap: 15px !important;
  align-items: center !important;
}
.catStack .catTile .glyphWrap {
  grid-row: 1/4;
  margin: 0 !important;
}
.catStack .catTile .tileBar {
  width: 100% !important;
}
.pickGrid {
  gap: 11px;
}
.pickCat,
.subcatCard {
  min-height: 76px;
  border: 1px solid rgba(113, 101, 194, 0.52);
  background-image: url('assets/ui/panel-stars.svg'), var(--panel);
  background-size: cover, auto;
  box-shadow: var(--shadow-card);
}
.pickCat {
  border-radius: 19px;
  padding: 12px;
}
.pickCat > span {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 18, 0.45));
}
.categoryHero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: var(--shadow-deep);
  background: var(--cat) !important;
}
.categoryHero:after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/ui/panel-stars.svg') center/cover;
  pointer-events: none;
  opacity: 0.55;
}
.categoryHero > * {
  position: relative;
  z-index: 1;
}

/* Partie, réponses, résultat et récapitulatif */
.gameScreen {
  max-width: 600px;
  background-color: #060821;
  background-image:
    linear-gradient(180deg, rgba(7, 8, 35, 0.2), rgba(5, 6, 27, 0.65)), url('assets/ui/cosmic-space.svg');
  background-size: cover;
  box-shadow: 0 0 90px rgba(0, 0, 25, 0.8);
}
.gameTop > button,
.reportBtn,
.liveQuitBtn,
.liveReportBtn,
.recapReportBtn {
  background: linear-gradient(165deg, #211d60, #0f103b);
  border: 1px solid rgba(127, 109, 214, 0.55);
  box-shadow: var(--shadow-card);
  color: #d8d2f3;
}
.gameStat b,
.gameCount {
  color: #fff;
  text-shadow: 0 0 16px var(--c1, #8977ff);
}
.timerBar {
  height: 7px;
  background: #0c0d35;
  border: 1px solid rgba(94, 85, 164, 0.35);
  box-shadow: inset 0 2px 6px rgba(0, 0, 15, 0.65);
}
.timerBar i {
  background: linear-gradient(90deg, #42e6c1, #8277ff 58%, #ff78c8);
  box-shadow: 0 0 18px var(--c1, #7d71ff);
}
.questionVisual {
  height: clamp(90px, 20dvh, 190px);
  flex: none;
  border: 1px solid rgba(141, 124, 223, 0.45);
  border-radius: 24px;
  background: linear-gradient(135deg, var(--c2, #121348), #090a2d);
  box-shadow: var(--shadow-deep);
  margin-bottom: 21px;
}
.questionTitle {
  font-size: clamp(23px, 6.6vw, 31px);
  line-height: 1.2;
  text-shadow: 0 5px 20px rgba(0, 0, 20, 0.56);
}
.answers {
  gap: 11px;
}
.answer {
  min-height: 60px;
  border: 1px solid rgba(119, 105, 203, 0.58);
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(28, 26, 79, 0.97), rgba(10, 11, 41, 0.98));
  box-shadow:
    0 12px 27px rgba(0, 0, 20, 0.34),
    inset 0 1px rgba(255, 255, 255, 0.08);
}
.answer span {
  width: 32px;
  height: 32px;
  background: linear-gradient(145deg, #3b2a84, #24195d);
  color: #d4c8ff;
}
.answer.correct {
  background: linear-gradient(145deg, #12493d, #092d2d);
  border-color: #54edc7;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}
.answer.wrong {
  background: linear-gradient(145deg, #531d3d, #2c132f);
  border-color: #ff719f;
}
.answerFeedback > div,
.resultHero,
.resultProgress,
.duelResult,
.rewardStrip > div,
.reviewCard,
.recapRow {
  border: 1px solid rgba(120, 105, 201, 0.5);
  background-image: url('assets/ui/panel-stars.svg'), var(--panel);
  background-size: cover, auto;
  box-shadow: var(--shadow-card);
}
.answerFeedback > div {
  border-radius: 22px;
  backdrop-filter: blur(20px);
}
.resultHero {
  background-image:
    radial-gradient(circle at 50% 15%, rgba(129, 94, 255, 0.36), transparent 38%), url('assets/ui/panel-stars.svg'),
    var(--panel);
  box-shadow: var(--shadow-deep);
}
.resultMark {
  filter: drop-shadow(0 0 20px rgba(255, 199, 84, 0.4));
}
.bigScore {
  background: linear-gradient(180deg, #fff, #cfc5ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.perfectBanner {
  background: linear-gradient(135deg, #203e2f, #17184b);
  border: 1px solid rgba(74, 230, 191, 0.5);
  box-shadow: var(--shadow-card);
}
.reviewTabs button {
  min-height: 44px;
  background: #11103c;
  border-color: #514588;
}
.reviewTabs button.on {
  background: linear-gradient(135deg, #6254d7, #9a55e5);
}

/* Boutique spatiale */
.qa-shop-root {
  font-family: 'Manrope', sans-serif;
  background: transparent;
  color: var(--qa-text);
}
.qa-shop-shell {
  width: min(600px, 100%);
  padding: 12px 16px 108px;
}
.qa-shop-top {
  padding-top: max(10px, env(safe-area-inset-top));
}
.qa-shop-title h1 {
  font-size: 36px;
}
.qa-shop-title p {
  color: var(--qa-muted);
}
.qa-wallet button,
.qa-studio-launch button,
.qa-tabs button {
  border-color: rgba(118, 103, 199, 0.55);
  background: linear-gradient(165deg, #1b194f, #0c0d34);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.07),
    0 8px 20px rgba(0, 0, 20, 0.28);
}
.qa-tabs {
  gap: 8px;
  margin: 13px 0 18px;
}
.qa-tabs button {
  min-height: 44px;
  padding: 10px 15px;
  border-radius: 15px;
  color: #bab5db;
}
.qa-tabs button.on {
  color: #fff;
  border-color: #9b7cff;
  background: linear-gradient(135deg, #6958e5, #a95ce9);
  box-shadow: 0 10px 25px rgba(119, 75, 235, 0.32);
}
.qa-pass {
  min-height: 196px;
  border: 1px solid rgba(255, 201, 91, 0.72);
  border-radius: 25px;
  background-image:
    linear-gradient(90deg, rgba(12, 12, 44, 0.98), rgba(23, 17, 70, 0.82), rgba(8, 8, 32, 0.18)),
    url('assets/ui/crown-orbit.svg');
  background-position:
    center,
    right center;
  background-size:
    auto,
    52% auto;
  background-repeat: no-repeat;
  box-shadow:
    var(--shadow-deep),
    0 0 30px rgba(255, 189, 65, 0.08);
}
.qa-pass-bg {
  opacity: 0.15;
}
.qa-pass-content {
  min-height: 196px;
  padding: 22px;
}
.qa-pass h2 {
  font-size: 28px;
}
.qa-pass p {
  font-size: 12px;
  color: #c9c2e2;
}
.qa-gold-btn {
  min-height: 46px;
  background: linear-gradient(145deg, #ffe59b, #ffb83f);
  box-shadow: 0 11px 25px rgba(255, 183, 57, 0.25);
}
.qa-section-head h2 {
  font-size: 22px;
}
.qa-chest-grid,
.qa-money-grid,
.qa-boost-grid {
  gap: 11px;
}
.qa-card {
  border: 1px solid rgba(115, 102, 199, 0.55);
  border-radius: 20px;
  background-image: url('assets/ui/panel-stars.svg'), linear-gradient(180deg, #19184f, #090a2d 83%);
  background-size: cover, auto;
  box-shadow: var(--shadow-card);
}
.qa-card:before {
  content: '';
  position: absolute;
  inset: 32% -25% -16%;
  background: url('assets/ui/planet-horizon.svg') center bottom/cover no-repeat;
  opacity: 0.28;
  pointer-events: none;
}
.qa-card > * {
  position: relative;
  z-index: 1;
}
.qa-chest-card[data-rarity='rare'] {
  border-color: #56baff;
  box-shadow:
    0 17px 34px rgba(0, 48, 110, 0.38),
    inset 0 1px rgba(255, 255, 255, 0.12);
}
.qa-chest-card[data-rarity='epic'] {
  border-color: #b873ff;
}
.qa-chest-card[data-rarity='legendary'] {
  border-color: #ffc75d;
  box-shadow:
    0 17px 34px rgba(111, 58, 0, 0.34),
    0 0 25px rgba(255, 194, 64, 0.1),
    inset 0 1px rgba(255, 255, 255, 0.14);
}
.qa-chest-art {
  height: 106px;
}
.qa-money-art {
  height: 88px;
}
.qa-boost-art {
  height: 82px;
}
.qa-offer,
.shopLegacyCard {
  border: 1px solid rgba(119, 105, 200, 0.55);
  background-image: url('assets/ui/panel-stars.svg'), var(--panel);
  background-size: cover, auto;
  box-shadow: var(--shadow-card);
}
.qa-shop-sheet,
.qa-studio-panel {
  background: linear-gradient(180deg, #17164d, #08092d);
  border-color: #5c4ea1;
  box-shadow: 0 -28px 80px rgba(0, 0, 20, 0.72);
}
.qa-shop-overlay,
.qa-studio-overlay {
  background: rgba(2, 3, 18, 0.82);
  backdrop-filter: blur(12px);
}
.qa-shop-toast {
  background: #f6f3ff;
  color: #141238;
}

/* Profil, amis, social et compte */
.profileHero {
  border: 1px solid rgba(119, 105, 203, 0.58);
  background-image:
    linear-gradient(90deg, rgba(22, 19, 66, 0.97), rgba(10, 11, 42, 0.82)), url('assets/ui/panel-stars.svg');
  box-shadow: var(--shadow-deep);
}
.bigAvatar,
.liveAvatar {
  background: radial-gradient(circle at 35% 25%, #bdadff, #5e54c7 47%, #17144b);
  box-shadow:
    0 15px 34px rgba(67, 62, 184, 0.38),
    0 0 0 2px rgba(164, 129, 255, 0.42);
}
.statGrid div,
.statGrid button,
.miniMastery > div,
.miniMastery > button,
.profileActions button,
.socialActions button,
.leader,
.friendCard,
.profileIdCard,
.emptyState {
  border: 1px solid rgba(108, 96, 183, 0.5);
  background-image: url('assets/ui/panel-stars.svg'), var(--panel);
  background-size: cover, auto;
  box-shadow: var(--shadow-card);
}
.statGrid div,
.statGrid button {
  border-radius: 17px;
  min-height: 68px;
}
.miniMastery > div,
.miniMastery > button {
  border-radius: 17px;
  min-height: 62px;
}
.profileActions button,
.socialActions button {
  min-height: 52px;
  border-radius: 17px;
}
.profileIdCard {
  border-radius: 20px;
}
.idBox code {
  color: #69f2d2;
  background: rgba(69, 231, 194, 0.09);
  border: 1px solid rgba(69, 231, 194, 0.22);
}
.copyBtn,
.editBtn,
.confirmBtn,
.cancelBtn,
.fBtnPrimary,
.fBtnGhost,
.fBtnAccept,
.fBtnDecline {
  min-width: 44px;
  min-height: 44px;
  border-radius: 13px;
  background: linear-gradient(145deg, #282364, #10113d);
  border: 1px solid rgba(124, 108, 205, 0.55);
  color: #fff;
}
.friendsTabBar {
  padding: 5px;
  border: 1px solid rgba(108, 96, 184, 0.42);
  background: #0b0c34;
  border-radius: 16px;
}
.friendsTabBar button {
  min-height: 44px;
  border-radius: 12px;
}
.friendsTabBar button.on {
  background: linear-gradient(135deg, #554bc8, #934bd8);
}
.friendsList {
  background: transparent;
}
.friendCard {
  border-radius: 17px !important;
  margin-bottom: 9px;
  padding: 13px !important;
}
.onlineDot,
.cloudDot {
  box-shadow: 0 0 12px #43e8b3;
}
.friendsSearch {
  background: transparent;
}
.searchIconBtn,
.searchClearBtn {
  min-width: 44px;
  min-height: 44px;
  color: #d6d0ee;
}
.emptyState {
  border-radius: 20px;
  opacity: 1;
  color: #c7c2df;
}

/* Duel en direct et invitations */
.liveLobby,
.liveFaceoff {
  gap: 12px;
}
.liveSeat,
.liveBoard,
.jouteCatTile,
.recapRow {
  border: 1px solid rgba(113, 100, 195, 0.54);
  background-image: url('assets/ui/panel-stars.svg'), var(--panel);
  background-size: cover, auto;
  box-shadow: var(--shadow-card);
}
.liveSeat {
  border-radius: 22px;
}
.liveSeat.filled {
  border-color: #806ef4;
}
.liveSeat.winner {
  border-color: #ffc85d;
  box-shadow:
    0 0 28px rgba(255, 197, 80, 0.15),
    var(--shadow-card);
}
.liveCountdown {
  background-image:
    radial-gradient(circle at 50% 42%, rgba(106, 81, 231, 0.27), transparent 35%), url('assets/ui/cosmic-space.svg');
  background-size: cover;
}
.liveCountdownRing {
  background: radial-gradient(circle, #242062, #0b0c33 72%);
  border-color: #9c7cff;
  box-shadow:
    0 0 0 10px rgba(118, 88, 255, 0.09),
    0 0 70px rgba(105, 81, 255, 0.32);
}
.liveBoard {
  border-radius: 18px;
}
.liveTimeline {
  opacity: 0.92;
}
.jouteChoice {
  min-height: 132px;
}
.jouteCatGrid {
  gap: 11px;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.jouteCatTile {
  min-height: 96px;
  border-radius: 18px !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden;
  position: relative;
}
.jouteCatTile:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(3, 4, 25, 0.45));
  pointer-events: none;
}
.jouteCatTile > * {
  position: relative;
  z-index: 1;
}
.duelEntryBtn {
  min-height: 76px;
  padding: 14px 16px;
}
.duelEntryBtn.bot {
  border-color: rgba(69, 231, 194, 0.5);
}
.duelEntryBtn.friend {
  border-color: rgba(179, 132, 255, 0.5);
}

/* Défis, coffres, événements, ligue et onboarding */
.dailyCard,
.dailyHero,
.slot,
.ligHero,
.ligPalier,
.eventLanding,
.eventReward,
.qaEvent {
  border: 1px solid rgba(113, 100, 194, 0.52);
  background-image: url('assets/ui/panel-stars.svg'), var(--panel);
  background-size: cover, auto;
  box-shadow: var(--shadow-card);
}
.dailyCard {
  border-radius: 23px;
  overflow: hidden;
}
.dailyHero {
  border-radius: 26px;
  padding: 32px 22px;
}
.dailyRing {
  filter: drop-shadow(0 0 22px rgba(255, 193, 67, 0.25));
}
.slot {
  border-radius: 20px;
  min-height: 140px;
}
.slot.ready {
  border-color: #ffc85d;
  box-shadow:
    0 0 30px rgba(255, 197, 80, 0.14),
    var(--shadow-card);
}
.ligHero {
  border-radius: 26px;
}
.ligPalier {
  border-radius: 17px;
}
.ligPalier.actuel {
  border-color: #ffc85d;
  background: linear-gradient(120deg, #31265e, #161344);
}
.qaEvent {
  border-radius: 20px;
  box-shadow: var(--shadow-card);
}
.qaEvent:after {
  background: linear-gradient(180deg, rgba(5, 7, 25, 0.05), rgba(5, 6, 28, 0.42) 42%, rgba(5, 6, 27, 0.97));
}
.eventLanding {
  background-image:
    radial-gradient(circle at 84% 12%, rgba(255, 198, 78, 0.3), transparent 30%), url('assets/ui/panel-stars.svg'),
    var(--panel);
}
.onboarding {
  padding: 22px;
  border: 1px solid rgba(119, 105, 201, 0.5);
  border-radius: 28px;
  background: rgba(9, 10, 38, 0.72);
  box-shadow: var(--shadow-deep);
  backdrop-filter: blur(16px);
}
.avatarChoices button,
.avatarChoice {
  border-color: rgba(119, 105, 202, 0.5);
  background: linear-gradient(145deg, #1c194f, #0c0d34);
  box-shadow: var(--shadow-card);
}
.avatarChoices button.active,
.avatarChoice.selected {
  border-color: #a884ff;
  box-shadow:
    0 0 0 2px rgba(168, 132, 255, 0.18),
    0 0 25px rgba(124, 92, 255, 0.24);
}
.atlasIntro {
  background-image:
    radial-gradient(circle at 50% 20%, rgba(69, 231, 194, 0.16), transparent 34%), url('assets/ui/cosmic-space.svg');
  background-size: cover;
}
.atlasDialogue {
  background: linear-gradient(180deg, rgba(24, 22, 72, 0.94), rgba(7, 8, 31, 0.98));
  border-color: rgba(123, 108, 204, 0.48);
  box-shadow: var(--shadow-deep);
}
.atlasRewards span,
.atlasModes span,
.atlasMiniAnswers i {
  background: #11103d;
  border-color: rgba(111, 99, 187, 0.46);
}

/* Modales, toasts et moments de récompense */
.modalBackdrop {
  background: rgba(1, 2, 15, 0.82);
  backdrop-filter: blur(12px) saturate(1.2);
}
.modalCard {
  background-image:
    linear-gradient(180deg, rgba(25, 22, 72, 0.99), rgba(7, 8, 31, 0.99)), url('assets/ui/panel-stars.svg');
  border: 1px solid rgba(126, 110, 211, 0.58);
  border-radius: 27px;
  box-shadow:
    0 -28px 90px rgba(0, 0, 18, 0.76),
    inset 0 1px rgba(255, 255, 255, 0.1);
}
.modalClose {
  min-width: 44px;
  min-height: 44px;
  background: linear-gradient(145deg, #292467, #10113d);
  border: 1px solid rgba(116, 102, 194, 0.5);
}
#toast {
  bottom: 96px;
  background: rgba(248, 246, 255, 0.96);
  color: #141238;
  border: 1px solid #fff;
  box-shadow: 0 16px 45px rgba(0, 0, 20, 0.58);
  backdrop-filter: blur(10px);
}
/* Le fondu (opacité + flou) et le cadre doré de .bmInner sont définis dans
   style.css — on ne fait ici que renforcer le flou pour un vrai effet de
   fondu sur l'écran de jeu derrière la carte, sans repasser sur un fond
   opaque ni écraser le cadre. */
.bigMoment {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Connexion/compte : seules les zones inline du jeu sont surchargées.
   Le bouton Google, sans classe et avec son style officiel inline, reste intact. */
#cloudNudge {
  margin: 0 0 18px !important;
  padding: 15px 16px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(142, 113, 238, 0.55) !important;
  background: linear-gradient(135deg, rgba(45, 34, 117, 0.95), rgba(12, 12, 46, 0.96)) !important;
  box-shadow: var(--shadow-card) !important;
}
#cloudResetBlock {
  border-color: rgba(255, 111, 159, 0.42) !important;
  background: linear-gradient(145deg, rgba(71, 21, 50, 0.65), rgba(21, 12, 40, 0.9)) !important;
  box-shadow: var(--shadow-card) !important;
}
.cloudDot {
  border-color: #090a2b !important;
}

/* Écran de mot de passe : styles inline nécessaires à surcharger */
#qaGate {
  background-color: #050720 !important;
  background-image:
    linear-gradient(rgba(4, 6, 23, 0.12), rgba(4, 6, 23, 0.48)), url('assets/ui/cosmic-space.svg') !important;
  background-size: cover !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
}
#qaGate > div {
  max-width: 360px !important;
  padding: 28px !important;
  border: 1px solid rgba(132, 113, 221, 0.52) !important;
  border-radius: 28px !important;
  background: linear-gradient(165deg, rgba(24, 22, 70, 0.94), rgba(7, 8, 31, 0.97)) !important;
  box-shadow: var(--shadow-deep) !important;
  backdrop-filter: blur(16px) !important;
}
#qaGate h1 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 27px !important;
}
#qaGate p {
  color: #beb8db !important;
}
#qaGatePass {
  min-height: 50px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(127, 109, 209, 0.58) !important;
  background: #0a0b35 !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 15, 0.55) !important;
}
#qaGateEye {
  min-width: 44px !important;
  color: #d7d1ed !important;
  opacity: 0.9 !important;
}
#qaGateBtn {
  min-height: 50px !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg, #7368ff, #b25fff) !important;
  box-shadow:
    0 12px 30px rgba(112, 73, 255, 0.4),
    inset 0 1px rgba(255, 255, 255, 0.25) !important;
}
#qaGateErr {
  color: #ff8bb0 !important;
}

/* Administration et formulaires secondaires */
.adminTabs button,
.adminPager button,
.categoryAdminTop button,
.subAdminList button,
.qRow button,
.qa-admin-actions button,
.qa-mini-actions button {
  min-height: 40px;
  border: 1px solid rgba(108, 96, 182, 0.5);
  background: linear-gradient(145deg, #282363, #10113d);
  color: #f1edff;
  border-radius: 12px;
}
.adminTabs button.active {
  background: linear-gradient(135deg, #5f52d2, #984ddc);
  border-color: #9d7bff;
}
.adminStats div,
.qualitySummary > div,
.qRow,
.subAdminList > div,
.previewAnswers div {
  background: linear-gradient(165deg, #171549, #0b0c32);
  border-color: rgba(101, 91, 172, 0.45);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
}
.qNeedsReview {
  background: linear-gradient(90deg, #3a242d, #14113d) !important;
  border-color: #a36c45 !important;
}

/* Mobile 360 px */
@media (max-width: 420px) {
  #app,
  .qa-shop-shell {
    padding-left: 12px;
    padding-right: 12px;
  }
  .brandBtn {
    gap: 6px;
  }
  .brandBtn b {
    font-size: 17px;
  }
  .logoRing {
    width: 31px;
    height: 31px;
  }
  .wallet {
    gap: 4px;
  }
  .wallet .wCoin,
  .wallet .wGem {
    height: 35px;
    padding: 5px 7px;
  }
  .wallet .wCoin b,
  .wallet .wGem b {
    font-size: 10px;
  }
  .wChest {
    width: 35px;
    height: 35px;
  }
  .profileChip {
    padding: 4px;
  }
  .avatarMini {
    width: 31px;
    height: 31px;
  }
  .heroMode {
    min-height: 250px;
  }
  .heroMode .heroBg {
    width: 70%;
    opacity: 0.84;
  }
  .heroBody {
    max-width: 70%;
    padding: 24px 17px 20px;
  }
  .heroMode h2 {
    font-size: 39px;
  }
  .heroMode p {
    font-size: 11px;
  }
  .heroGo {
    font-size: 11px;
    padding: 11px 13px;
  }
  .modeTile {
    min-height: 134px;
    padding: 13px 7px;
  }
  .modeTile .modeIc {
    width: 42px;
    height: 42px;
  }
  .modeTile b {
    font-size: 12px;
  }
  .modeTile small {
    font-size: 8.5px;
  }
  .catGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  .catGrid .catTile {
    min-height: 152px !important;
    padding: 12px 5px 10px !important;
    border-radius: 18px !important;
  }
  .catGrid .catTile .glyphWrap {
    width: 53px !important;
    height: 53px !important;
  }
  .catGrid .catTile b {
    font-size: 10px !important;
  }
  .catGrid .catTile small {
    font-size: 7.5px !important;
  }
  .catRail .catTile {
    flex-basis: 104px;
    min-height: 164px !important;
  }
  .quest {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 14px 12px;
  }
  .quest.ready {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .questClaim {
    grid-column: 1/-1;
    width: 100%;
  }
  .questionVisual {
    height: 165px;
  }
  .questionTitle {
    font-size: 23px;
  }
  .answer {
    font-size: 12.5px;
    padding: 13px 12px;
  }
  .qa-shop-title h1 {
    font-size: 31px;
  }
  .qa-pass {
    min-height: 175px;
  }
  .qa-pass-content {
    min-height: 175px;
    width: 77%;
    padding: 18px;
  }
  .qa-pass h2 {
    font-size: 23px;
  }
  .qa-chest-grid,
  .qa-money-grid {
    gap: 7px;
  }
  .qa-chest-art {
    height: 84px;
  }
  .qa-money-art {
    height: 71px;
  }
  .qa-card {
    border-radius: 17px;
  }
  .qa-chest-card > b {
    font-size: 10px;
  }
  .qa-money-card strong {
    font-size: 12px;
  }
  .qa-money-price {
    font-size: 9px;
  }
  .liveLobby,
  .liveFaceoff {
    grid-template-columns: 1fr auto 1fr;
    gap: 7px;
  }
  .liveSeat {
    padding: 14px 7px;
  }
  .liveAvatar {
    width: 48px;
    height: 48px;
  }
  .rewardStrip {
    gap: 6px;
  }
  .rewardStrip > div {
    padding: 11px 5px;
  }
  .jouteChoiceGrid {
    gap: 8px;
  }
  .jouteChoice {
    padding: 16px 8px;
  }
  .modalCard {
    padding: 19px 16px;
  }
}

@media (max-width: 350px) {
  .brandBtn .brandText {
    display: none;
  }
  .heroBody {
    max-width: 76%;
  }
  .heroMode .heroBg {
    width: 66%;
    opacity: 0.68;
  }
  .modeRow {
    gap: 6px;
  }
  .modeTile {
    padding: 12px 5px;
  }
  .modeTile small {
    display: none;
  }
  .catGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .catGrid .catTile {
    min-height: 150px !important;
  }
  .qa-tabs button {
    padding: 9px 11px;
  }
  .qa-pass-content {
    width: 84%;
  }
}

@media (min-width: 700px) {
  #app,
  .qa-shop-shell {
    max-width: 760px;
  }
  nav {
    width: min(760px, 100%);
  }
  .heroMode {
    min-height: 320px;
  }
  .heroMode h2 {
    font-size: 56px;
  }
  .heroMode .heroBg {
    width: 64%;
    background-position:
      center,
      right center;
  }
  .catGrid {
    gap: 14px !important;
  }
  .catTile {
    min-height: 202px !important;
  }
  .catTile .glyphWrap {
    width: 82px !important;
    height: 82px !important;
  }
  .catTile b {
    font-size: 13px !important;
  }
  .questionVisual {
    height: 230px;
  }
  .qa-chest-art {
    height: 122px;
  }
  .qa-money-art {
    height: 100px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .heroMode,
  .catTile,
  .qa-card,
  .quest,
  .answer,
  body::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   Complément v4.7 — uniformisation des écrans de partie
   Les écrans de jeu (classique, blitz, survie, défi, duel bot et
   duel live) portent la classe .themed, dont les règles de
   style.css étaient plus fortes que celles du thème : on les
   recouvre ici avec la même base cosmique. La couleur de
   l'univers reste présente en simple halo lumineux.
   ============================================================ */
.gameScreen.themed,
.themed .gameScreen {
  background-color: #060821;
  background-image:
    radial-gradient(120% 42% at 50% -6%, color-mix(in srgb, var(--c1, #7d71ff) 20%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(7, 8, 35, 0.2), rgba(5, 6, 27, 0.65)), url('assets/ui/cosmic-space.svg');
  background-size: auto, auto, cover;
  background-position: center top;
}
.gameScreen.golden {
  background-color: #060821 !important;
  background-image:
    radial-gradient(120% 42% at 50% -6%, rgba(255, 200, 93, 0.3), transparent 62%),
    linear-gradient(180deg, rgba(7, 8, 35, 0.2), rgba(5, 6, 27, 0.65)), url('assets/ui/cosmic-space.svg') !important;
  background-size: auto, auto, cover !important;
}
.themed .answer {
  border-color: rgba(119, 105, 203, 0.58);
  background: linear-gradient(165deg, rgba(28, 26, 79, 0.97), rgba(10, 11, 41, 0.98));
}
.themed .answer span {
  background: linear-gradient(145deg, #3b2a84, #24195d);
  color: #d4c8ff;
}
.themed .answer.correct {
  background: linear-gradient(145deg, #12493d, #092d2d);
  border-color: #54edc7;
}
.themed .answer.wrong {
  background: linear-gradient(145deg, #531d3d, #2c132f);
  border-color: #ff719f;
}
.golden .answer {
  border-color: rgba(255, 200, 93, 0.55);
}
.themed .timerBar i {
  background: linear-gradient(90deg, #42e6c1, #8277ff 58%, #ff78c8);
}
.themed .gameStat b {
  color: #fff;
}
.themed .questionVisual {
  border-color: color-mix(in srgb, var(--c1, #8d7cdf) 40%, rgba(141, 124, 223, 0.45));
}
.themed .resultHero {
  border-color: rgba(120, 105, 201, 0.5);
  background:
    radial-gradient(circle at 50% 15%, rgba(129, 94, 255, 0.36), transparent 38%), url('assets/ui/panel-stars.svg'),
    var(--panel);
}
.themed .bigScore {
  color: #fff;
  text-shadow: 0 0 26px rgba(141, 124, 255, 0.55);
}
.themed .resultMark {
  color: var(--gold);
}
.themed .rewardStrip > div {
  border-color: rgba(120, 105, 201, 0.5);
  background: url('assets/ui/panel-stars.svg'), var(--panel);
}

/* Accueil : le texte de la carte Survie ne mord plus sur l'illustration */
.heroMode p {
  text-shadow: 0 2px 10px rgba(4, 6, 23, 0.9);
}
@media (max-width: 440px) {
  .heroMode p {
    max-width: 58%;
  }
}

/* ============================================================
   V4.8 — Illustrations de la maquette (assets/art/)
   Aucune classe ni ID ajouté : chaque image est rattachée par
   les attributs déjà présents (onclick, data-open, data-rarity).
   ============================================================ */

/* Fond spatial peint */
body {
  background-image: linear-gradient(rgba(4, 6, 23, 0.05), rgba(4, 6, 23, 0.35)), url('assets/art/bg/fond-espace.webp');
  background-size: cover, cover;
  background-position:
    center top,
    center top;
}
#qaGate {
  background-image:
    linear-gradient(rgba(4, 6, 23, 0.1), rgba(4, 6, 23, 0.45)), url('assets/art/bg/fond-espace.webp') !important;
  background-position: center top !important;
}

/* Univers : une illustration par catégorie */
.catTile,
.pickCat,
.categoryHero {
  --art: none;
}
.catTile[onclick="categoryDetail('sport')"],
.pickCat[onclick^="launchGame('sport',"],
.screen:has(.modeStudio[onclick^="launchGame('sport',"]) .categoryHero {
  --art: url('assets/art/categories/sport.webp');
}
.catTile[onclick="categoryDetail('influence')"],
.pickCat[onclick^="launchGame('influence',"],
.screen:has(.modeStudio[onclick^="launchGame('influence',"]) .categoryHero {
  --art: url('assets/art/categories/influence.webp');
}
.catTile[onclick="categoryDetail('musique')"],
.pickCat[onclick^="launchGame('musique',"],
.screen:has(.modeStudio[onclick^="launchGame('musique',"]) .categoryHero {
  --art: url('assets/art/categories/musique.webp');
}
.catTile[onclick="categoryDetail('tv')"],
.pickCat[onclick^="launchGame('tv',"],
.screen:has(.modeStudio[onclick^="launchGame('tv',"]) .categoryHero {
  --art: url('assets/art/categories/tv.webp');
}
.catTile[onclick="categoryDetail('histoire')"],
.pickCat[onclick^="launchGame('histoire',"],
.screen:has(.modeStudio[onclick^="launchGame('histoire',"]) .categoryHero {
  --art: url('assets/art/categories/histoire.webp');
}
.catTile[onclick="categoryDetail('gastronomie')"],
.pickCat[onclick^="launchGame('gastronomie',"],
.screen:has(.modeStudio[onclick^="launchGame('gastronomie',"]) .categoryHero {
  --art: url('assets/art/categories/gastronomie.webp');
}
.catTile[onclick="categoryDetail('gaming')"],
.pickCat[onclick^="launchGame('gaming',"],
.screen:has(.modeStudio[onclick^="launchGame('gaming',"]) .categoryHero {
  --art: url('assets/art/categories/gaming.webp');
}
.catTile[onclick="categoryDetail('culture')"],
.pickCat[onclick^="launchGame('culture',"],
.screen:has(.modeStudio[onclick^="launchGame('culture',"]) .categoryHero {
  --art: url('assets/art/categories/culture.webp');
}
.catTile[onclick="categoryDetail('animaux')"],
.pickCat[onclick^="launchGame('animaux',"],
.screen:has(.modeStudio[onclick^="launchGame('animaux',"]) .categoryHero {
  --art: url('assets/art/categories/animaux.webp');
}
.catTile[onclick="categoryDetail('astronomie_espace')"],
.pickCat[onclick^="launchGame('astronomie_espace',"],
.screen:has(.modeStudio[onclick^="launchGame('astronomie_espace',"]) .categoryHero {
  --art: url('assets/art/categories/astronomie_espace.webp');
}
.catTile[onclick="categoryDetail('auto_transports')"],
.pickCat[onclick^="launchGame('auto_transports',"],
.screen:has(.modeStudio[onclick^="launchGame('auto_transports',"]) .categoryHero {
  --art: url('assets/art/categories/auto_transports.webp');
}
.catTile[onclick="categoryDetail('cinema')"],
.pickCat[onclick^="launchGame('cinema',"],
.screen:has(.modeStudio[onclick^="launchGame('cinema',"]) .categoryHero {
  --art: url('assets/art/categories/cinema.webp');
}
.catTile[onclick="categoryDetail('geographie_monde')"],
.pickCat[onclick^="launchGame('geographie_monde',"],
.screen:has(.modeStudio[onclick^="launchGame('geographie_monde',"]) .categoryHero {
  --art: url('assets/art/categories/geographie_monde.webp');
}
.catTile[onclick="categoryDetail('langue_expressions')"],
.pickCat[onclick^="launchGame('langue_expressions',"],
.screen:has(.modeStudio[onclick^="launchGame('langue_expressions',"]) .categoryHero {
  --art: url('assets/art/categories/langue_expressions.webp');
}
.catTile[onclick="categoryDetail('litterature_bd')"],
.pickCat[onclick^="launchGame('litterature_bd',"],
.screen:has(.modeStudio[onclick^="launchGame('litterature_bd',"]) .categoryHero {
  --art: url('assets/art/categories/litterature_bd.webp');
}
.catTile[onclick="categoryDetail('manga_anime')"],
.pickCat[onclick^="launchGame('manga_anime',"],
.screen:has(.modeStudio[onclick^="launchGame('manga_anime',"]) .categoryHero {
  --art: url('assets/art/categories/manga_anime.webp');
}
.catTile[onclick="categoryDetail('mode_marques')"],
.pickCat[onclick^="launchGame('mode_marques',"],
.screen:has(.modeStudio[onclick^="launchGame('mode_marques',"]) .categoryHero {
  --art: url('assets/art/categories/mode_marques.webp');
}
.catTile[onclick="categoryDetail('mythologie_legendes')"],
.pickCat[onclick^="launchGame('mythologie_legendes',"],
.screen:has(.modeStudio[onclick^="launchGame('mythologie_legendes',"]) .categoryHero {
  --art: url('assets/art/categories/mythologie_legendes.webp');
}
.catTile[onclick="categoryDetail('people_celebrites')"],
.pickCat[onclick^="launchGame('people_celebrites',"],
.screen:has(.modeStudio[onclick^="launchGame('people_celebrites',"]) .categoryHero {
  --art: url('assets/art/categories/people_celebrites.webp');
}
.catTile[onclick="categoryDetail('sciences_nature')"],
.pickCat[onclick^="launchGame('sciences_nature',"],
.screen:has(.modeStudio[onclick^="launchGame('sciences_nature',"]) .categoryHero {
  --art: url('assets/art/categories/sciences_nature.webp');
}
.catTile[onclick="categoryDetail('technologie_internet')"],
.pickCat[onclick^="launchGame('technologie_internet',"],
.screen:has(.modeStudio[onclick^="launchGame('technologie_internet',"]) .categoryHero {
  --art: url('assets/art/categories/technologie_internet.webp');
}
.catTile[onclick="categoryDetail('vie_quotidienne')"],
.pickCat[onclick^="launchGame('vie_quotidienne',"],
.screen:has(.modeStudio[onclick^="launchGame('vie_quotidienne',"]) .categoryHero {
  --art: url('assets/art/categories/vie_quotidienne.webp');
}

.catTile:not(.catMore) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: stretch !important;
  text-align: left !important;
  background: #070822 !important;
}
.catTile:not(.catMore):before {
  background-image: var(--art);
  background-size: cover;
  background-position: center 18%;
  background-repeat: no-repeat;
  opacity: 1;
}
.catTile:not(.catMore):after {
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(180deg, rgba(5, 6, 26, 0) 34%, rgba(5, 6, 26, 0.72) 62%, rgba(5, 6, 26, 0.96) 100%);
  opacity: 1;
  filter: none;
}
.catTile:not(.catMore) .glyphWrap {
  display: none !important;
}
.catTile:not(.catMore) b {
  font-size: 13px !important;
  line-height: 1.15 !important;
  overflow-wrap: anywhere;
}
.catTile:not(.catMore) small {
  font-size: 10px !important;
  color: #d4cdef !important;
}
.catTile:not(.catMore) .tileBar {
  margin-top: 8px !important;
}
.catTile:not(.catMore) {
  padding: 10px 10px 11px !important;
}
.catRail .catTile {
  flex: 0 0 136px !important;
  min-height: 184px !important;
}

/* Liste « Jouer » : vignette illustrée à gauche */
.catStack .catTile:not(.catMore) {
  display: grid !important;
  min-height: 96px !important;
  padding: 12px 14px !important;
  background: var(--panel) !important;
}
.catStack .catTile:not(.catMore):before {
  right: auto;
  width: 118px;
  background-position: center 22%;
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent);
  mask-image: linear-gradient(90deg, #000 55%, transparent);
}
.catStack .catTile:not(.catMore):after {
  display: none;
}
.catStack .catTile:not(.catMore) .glyphWrap {
  display: block !important;
  visibility: hidden;
}
.catStack .catTile:not(.catMore) {
  grid-template-columns: 92px 1fr !important;
}

/* Sélecteur de catégorie (duel, défi) et en-tête de catégorie */
.pickCat .pickGlyph {
  background: var(--art) center 22% / cover no-repeat !important;
}
.pickCat:not(.mixCat) .pickGlyph > * {
  display: none;
}
.categoryHero .bigCat {
  width: 84px !important;
  height: 84px !important;
  border-radius: 20px;
  background: var(--art) center 22% / cover no-repeat;
  box-shadow:
    0 10px 26px rgba(0, 0, 20, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.2);
}
.screen:has(.modeStudio[onclick^='launchGame(']) .categoryHero .bigCat > * {
  display: none;
}

/* Accueil : île-arène de la Survie */
.heroMode .heroBg {
  width: 78%;
  background-image:
    linear-gradient(90deg, rgba(10, 11, 43, 0.92), rgba(10, 11, 43, 0) 34%), url('assets/art/home/survie-arena.webp');
  background-size:
    auto,
    auto 86%;
  background-position:
    center,
    left 42% center;
}
.heroShield {
  display: none;
}

/* Accueil : icônes des modes */
.modeTile .modeIc {
  filter: none;
  background: none;
}
.modeTile[onclick^='jouteCreate'] .modeIc,
.modeTile[onclick="selectMode('classic')"] .modeIc,
.modeTile[onclick="selectMode('blitz')"] .modeIc {
  width: 62px !important;
  height: 62px !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 20, 0.5));
}
.modeTile[onclick^='jouteCreate'] .modeIc {
  background-image: url('assets/art/home/duel.webp');
}
.modeTile[onclick="selectMode('classic')"] .modeIc {
  background-image: url('assets/art/home/classique.webp');
}
.modeTile[onclick="selectMode('blitz')"] .modeIc {
  background-image: url('assets/art/home/blitz.webp');
}
.modeTile[onclick^='jouteCreate'] .modeIc > *,
.modeTile[onclick="selectMode('classic')"] .modeIc > *,
.modeTile[onclick="selectMode('blitz')"] .modeIc > * {
  display: none;
}

/* Écran Jouer et fiche catégorie : icônes Classique / Blitz */
.modeStudio[onclick="selectMode('classic')"] .modeIcon,
.modeStudio[onclick*="'classic','play'"] .modeIcon {
  background: url('assets/art/home/classique.webp') center/contain no-repeat;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 20, 0.5));
}
.modeStudio[onclick="selectMode('blitz')"] .modeIcon,
.modeStudio[onclick*="'blitz','play'"] .modeIcon {
  background: url('assets/art/home/blitz.webp') center/contain no-repeat;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 20, 0.5));
}
.modeStudio[onclick="selectMode('classic')"] .modeIcon > *,
.modeStudio[onclick*="'classic','play'"] .modeIcon > *,
.modeStudio[onclick="selectMode('blitz')"] .modeIcon > *,
.modeStudio[onclick*="'blitz','play'"] .modeIcon > * {
  display: none;
}

/* Défi du jour */
.dailyBand .bandIc {
  width: 52px;
  height: 52px;
  background: url('assets/art/home/defi-du-jour.webp') center/contain no-repeat !important;
  box-shadow: none;
}
.dailyBand .bandIc > * {
  display: none;
}
.dailyCard {
  background-image: url('assets/art/home/defi-du-jour.webp'), var(--panel);
  background-repeat: no-repeat;
  background-size:
    84px auto,
    auto;
  background-position:
    right 42px center,
    center;
}

/* Cadeau du jour : flamme + cadeau */
.giftFlame {
  font-size: 0 !important;
  gap: 4px;
}
.giftFlame:before {
  content: '';
  width: 20px;
  height: 26px;
  background: url('assets/art/home/flamme.webp') center/contain no-repeat;
}
.giftFlame b {
  font-size: 14px !important;
  color: #ffb35c;
}
.giftBar,
.giftBar.ready {
  background-image:
    url('assets/art/home/cadeau.webp'),
    linear-gradient(90deg, rgba(37, 27, 57, 0.97), rgba(39, 25, 65, 0.84), rgba(18, 12, 38, 0.7)) !important;
  background-repeat: no-repeat !important;
  background-size:
    62px auto,
    auto !important;
  background-position:
    right 118px center,
    center !important;
}

/* Pièces et gemmes : en-tête du jeu */
.wallet .wCoin .wCurrencyIcon,
.wallet .wGem .wCurrencyIcon {
  width: 22px;
  height: 22px;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}
.wallet .wCoin .wCurrencyIcon {
  background-image: url('assets/art/shop/piece.webp') !important;
}
.wallet .wGem .wCurrencyIcon {
  background-image: url('assets/art/shop/gemme.webp') !important;
}
.wallet .wCurrencyIcon > * {
  display: none !important;
}

/* En-tête : plus de débordement sur mobile */
.brandBtn {
  min-width: 0;
  overflow: hidden;
}
.brandBtn .brandText {
  min-width: 0;
}
.brandBtn .brandText b,
.brandBtn .brandText small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
@media (max-width: 520px) {
  .profileChip > span:not(.avatarMini) {
    display: none;
  }
}
@media (max-width: 420px) {
  .brandBtn .brandText small {
    display: none;
  }
}

/* Boutique */
.qa-wallet button:nth-child(1) > svg,
.qa-wallet button:nth-child(2) > svg {
  display: none;
}
.qa-wallet button:nth-child(1):before,
.qa-wallet button:nth-child(2):before {
  content: '';
  width: 20px;
  height: 20px;
  flex: none;
  background: url('assets/art/shop/piece.webp') center/contain no-repeat;
}
.qa-wallet button:nth-child(2):before {
  background-image: url('assets/art/shop/gemme.webp');
}
.qa-pass-bg > * {
  display: none;
}
.qa-pass-bg {
  background: url('assets/art/shop/pass-couronne.webp') right -6px center/auto 104% no-repeat !important;
  opacity: 1 !important;
}
.qa-chest-card[data-open='chest_standard'] .qa-chest-art,
.qa-chest-card[data-open='chest_rare'] .qa-chest-art,
.qa-chest-card[data-open='chest_legendary'] .qa-chest-art,
.qa-money-card[data-open='coins_5000'] .qa-money-art,
.qa-money-card[data-open='coins_25000'] .qa-money-art,
.qa-money-card[data-open='gems_1200'] .qa-money-art {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 20, 0.55));
}
.qa-chest-card[data-open='chest_standard'] .qa-chest-art {
  background-image: url('assets/art/shop/coffre-standard.webp');
}
.qa-chest-card[data-open='chest_rare'] .qa-chest-art {
  background-image: url('assets/art/shop/coffre-rare.webp');
}
.qa-chest-card[data-open='chest_legendary'] .qa-chest-art {
  background-image: url('assets/art/shop/coffre-legendaire.webp');
}
.qa-money-card[data-open='coins_5000'] .qa-money-art {
  background-image: url('assets/art/shop/pieces-5000.webp');
}
.qa-money-card[data-open='coins_25000'] .qa-money-art {
  background-image: url('assets/art/shop/pieces-25000.webp');
}
.qa-money-card[data-open='gems_1200'] .qa-money-art {
  background-image: url('assets/art/shop/gemmes-1200.webp');
}
.qa-chest-card[data-open='chest_standard'] .qa-chest-art > *,
.qa-chest-card[data-open='chest_rare'] .qa-chest-art > *,
.qa-chest-card[data-open='chest_legendary'] .qa-chest-art > *,
.qa-money-card[data-open='coins_5000'] .qa-money-art > *,
.qa-money-card[data-open='coins_25000'] .qa-money-art > *,
.qa-money-card[data-open='gems_1200'] .qa-money-art > * {
  display: none;
}
.qa-chest-card[data-rarity='common'] {
  border-color: rgba(255, 190, 90, 0.7);
}
.qa-chest-card[data-rarity='rare'] {
  border-color: rgba(90, 190, 255, 0.75);
}
.qa-chest-card[data-rarity='legendary'] {
  border-color: rgba(255, 200, 93, 0.8);
}
.qa-chest-card[data-open='chest_standard'] .qa-money-price > svg,
.qa-chest-card[data-open='chest_rare'] .qa-money-price > svg,
.qa-chest-card[data-open='chest_legendary'] .qa-money-price > svg {
  display: none;
}
.qa-chest-card[data-open='chest_standard'] .qa-money-price:before,
.qa-chest-card[data-open='chest_rare'] .qa-money-price:before,
.qa-chest-card[data-open='chest_legendary'] .qa-money-price:before {
  content: '';
  width: 16px;
  height: 16px;
  flex: none;
  background: url('assets/art/shop/gemme.webp') center/contain no-repeat;
}
.qa-chest-card[data-open='chest_standard'] .qa-money-price:before {
  background-image: url('assets/art/shop/piece.webp');
}

/* V4.8 — ajustements de lisibilité mobile */
@media (max-width: 480px) {
  .catGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
  .catGrid .catTile:not(.catMore) {
    min-height: 168px !important;
  }
}
.catTile:not(.catMore) b {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: manual;
}
.catGrid .catTile:not(.catMore) b {
  font-size: 12.5px !important;
}
.catGrid .catTile:not(.catMore) small {
  font-size: 9.5px !important;
}
.giftMid {
  margin-right: 62px;
  min-width: 0;
}
.giftBar,
.giftBar.ready {
  background-size:
    54px auto,
    auto !important;
  background-position:
    right 112px center,
    center !important;
}
.dailyCard .dailyLeft {
  padding-right: 86px;
}
.heroMode .heroBg {
  background-size:
    auto,
    auto 84%;
  background-position:
    center,
    right -28px center;
}
.heroBody p {
  max-width: 62%;
}
@media (max-width: 380px) {
  .giftBar,
  .giftBar.ready {
    background-size:
      44px auto,
      auto !important;
    background-position:
      right 104px center,
      center !important;
  }
  .giftMid {
    margin-right: 48px;
  }
  .dailyCard {
    background-size:
      66px auto,
      auto;
    background-position:
      right 36px center,
      center;
  }
  .dailyCard .dailyLeft {
    padding-right: 64px;
  }
}
.qa-shop-title .qa-logo {
  display: none;
}
@media (max-width: 380px) {
  .topbar {
    gap: 5px;
  }
  .brandBtn {
    gap: 5px;
  }
  .brandBtn b {
    font-size: 15.5px;
  }
  .logoRing {
    width: 28px;
    height: 28px;
  }
  .wallet {
    gap: 3px;
  }
  .wallet .wCoin,
  .wallet .wGem {
    padding: 5px 6px;
    gap: 3px;
  }
  .wallet .wCoin .wCurrencyIcon,
  .wallet .wGem .wCurrencyIcon {
    width: 18px;
    height: 18px;
  }
  .wChest {
    width: 33px;
    height: 33px;
  }
}

/* ============================================================
   V4.9 — Avatars illustrés
   Tête dans les petits formats (en-tête, duel, amis, profil),
   personnage en pied dans le choix d'avatar.
   ============================================================ */
.avPic {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  background: radial-gradient(circle at 50% 38%, #3a2c8e, #171448 62%, #0a0b2d);
}
.avPic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
}
.avPic .avFull {
  display: none;
}
.avatarChoice .avPic .avFull,
.avatarChoices button .avPic .avFull,
.itemArt .avPic .avFull {
  display: block;
}
.avatarChoice .avPic .avHead,
.avatarChoices button .avPic .avHead,
.itemArt .avPic .avHead {
  display: none;
}
.avatarChoice .avPic,
.avatarChoices button .avPic {
  background: radial-gradient(circle at 50% 45%, rgba(124, 92, 255, 0.35), transparent 68%);
}
.avatarChoice .avPic img,
.avatarChoices button .avPic img {
  filter: drop-shadow(0 6px 10px rgba(0, 0, 20, 0.55));
}