:root {
  --bg: #130c24;
  --surface: #1b1133;
  --surface2: #241741;
  --line: #33245c;
  --text: #f6f2ff;
  --muted: #a193c4;
  --blue: #7c6bff;
  --blue2: #a78bfa;
  --violet: #b07cff;
  --gold: #ffc15e;
  --green: #4fe0b7;
  --coral: #ff6b9d;
  --pink: #ff6b9d;
  --radius: 20px;
}
* {
  box-sizing: border-box;
}
html {
  background: #0b0617;
}
body {
  margin: 0;
  background: radial-gradient(ellipse 120% 55% at 50% -8%, #4a2a7a 0, #251643 34%, #130c24 68%, #0c0718 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  -webkit-font-smoothing: antialiased;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
.hidden {
  display: none !important;
}
svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
label > button svg {
  width: 16px !important;
  height: 16px !important;
  padding: 0;
}
.fine {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.crownMark,
.onboardLogo {
  font-size: 60px;
  color: var(--gold);
  filter: drop-shadow(0 8px 25px #ffc15e45);
}
.splashTag {
  color: var(--muted);
  font-size: 13px;
  margin-top: 8px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.loading {
  position: absolute;
  bottom: 11vh;
  width: min(330px, 72vw);
  height: 5px;
  background: #241741;
  border-radius: 99px;
  overflow: hidden;
}
@keyframes load {
  to {
    width: 100%;
  }
}
#app {
  max-width: 560px;
  min-height: 100vh;
  margin: auto;
  padding: 16px 14px 96px;
}
.screen {
  padding-top: 10px;
}
.brandBtn,
.profileChip {
  border: 0;
  background: none;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
}
.profileChip {
  background: #22163f;
  border: 1px solid #33245c;
  border-radius: 14px;
  padding: 6px 9px;
}
.profileChip span:last-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.profileChip b {
  font-size: 11px;
}
.profileChip small {
  font-size: 9px;
  color: var(--muted);
}
.avatarMini {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: linear-gradient(135deg, #7c6bff, #b07cff);
  font-weight: 900;
}
.eyebrow {
  display: block;
  color: #a99bff;
  font-size: 10px;
  letter-spacing: 0.2px;
  font-weight: 900;
  margin-bottom: 7px;
}
.pageIntro h1,
.resultHero h1,
.eventLanding h1 {
  font-size: 31px;
  line-height: 1.02;
  letter-spacing: -1.1px;
  margin: 0 0 10px;
}
.pageIntro p,
.eventLanding p {
  margin: 0 0 18px;
  color: #c3b6e0;
  line-height: 1.5;
  font-size: 13px;
}
.primary,
.secondary,
.ghost,
.dangerBtn,
.textBtn,
.back {
  border: 0;
  border-radius: 14px;
  padding: 12px 15px;
  font-weight: 850;
}
.primary {
  background: linear-gradient(135deg, #7c6bff, #b07cff);
  color: white;
  box-shadow: 0 8px 26px #7c6bff35;
}
.primary:disabled {
  opacity: 0.45;
}
.secondary {
  background: #261a47;
  border: 1px solid #40306f;
  color: #f3eeff;
}
.ghost {
  background: transparent;
  color: #b0a2ce;
}
.dangerBtn {
  background: #3a1830;
  color: #ffa0bd;
  border: 1px solid #7a2c50;
}
.textBtn,
.back {
  background: none;
  color: #b0a2ce;
  padding: 8px;
}
.wide {
  width: 100%;
}
.small {
  padding: 9px 12px;
  font-size: 12px;
}
.sectionHead h2,
.passCard h2,
.socialHero h2,
.adminPanel h2 {
  font-size: 19px;
  margin: 0;
  letter-spacing: -0.4px;
}
.quest {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 11px;
  align-items: center;
  padding: 13px;
  background: linear-gradient(180deg, #1d1235, #180f2e);
  border: 1px solid #33245c;
  border-radius: 17px;
}
.quest.ready {
  grid-template-columns: 36px 1fr auto;
  border-color: #ffc15e;
  background: linear-gradient(180deg, #2a1f3d, #1d1430);
  box-shadow:
    0 0 0 1px #ffc15e33,
    0 6px 20px -8px #ffc15e55;
  animation: questPulse 2.2s ease-in-out infinite;
}
.quest.claimed {
  opacity: 0.5;
}
.quest.claimed .bar i {
  background: #4a3d6b;
}
@keyframes questPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px #ffc15e33,
      0 6px 20px -8px #ffc15e55;
  }
  50% {
    box-shadow:
      0 0 0 1px #ffc15e66,
      0 6px 26px -6px #ffc15e88;
  }
}
.questIcon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #2d1e56;
  color: #a99bff;
  font-weight: 950;
}
.quest.ready .questIcon {
  background: #ffc15e;
  color: #2a1a05;
}
.quest.claimed .questIcon {
  background: #261b45;
  color: #6f63a0;
}
.questClaim {
  padding: 10px 14px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(160deg, #ffd483, #f0a93a);
  color: #2a1a05;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.questClaim:active {
  transform: scale(0.95);
}
.headPill {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #ffc15e;
  color: #2a1a05;
  font-size: 10px;
  font-weight: 900;
  font-style: normal;
  vertical-align: middle;
}
.quest b {
  display: block;
  font-size: 12px;
}
.quest small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin: 4px 0 7px;
}
.bar {
  height: 6px;
  background: #241741;
  border-radius: 99px;
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #7c6bff, #b07cff);
  border-radius: 99px;
}
.passCard,
.socialHero {
  margin-top: 20px;
  border-radius: 22px;
  padding: 19px;
  border: 1px solid #3b2b69;
  background: linear-gradient(135deg, #241741, #180f2e);
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 16px;
  align-items: center;
}
.passCard p,
.socialHero p {
  font-size: 11px;
  color: var(--muted);
  margin: 6px 0 0;
}
.passProg button {
  width: 100%;
  margin-top: 10px;
  border: 0;
  background: #2d1e56;
  color: white;
  border-radius: 12px;
  padding: 9px;
  font-size: 11px;
  font-weight: 800;
}
.catStack {
  display: grid;
  gap: 9px;
}
.catSwatch {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: var(--cat);
  font-size: 22px;
  box-shadow: inset 0 0 0 1px #ffffff15;
}
.chev {
  font-size: 24px;
  color: #7b6aa4;
}
.pageIntro {
  padding: 18px 4px 8px;
}
.modeGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.modeStudio {
  border: 1px solid #352761;
  background: linear-gradient(180deg, #22163f, #180f2e);
  color: white;
  border-radius: 16px;
  padding: 12px 8px;
  text-align: center;
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.modeStudio .chev {
  display: none;
}
.modeIcon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #b6a8ff;
}
.modeIcon svg {
  width: 26px;
  height: 26px;
}
.modeStudio b {
  display: block;
  font-size: 12.5px;
  margin-top: 1px;
}
.modeStudio small {
  display: block;
  color: var(--muted);
  font-size: 9.5px;
  margin-top: 1px;
  line-height: 1.25;
}
.pickGrid {
  display: grid;
  gap: 9px;
}
.pickCat {
  border: 1px solid #352761;
  background: #1b1133;
  color: white;
  border-radius: 17px;
  padding: 10px;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 11px;
  align-items: center;
  text-align: left;
}
.pickCat > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
}
.pickCat b {
  font-size: 12px;
}
.pickCat small {
  font-size: 9px;
  color: var(--muted);
}
.categoryHero h1 {
  margin: 2px 0 5px;
  font-size: 26px;
}
.categoryHero p {
  margin: 0;
  color: #e4dcf7;
  font-size: 11px;
}
/* Le jeu masque la nav du bas (NAV.classList.add('hidden')) mais héritait
   quand même du padding de #app pensé pour cette nav (96px en bas) en plus
   de sa propre hauteur plein écran — ce qui forçait un scroll fantôme sur
   tous les écrans de question, même quand le contenu tenait dans l'écran.
   Le JS pose désormais body.in-game pendant une partie/duel : on retire
   alors tout le padding de #app pour laisser .gameScreen occuper l'écran
   exactement (dvh = vraie hauteur visible sur mobile, barre d'adresse
   incluse), puis on empile le contenu en colonne flex pour que tout rentre
   sans avoir à scroller. */
body.in-game #app {
  padding: 0;
  max-width: none;
  margin: 0;
}
.gameScreen {
  height: 100dvh;
  padding: max(14px, env(safe-area-inset-top)) 14px max(20px, env(safe-area-inset-bottom));
  background: radial-gradient(circle at 50% -10%, #2d1e56, #130c24 45%);
  display: flex;
  flex-direction: column;
}
.gameTop > button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 12px;
  background: #22163f;
  color: #bcafdc;
  font-size: 24px;
}
.gameStat small {
  display: block;
  color: var(--muted);
  font-size: 9px;
}
.gameStat b {
  font-size: 18px;
}
.gameCount {
  font-size: 12px;
  font-weight: 850;
  color: #a193c4;
}
.timerBar {
  height: 5px;
  background: #241741;
  margin: 12px 0 18px;
  border-radius: 99px;
  overflow: hidden;
  flex: none;
}
.timerBar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #4fe0b7, #f4c765, #ff6b9d);
  transition: width 0.1s linear;
}
.gameBody {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.gameBody::-webkit-scrollbar {
  display: none;
}
.s1 {
  width: 90px;
  height: 90px;
}
.s2 {
  width: 160px;
  height: 160px;
  right: -35px;
  top: -55px;
  background: #ffffff08;
}
.questionVisual small {
  position: relative;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.6px;
}
.questionTitle {
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.7px;
  margin: 4px 0 18px;
  flex: none;
}
.answers {
  display: grid;
  gap: 9px;
  flex: none;
}
.answer {
  position: relative;
  border: 1px solid #3d2c6b;
  background: linear-gradient(180deg, #22163f, #1b1133);
  color: white;
  border-radius: 16px;
  padding: 14px 15px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 700;
  font-size: 13px;
  min-height: 55px;
}
.foeBadge {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #1b1133;
  box-shadow: 0 0 0 2px #1b1133;
}
.foeBadge.good {
  box-shadow: 0 0 0 2px #4fe0b7;
}
.foeBadge.bad {
  box-shadow: 0 0 0 2px #ff6b9d;
}
.foeBadge svg,
.foeBadge img {
  width: 100%;
  height: 100%;
  display: block;
}
.foeTimeout {
  color: #ffc15e;
  font-size: 11px;
  font-weight: 800;
  margin-top: 6px;
}
.answer span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: #2d1e56;
  color: #a193c4;
  font-size: 10px;
  font-weight: 950;
}
.answer.correct {
  background: #0f3b33;
  border-color: #4fe0b7;
}
.answer.wrong {
  background: #3e1a30;
  border-color: #e0507f;
}
.answerFeedback {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 14px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  pointer-events: none;
  animation: feedbackUp 0.22s ease;
}
.answerFeedback > div {
  pointer-events: auto;
  width: min(520px, 100%);
  border-radius: 20px;
  padding: 15px;
  box-shadow: 0 15px 50px #0008;
  border: 1px solid #ffffff16;
  background: #180f2e;
}
@keyframes feedbackUp {
  from {
    transform: translateY(16px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.answerFeedback.good > div {
  background: linear-gradient(135deg, #12372f, #12372f);
}
.answerFeedback.bad > div {
  background: linear-gradient(135deg, #43192f, #1d1235);
}
.feedbackIcon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff10;
  margin-right: 7px;
}
.answerFeedback p {
  font-size: 11px;
  line-height: 1.45;
  color: #c3b6e0;
  margin: 7px 0;
}
.answerFeedback strong {
  color: var(--gold);
}
.resultHero {
  text-align: center;
  padding: 28px 16px 20px;
  border-radius: 28px;
  border: 1px solid #40306f;
  background: radial-gradient(circle at 50% 20%, #7c6bff33, transparent 35%), #1b1133;
}
.resultHero.win {
  box-shadow: inset 0 0 70px #ffc15e0a;
}
.resultMark {
  font-size: 58px;
  color: var(--gold);
  margin: 8px;
}
.resultHero h1 {
  font-size: 34px;
  margin: 0;
}
.resultHero p {
  color: var(--muted);
  font-size: 11px;
}
.bigScore {
  font-size: 56px;
  font-weight: 950;
  letter-spacing: -2px;
}
.rewardStrip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0;
}
.rewardStrip > div {
  background: #1e1338;
  border: 1px solid #33245c;
  border-radius: 16px;
  padding: 13px;
  text-align: center;
}
.rewardStrip small {
  display: block;
  color: var(--muted);
  font-size: 9px;
}
.rewardStrip b {
  font-size: 14px;
}
.resultProgress {
  background: #1b1133;
  border: 1px solid #33245c;
  border-radius: 16px;
  padding: 14px;
}
.resultProgress span {
  font-size: 11px;
  font-weight: 800;
}
.resultProgress small {
  font-size: 9px;
  color: var(--muted);
}
.duelResult {
  margin-top: 12px;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, #33245c, #241741);
  border: 1px solid #5b44a8;
}
.duelResult h2 {
  font-size: 15px;
  margin: 4px 0 12px;
}
.duelResult p {
  font-size: 11px;
  color: #c3b6e0;
  margin: 0 0 12px;
}
.resultActions {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 9px;
  margin-top: 12px;
}
.resultActions .ghost {
  grid-column: 1/-1;
}
.dailyGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 14px 0;
}
.day {
  padding: 10px 5px;
  border-radius: 13px;
  background: #201540;
  border: 1px solid #352761;
  text-align: center;
}
.day.today {
  border-color: #a78bfa;
  box-shadow: 0 0 0 2px #8b78ff22;
}
.day small {
  display: block;
  color: var(--muted);
  font-size: 9px;
}
.day b {
  font-size: 10px;
}
.chestOpen {
  text-align: center;
}
.chestIcon {
  font-size: 72px;
  color: var(--gold);
  filter: drop-shadow(0 10px 30px #ffc15e44);
  margin: 15px;
}
.seasonRoad {
  display: grid;
  gap: 8px;
}
.seasonNode > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #2d1e56;
  font-weight: 950;
}
.seasonNode.done > span {
  background: #0f3b33;
  color: #4fe0b7;
}
.seasonNode b {
  font-size: 12px;
}
.seasonNode small {
  display: block;
  font-size: 9px;
  color: var(--muted);
}
.seasonNode button {
  border: 0;
  background: none;
  color: #4fe0b7;
}
.socialActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 10px;
}
.socialActions button {
  border: 1px solid #352761;
  background: #1e1338;
  color: white;
  border-radius: 16px;
  padding: 14px;
  text-align: left;
}
.socialActions svg {
  color: #a99bff;
}
.socialActions b {
  display: block;
  margin: 9px 0 3px;
  font-size: 12px;
}
.socialActions small {
  font-size: 9px;
  color: var(--muted);
}
.leagueBadge {
  display: grid;
  place-items: center;
  justify-self: end;
  width: 74px;
  height: 74px;
  border: 2px solid #ffc15e;
  border-radius: 24px;
  transform: rotate(45deg);
  font-size: 30px;
  font-weight: 950;
  color: var(--gold);
  background: #2a1f2e;
}
.leagueBadge::first-letter {
  transform: rotate(-45deg);
}
.leaderList {
  display: grid;
  gap: 7px;
}
.leader {
  display: grid;
  grid-template-columns: 28px 34px 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 11px;
  background: #1b1133;
  border: 1px solid #302256;
  border-radius: 15px;
}
.rank {
  color: #a193c4;
  font-size: 11px;
  font-weight: 900;
}
.leader b {
  font-size: 11px;
}
.leader small {
  display: block;
  font-size: 9px;
  color: var(--muted);
}
.leader strong {
  font-size: 11px;
}
.shopGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.shopItem {
  position: relative;
  padding: 13px;
  border-radius: 19px;
  background: #1e1338;
  border: 1px solid #33245c;
  overflow: hidden;
}
.itemArt {
  height: 110px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 40% 30%, #a78bfa88, #2d1e56 55%, #1d1235);
  font-size: 44px;
  font-weight: 950;
}
.rarity {
  display: inline-block;
  margin-top: 10px;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.8px;
  color: #a193c4;
}
.shopItem h3 {
  font-size: 13px;
  margin: 4px 0;
}
.shopItem small {
  font-size: 9px;
  color: var(--muted);
}
.shopItem button {
  width: 100%;
  border: 0;
  border-radius: 11px;
  padding: 9px;
  margin-top: 10px;
  background: #2d1e56;
  color: white;
  font-size: 10px;
  font-weight: 850;
}
.rarity-legendaire {
  border-color: #d8ac55;
}
.rarity-epique {
  border-color: #a06fe0;
}
.profileHero {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  align-items: center;
  padding: 22px;
  background: linear-gradient(135deg, #241741, #1b1133);
  border: 1px solid #372766;
  border-radius: 24px;
}
.bigAvatar {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 28px;
  background: radial-gradient(circle at 35% 25%, #b3a4ff, #6a4fb8 45%, #2d1e56);
  font-size: 38px;
  font-weight: 950;
  box-shadow: 0 16px 35px #6a4fb833;
}
.profileHero h1 {
  font-size: 27px;
  margin: 0 0 3px;
}
.profileHero p {
  font-size: 10px;
  color: var(--muted);
  margin: 0 0 10px;
}
.profileHero small {
  font-size: 9px;
  color: var(--muted);
}
.statGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin: 9px 0;
}
.statGrid div,
.statGrid button {
  padding: 12px 6px;
  background: #1b1133;
  border: 1px solid #33245c;
  border-radius: 14px;
  text-align: center;
}
.statGrid b {
  font-size: 16px;
}
.statGrid small {
  display: block;
  font-size: 8px;
  color: var(--muted);
}
.miniMastery {
  display: grid;
  gap: 7px;
}
.miniMastery > div,
.miniMastery > button {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: #1b1133;
  border: 1px solid #33245c;
  border-radius: 14px;
}
.miniMastery b {
  font-size: 11px;
}
.miniMastery small {
  font-size: 8px;
  color: var(--muted);
}
.profileActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.profileActions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #372766;
  background: #1e1338;
  color: white;
  border-radius: 14px;
  padding: 12px;
  font-size: 10px;
  font-weight: 800;
}
.settingsCard,
.adminPanel {
  padding: 15px;
  border-radius: 19px;
  background: #1b1133;
  border: 1px solid #33245c;
  margin-top: 10px;
}
.settingsCard label,
.adminPanel label,
.modalCard label {
  display: block;
  font-size: 10px;
  color: #bcafdc;
  margin-top: 10px;
}
.toggleRow,
.toggleAdmin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #291c4b;
  font-size: 11px;
}
.toggle {
  width: 45px;
  height: 25px;
  border: 0;
  border-radius: 99px;
  background: #2d1e56;
  padding: 3px;
}
.toggle i {
  display: block;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #a193c4;
  transition: 0.2s;
}
.toggle.on {
  background: #7c6bff;
}
.toggle.on i {
  transform: translateX(20px);
  background: white;
}
.field {
  width: 100%;
  border: 1px solid #3d2c6b;
  background: #120b22;
  color: white;
  border-radius: 12px;
  padding: 11px 12px;
  margin-top: 6px;
  outline: none;
}
.field:focus {
  border-color: #8b78ff;
}
.bigField {
  font-size: 16px;
  padding: 15px;
}
.onboarding {
  max-width: 420px;
  margin: 12vh auto 0;
  text-align: center;
}
.onboarding h1 {
  font-size: 34px;
  line-height: 1.02;
  letter-spacing: -1.2px;
}
.onboarding p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.avatarChoices {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 13px 0;
}
.avatarChoices button {
  aspect-ratio: 1/1;
  height: auto;
  padding: 6px;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid #3d2c6b;
  background: #1b1133;
  color: white;
  border-radius: 18px;
  font-weight: 950;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.avatarChoices button svg {
  width: 100%;
  height: 100%;
  display: block;
}
.avatarChoices button.active {
  border-color: #a78bfa;
  box-shadow: 0 0 0 2px #8b78ff33;
  background: #2d1e56;
}
.adminIntro {
  padding-bottom: 0;
}
.adminTabs {
  display: flex;
  gap: 7px;
  overflow: auto;
  padding: 8px 0 4px;
  scrollbar-width: none;
}
.adminTabs button {
  white-space: nowrap;
  border: 1px solid #372766;
  background: #1b1133;
  color: #a193c4;
  border-radius: 12px;
  padding: 9px 11px;
  font-size: 9px;
  font-weight: 850;
}
.adminTabs button.active {
  background: #33245c;
  color: white;
  border-color: #6a4fb8;
}
.adminStats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 7px;
  margin-top: 10px;
}
.adminStats div {
  padding: 13px 6px;
  border-radius: 14px;
  background: #22163f;
  border: 1px solid #352761;
  text-align: center;
}
.adminStats b {
  font-size: 17px;
}
.adminStats small {
  display: block;
  font-size: 8px;
  color: var(--muted);
}
.panelHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.metric {
  display: grid;
  grid-template-columns: 120px 1fr 28px;
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  font-size: 10px;
}
.metric b {
  text-align: right;
}
.alertLine {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid #2c1e50;
}
.alertLine b {
  font-size: 10px;
}
.alertLine span {
  font-size: 9px;
  color: var(--muted);
  text-align: right;
}
.adminToolbar {
  display: grid;
  grid-template-columns: 1fr 140px auto;
  gap: 7px;
  margin-top: 10px;
}
.searchBox {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #120b22;
  border: 1px solid #3d2c6b;
  border-radius: 12px;
  padding: 0 9px;
}
.searchBox svg {
  width: 16px;
}
.searchBox input {
  width: 100%;
  border: 0;
  background: transparent;
  color: white;
  outline: none;
  font-size: 10px;
}
.compact {
  margin: 0;
}
.questionTable {
  display: grid;
  gap: 6px;
  margin-top: 9px;
}
.qRow {
  display: grid;
  grid-template-columns: 8px 1fr auto 34px;
  gap: 9px;
  align-items: center;
  padding: 10px;
  background: #1b1133;
  border: 1px solid #302256;
  border-radius: 13px;
}
.qStatus {
  width: 7px;
  height: 32px;
  border-radius: 99px;
  background: #7a3a56;
}
.qStatus.ok {
  background: #2f9d78;
}
.qMain b {
  display: block;
  font-size: 10px;
  line-height: 1.35;
}
.qMain small {
  display: block;
  font-size: 8px;
  color: var(--muted);
  margin-top: 4px;
}
.qRow button,
.categoryAdminRow button,
.shopAdminRow button {
  border: 0;
  background: #291c4b;
  color: #bcafdc;
  border-radius: 9px;
  padding: 7px;
  font-size: 8px;
}
.qRow button svg {
  width: 14px;
  height: 14px;
}
.previewAnswers {
  display: grid;
  gap: 6px;
  margin: 12px 0;
}
.previewAnswers div {
  padding: 9px;
  border-radius: 10px;
  background: #17102c;
  border: 1px solid #372766;
  font-size: 10px;
}
.previewAnswers .good {
  border-color: #4fe0b7;
  background: #0f3b33;
}
.twoCols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.categoryAdminRow,
.shopAdminRow {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #2c1e50;
}
.categoryAdminRow .catSwatch {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}
.categoryAdminRow b,
.shopAdminRow b {
  display: block;
  font-size: 10px;
}
.categoryAdminRow small,
.shopAdminRow small {
  display: block;
  font-size: 8px;
  color: var(--muted);
}
.shopAdminRow {
  grid-template-columns: 44px 1fr auto auto;
}
.smallArt {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 17px;
}
.toggleAdmin b {
  display: block;
  font-size: 10px;
}
.toggleAdmin small {
  display: block;
  font-size: 8px;
  color: var(--muted);
}
.backupActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.backupActions button,
.fileBtn {
  display: flex;
  gap: 7px;
  align-items: center;
}
.fileBtn input {
  display: none;
}
.eventLanding {
  padding: 34px 20px;
  border-radius: 28px;
  background: radial-gradient(circle at 82% 15%, #ffc15e4a, transparent 26%), linear-gradient(135deg, #3a2148, #1d1235);
  border: 1px solid #5b3d70;
}
.eventReward {
  padding: 14px;
  border: 1px solid #ffc15e33;
  background: #2a1f2e;
  border-radius: 15px;
  margin: 18px 0;
}
.eventReward span {
  display: block;
  color: var(--muted);
  font-size: 9px;
}
.eventReward b {
  font-size: 12px;
}
.modalBackdrop {
  position: fixed;
  z-index: 100;
  inset: 0;
  background: #02060bd9;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 10px;
  backdrop-filter: blur(8px);
}
.modalCard {
  position: relative;
  width: min(520px, 100%);
  max-height: 88vh;
  overflow: auto;
  background: linear-gradient(180deg, #241741, #120b22);
  border: 1px solid #40306f;
  border-radius: 25px;
  padding: 22px;
  box-shadow: 0 -20px 80px #0009;
}
.modalCard h2 {
  font-size: 22px;
  margin: 4px 0 8px;
}
.modalCard p {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}
.modalClose {
  position: absolute;
  right: 14px;
  top: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 12px;
  background: #2c1e50;
  color: #bcafdc;
  font-size: 20px;
}
.modalActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
#toast {
  position: fixed;
  z-index: 200;
  left: 50%;
  bottom: 88px;
  transform: translate(-50%, 20px);
  padding: 10px 14px;
  border-radius: 13px;
  background: #f3eeff;
  color: #22163f;
  font-weight: 850;
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
  box-shadow: 0 10px 40px #0007;
}
#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
nav {
  position: fixed;
  z-index: 50;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 100%);
  height: 72px;
  padding-bottom: max(5px, env(safe-area-inset-bottom));
  background: #120b22f2;
  border-top: 1px solid #2e2154;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  backdrop-filter: blur(14px);
}
nav button {
  border: 0;
  background: none;
  color: #7b6aa4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
nav button.active {
  color: #a99bff;
}
nav svg {
  width: 19px;
  height: 19px;
}
nav small {
  font-size: 8px;
  font-weight: 750;
}
@media (max-width: 400px) {
  .heroStudio {
    grid-template-columns: 1fr;
  }
  .heroOrb {
    display: none;
  }
  .wallet {
    display: none;
  }
  .adminToolbar {
    grid-template-columns: 1fr;
  }
  .questionVisual {
    height: 145px;
  }
  .questionTitle {
    font-size: 22px;
  }
  .statGrid {
    grid-template-columns: 1fr 1fr;
  }
  .adminStats {
    grid-template-columns: 1fr 1fr;
  }
  .metric {
    grid-template-columns: 92px 1fr 26px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
.liveLobby {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
}
.liveSeat {
  padding: 18px 12px;
  border-radius: 20px;
  background: linear-gradient(180deg, #22163f, #180f2e);
  border: 1px solid #352761;
  text-align: center;
}
.liveSeat.waiting {
  border-style: dashed;
  opacity: 0.6;
}
.liveSeat.filled {
  border-color: #6a4fb8;
}
.liveSeat.winner {
  border-color: var(--gold);
  box-shadow:
    0 0 0 2px #ffc15e33,
    inset 0 0 40px #ffc15e0d;
}
.liveAvatar {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 10px;
  border-radius: 18px;
  background: radial-gradient(circle at 35% 25%, #b3a4ff, #6a4fb8 45%, #2d1e56);
  font-size: 22px;
  font-weight: 950;
}
.liveSeat b {
  display: block;
  font-size: 12px;
}
.liveSeat small {
  display: block;
  font-size: 9px;
  color: var(--muted);
  margin-top: 3px;
}
.liveSeat strong {
  display: block;
  font-size: 26px;
  margin-top: 8px;
  letter-spacing: -1px;
}
.liveVs {
  font-size: 13px;
  font-weight: 950;
  color: #7b6aa4;
  letter-spacing: 1px;
}
.liveCountdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  height: 100dvh;
  background: radial-gradient(circle at 50% 42%, #241a44, #130c24 70%);
}
.liveCountdownRing {
  display: grid;
  place-items: center;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #3a2a68, #1b1236 70%);
  border: 2px solid #6a4fb855;
  box-shadow:
    0 0 0 10px #6a4fb814,
    0 0 60px #6a4fb833;
}
.liveCountdown b {
  font-size: 76px;
  font-weight: 950;
  letter-spacing: -2px;
  color: var(--gold);
}
.liveCountdown b.pop {
  animation: popCd 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.liveCountdown b.go {
  color: #4fe0b7;
  font-size: 46px;
  letter-spacing: 2px;
}
.liveCountdown small {
  color: var(--muted);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-size: 11px;
}

@keyframes pop {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes popCd {
  0% {
    transform: scale(0.55);
    opacity: 0;
  }
  55% {
    transform: scale(1.08);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.liveBoard {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: #1a1030;
  border: 1px solid #33245c;
}
.liveSide {
  display: flex;
  align-items: center;
  gap: 9px;
}
.liveSide.foe {
  justify-content: flex-end;
  text-align: right;
}
.liveSide b {
  display: block;
  font-size: 18px;
  line-height: 1;
}
.liveSide small {
  display: block;
  font-size: 9px;
  color: var(--muted);
}
.liveGap {
  text-align: center;
  font-size: 12px;
  font-weight: 900;
  color: #a193c4;
}
.liveGap.up {
  color: #4fe0b7;
}
.liveGap.down {
  color: #ff6b9d;
}
.liveGap small {
  display: block;
  font-size: 9px;
  color: var(--muted);
  font-weight: 700;
  margin-top: 2px;
}
.avatarMini.pulse {
  animation: pulseFoe 0.7s ease infinite;
  box-shadow: 0 0 0 0 #ffc15e;
}

@keyframes pulseFoe {
  0% {
    box-shadow: 0 0 0 0 #ffc15e77;
  }
  70% {
    box-shadow: 0 0 0 9px #ffc15e00;
  }
  100% {
    box-shadow: 0 0 0 0 #ffc15e00;
  }
}
.liveAlert {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  text-align: center;
  font-size: 9px;
  font-weight: 850;
  color: #ffc15e;
}
.liveStatusDot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  font-size: 8px;
  font-weight: 950;
  vertical-align: middle;
  margin: 0 2px;
}
.liveStatusDot.done {
  background: #4fe0b7;
  color: #0d2e26;
}
.liveStatusDot.wait {
  background: #3a2e5c;
  border: 1px solid #59498c;
}
.liveTimeline {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
}
.tlRow {
  display: flex;
  gap: 3px;
}
.tlDot {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: #2d2050;
}
.tlDot.good {
  background: #4fe0b7;
}
.tlDot.bad {
  background: #ff6b9d;
}
.tlDot.current {
  background: #ffc15e;
  animation: tlPulse 1.1s ease-in-out infinite;
}
@keyframes tlPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.liveWait {
  margin-top: 8px !important;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}
.liveFaceoff {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
}
.recapList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.recapRow {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #1a1030;
  border: 1px solid #2c1f52;
}
.recapQ small {
  display: block;
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 2px;
}
.recapQ p {
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
}
.recapCol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.recapCol small {
  font-size: 9px;
  color: var(--muted);
}
.recapIcon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 950;
}
.recapIcon.good {
  background: #4fe0b71a;
  color: #4fe0b7;
  border: 1px solid #4fe0b755;
}
.recapIcon.bad {
  background: #ff6b9d1a;
  color: #ff6b9d;
  border: 1px solid #ff6b9d55;
}
.recapIcon.none {
  background: #3a2e5c;
  color: var(--muted);
}
.jouteCatGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 14px;
  max-height: 56vh;
  overflow-y: auto;
  padding-right: 2px;
}
.jouteCatTile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: 16px;
  padding: 16px 8px;
  min-height: 84px;
  color: #fff;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 4px 14px #0006;
  transition: transform 0.12s ease;
}
.jouteCatTile:active {
  transform: scale(0.96);
}
.jouteCatIcon {
  font-size: 22px;
  line-height: 1;
}
.jouteCatName {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
  text-shadow: 0 1px 3px #0007;
}
.avatarMini,
.bigAvatar,
.liveAvatar,
.itemArt {
  overflow: hidden;
  padding: 0;
}
.avatarMini > svg,
.bigAvatar > svg,
.liveAvatar > svg,
.itemArt > svg {
  width: 100%;
  height: 100%;
  display: block;
}
.catDot {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  font-size: 15px;
}
.emptyState {
  padding: 28px 18px;
  text-align: center;
  border-radius: 20px;
  background: #1b1133;
  border: 1px dashed #40306f;
}
.emptyState b {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
}
.emptyState p {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 14px;
  line-height: 1.5;
}
.softLabel {
  display: block;
  font-size: 11px;
  color: #a99bff;
  margin-bottom: 4px;
}
.shieldArt {
  background: radial-gradient(circle at 40% 30%, #134e4a, #062822) !important;
  padding: 18px !important;
}
.shieldCount {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 10px;
  vertical-align: middle;
}
.shieldCount svg {
  width: 16px !important;
  height: 16px !important;
  display: inline-block;
  flex: none;
}
.shieldCount b {
  font-size: 12px;
  color: #5eead4;
}
.shieldModal {
  text-align: center;
}
.shieldBig {
  width: 84px;
  height: 84px;
  margin: 4px auto 14px;
  animation: shieldIn 0.35s ease;
}

@keyframes shieldIn {
  from {
    transform: scale(0.6) rotate(-12deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.shieldModal .ghost {
  margin-top: 6px;
}
.chestLoot {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 12px 0 4px;
  flex-wrap: wrap;
}
.chestLoot span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  background: #22163f;
  border: 1px solid #33245c;
  border-radius: 99px;
  padding: 8px 13px;
}
.chestLoot svg {
  width: 15px;
  height: 15px;
}
.comboTag {
  justify-self: end;
  align-self: center;
  font-weight: 950;
  font-size: 15px;
  padding: 5px 11px;
  border-radius: 99px;
  background: linear-gradient(135deg, #ffc15e, #f0913a);
  color: #2a1806;
  animation: comboPop 0.3s ease;
}
.comboTag.x15 {
  background: linear-gradient(135deg, #4fe0b7, #7c6bff);
  color: #2a1806;
}
.comboTag.x20 {
  background: linear-gradient(135deg, #fb7185, #c026d3);
  color: #fff;
  box-shadow: 0 0 18px #e0499955;
}

@keyframes comboPop {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.multTag {
  font-style: normal;
  font-size: 10px;
  font-weight: 900;
  color: #ffc15e;
  margin-left: 6px;
}
.gemWin b {
  color: #a78bfa;
}
.perfectBanner {
  margin: 10px 0;
  padding: 12px;
  border-radius: 14px;
  text-align: center;
  font-size: 12px;
  font-weight: 850;
  background: linear-gradient(135deg, #1d3b30, #2d1e56);
  border: 1px solid #3f9573;
  color: #7ee0b4;
}
.gameTop {
  display: grid;
  grid-template-columns: 36px 34px 1fr auto auto;
  gap: 10px;
  align-items: center;
  flex: none;
}
.reportBtn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #3d2c6b;
  background: #1b1133;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0.75;
  transition:
    opacity 0.15s,
    transform 0.15s;
}
.reportBtn:active {
  transform: scale(0.92);
}
.reportBtn.done {
  opacity: 1;
  background: #3d2418;
  border-color: #c9793a;
}
/* Signalement en duel : même code couleur que le 🚩 du mode solo
   (.reportBtn ci-dessus), à deux tailles selon le contexte. */
.liveReportBtn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid #3d2c6b;
  background: #1b1133;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0.7;
  transition:
    opacity 0.15s,
    transform 0.15s;
  padding: 0;
}
.liveReportBtn:active {
  transform: scale(0.92);
}
.liveReportBtn.done {
  opacity: 1;
  background: #3d2418;
  border-color: #c9793a;
}
.recapReportBtn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #3d2c6b;
  background: #1b1133;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0.6;
  transition:
    opacity 0.15s,
    transform 0.15s;
  padding: 0;
}
.recapReportBtn:active {
  transform: scale(0.92);
}
.recapReportBtn.done {
  opacity: 1;
  background: #3d2418;
  border-color: #c9793a;
  cursor: default;
}
/* Question absente de la base : on garde la colonne pour que les lignes
   du récap restent alignées, sans proposer un bouton qui ne ferait rien. */
.recapReportBtn.placeholder {
  border-color: transparent;
  background: transparent;
  cursor: default;
}
.perfectBanner.clearBanner {
  background: linear-gradient(135deg, #3d2f14, #4a1e56);
  border-color: #e0b13a;
  color: #ffd98a;
}
.statClick {
  cursor: pointer;
  transition: transform 0.12s;
}
.statClick:active {
  transform: scale(0.96);
}
.filterChip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  padding: 6px 12px;
  border-radius: 20px;
  background: #2a1b4d;
  border: 1px solid #4a3585;
  font-size: 11px;
  color: #c9b8ef;
}
.filterChip button {
  border: 0;
  background: none;
  color: #c9b8ef;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.qRow.qFlagged {
  grid-template-columns: 8px 1fr auto auto auto;
}
.seasonNode.ready {
  border-color: #ffc15e;
  box-shadow: 0 0 0 1px #ffc15e33;
}
.seasonNode.ready > span {
  background: #3d2a18;
  color: #ffc15e;
}
.claimBtn {
  border: 0;
  background: linear-gradient(135deg, #7c6bff, #b07cff);
  color: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 850;
}
.seasonNode button[disabled] {
  border: 0;
  background: #241741;
  color: #7b6aa4;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 800;
}
.seasonNode {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border-radius: 16px;
  background: #1e1338;
  border: 1px solid #33245c;
}
.themed .gameScreen,
.gameScreen.themed {
  background:
    radial-gradient(120% 60% at 50% -8%, color-mix(in srgb, var(--c1) 28%, transparent), transparent 62%),
    linear-gradient(180deg, var(--c2) 0%, #130c24 72%);
}
.themed .answer {
  border-color: color-mix(in srgb, var(--c1) 35%, #3d2c6b);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c2) 72%, #22163f), #1b1133);
}
.themed .answer span {
  background: color-mix(in srgb, var(--c1) 26%, #2d1e56);
  color: var(--c1);
}
.themed .answer.correct {
  background: #0f3b33;
  border-color: #4fe0b7;
}
.themed .answer.wrong {
  background: #3e1a30;
  border-color: #e0507f;
}
.themed .timerBar i {
  background: linear-gradient(90deg, var(--c1), #f4c765 65%, #ff6b9d);
}
.themed .gameStat b {
  color: var(--c1);
}
.themed .resultHero {
  background:
    radial-gradient(circle at 50% 15%, color-mix(in srgb, var(--c1) 30%, transparent), transparent 45%), var(--c2);
  border-color: color-mix(in srgb, var(--c1) 40%, #40306f);
}
.themed .bigScore,
.themed .resultMark {
  color: var(--c1);
}
.themed .rewardStrip > div {
  background: color-mix(in srgb, var(--c2) 55%, #1e1338);
  border-color: color-mix(in srgb, var(--c1) 24%, #33245c);
}
.questionVisual svg {
  width: 100%;
  height: 100%;
  display: block;
}
.questionVisual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.questionVisual {
  height: clamp(90px, 20dvh, 160px);
  flex: none;
  border-radius: 24px;
  background: var(--cat);
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
  display: flex;
  align-items: stretch;
  padding: 0;
}
.questionVisual:before {
  content: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, #120b22b8);
}
.walletBig {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0 4px;
}
.walletBig > div {
  background: #1e1338;
  border: 1px solid #33245c;
  border-radius: 16px;
  padding: 13px;
  text-align: center;
}
.walletBig b {
  display: block;
  font-size: 19px;
}
.walletBig small {
  font-size: 9px;
  color: var(--muted);
}
.sectionSub {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}
.frameGlyph {
  font-size: 44px;
}
.ownedBtn {
  background: #0f3b33 !important;
  color: #7ee0b4 !important;
}
.heroBg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 85% 0%, #1c7d68 0%, transparent 58%), linear-gradient(160deg, #0e3d33, #17102c 78%);
}
.heroMode:active {
  transform: scale(0.985);
}
.mixCat {
  grid-column: 1/-1;
  background: linear-gradient(135deg, #2d1e56, #180f2e);
  border-color: #5b44a8;
}
.mixDots {
  display: flex !important;
  gap: 3px;
  width: auto !important;
  height: auto !important;
  background: none !important;
  border-radius: 0 !important;
  margin-bottom: 9px;
  flex-wrap: wrap;
  max-width: 76px;
}
.mixDots i {
  width: 15px;
  height: 15px;
  border-radius: 5px;
  display: block;
}
.reviewBtn {
  width: 100%;
  margin-top: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #4b3a5e;
  background: #1d1630;
  color: #d9c8f5;
  font-size: 13px;
  font-weight: 850;
}
.reviewList {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}
.reviewCat {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 800;
}
.reviewCard h3 {
  font-size: 14px;
  line-height: 1.45;
  margin: 0 0 12px;
}
.reviewRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 11px;
  margin-bottom: 6px;
}
.reviewRow small {
  font-size: 10px;
  color: var(--muted);
  font-weight: 800;
  flex-shrink: 0;
}
.reviewRow b {
  font-size: 12.5px;
  text-align: right;
}
.reviewRow.bad {
  background: #341823;
}
.reviewRow.bad b {
  color: #f19aac;
}
.reviewRow.good {
  background: #12332a;
}
.reviewRow.good b {
  color: #7ee0b4;
}
.reviewWhy {
  font-size: 12px;
  line-height: 1.55;
  color: #b0a2ce;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid #33245c;
}
.resumeBar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  background: linear-gradient(135deg, #2a2113, #1a1a2e);
  border: 1px solid #6b5424;
  border-radius: 18px;
  padding: 14px 15px;
  margin-bottom: 14px;
}
.resumeBar b {
  display: block;
  font-size: 13px;
  color: #ffc15e;
}
.resumeBar small {
  font-size: 11px;
  color: #c3ad82;
}
.resumeBar button {
  border: 0;
  border-radius: 11px;
  padding: 10px 15px;
  font-size: 12px;
  font-weight: 850;
  background: #ffc15e;
  color: #2a1f08;
}
.resumeBar .resumeX {
  background: #3a2f16;
  color: #c3ad82;
  padding: 10px 13px;
}
.adminCount {
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
  margin: 10px 0 8px;
}
.adminPager {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.adminPager button {
  flex: 1;
  padding: 11px;
  border-radius: 12px;
  border: 1px solid #40306f;
  background: #1d1235;
  color: #cfe0f6;
  font-size: 12px;
  font-weight: 800;
}
.adminPager button[disabled] {
  opacity: 0.38;
}
.fieldHint {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 5px;
  line-height: 1.45;
}
.adminSwitch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid #2c1e50;
}
.adminSwitch:last-child {
  border-bottom: 0;
}
.adminSwitch b {
  display: block;
  font-size: 13px;
}
.adminSwitch small {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.45;
}
.sw {
  width: 46px;
  height: 27px;
  border-radius: 99px;
  border: 0;
  background: #2d1e56;
  position: relative;
  flex-shrink: 0;
}
.sw:after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #a193c4;
  transition: 0.18s;
}
.sw.on {
  background: #2f6f5b;
}
.sw.on:after {
  left: 22px;
  background: #5eead4;
}
.streakBanner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 13px;
  align-items: center;
  background: linear-gradient(135deg, #2b1a10, #1a1424);
  border: 1px solid #6b4424;
  border-radius: 20px;
  padding: 15px 16px;
  margin-bottom: 14px;
}
.streakFlame {
  font-size: 27px;
  line-height: 1;
}
.streakBanner b {
  display: block;
  font-size: 16px;
  color: #f3a862;
}
.streakBanner small {
  font-size: 11.5px;
  color: #c3a082;
}
.streakShield {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 900;
  color: #5eead4;
  background: #0f2e2a;
  border-radius: 99px;
  padding: 7px 11px;
}
.streakShield svg {
  width: 15px;
  height: 15px;
}
.dailyCard {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  text-align: left;
  background: linear-gradient(135deg, #2a2113, #161a30);
  border: 1px solid #6b5424;
  border-radius: 24px;
  color: var(--text);
  padding: 20px;
  margin: 14px 0 18px;
  cursor: pointer;
}
.dailyCard.done {
  background: linear-gradient(135deg, #16281f, #101a2c);
  border-color: #3f9573;
}
.dailyTag {
  display: inline-block;
  font-size: 10px;
  font-weight: 900;
  color: #2a1f08;
  background: #ffc15e;
  border-radius: 99px;
  padding: 5px 11px;
  margin-bottom: 9px;
}
.dailyCard.done .dailyTag {
  background: #5eead4;
  color: #07312c;
}
.dailyCard h2 {
  font-size: 23px;
  margin: 0 0 6px;
  letter-spacing: -0.4px;
}
.dailyCard p {
  font-size: 12.5px;
  color: #bda887;
  margin: 0;
  line-height: 1.45;
}
.dailyCard.done p {
  color: #8fc7ae;
}
.dailyGo {
  font-size: 30px;
  color: #ffc15e;
}
.dailyRight svg {
  width: 70px;
  height: 70px;
}
.dailyHero {
  text-align: center;
  padding: 30px 20px;
  border-radius: 26px;
  background: radial-gradient(circle at 50% 0%, #3a2d12, #111a2d 70%);
  border: 1px solid #6b5424;
}
.dailyHero h1 {
  font-size: 27px;
  margin: 14px 0 8px;
}
.dailyHero p {
  font-size: 13px;
  color: #bda887;
  line-height: 1.5;
  margin: 0 0 18px;
}
.dailyBadge {
  display: inline-block;
  font-size: 10px;
  font-weight: 900;
  color: #2a1f08;
  background: #ffc15e;
  border-radius: 99px;
  padding: 6px 13px;
}
.dailyRing {
  width: 92px;
  height: 92px;
  margin: 0 auto;
}
.gameScreen.golden {
  background:
    radial-gradient(120% 60% at 50% -8%, #6b521c, transparent 62%), linear-gradient(180deg, #2c2210, #130c24 72%) !important;
}
.golden .answer {
  border-color: #8a6c25;
}
.goldenFlag {
  text-align: center;
  font-size: 11px;
  font-weight: 900;
  color: #2a1f08;
  background: linear-gradient(90deg, #ffc15e, #ffdf8e);
  padding: 9px;
  animation: goldIn 0.4s ease;
}

@keyframes goldIn {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: none;
  }
}
.ghostBar {
  position: relative;
  height: 22px;
  border-radius: 99px;
  background: #241741;
  overflow: hidden;
  min-width: 120px;
  display: flex;
  align-items: center;
}
.ghostBar i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, #7c6bff, #b07cff);
  transition: width 0.4s ease;
}
.ghostBar span {
  position: relative;
  font-size: 9.5px;
  font-weight: 900;
  padding: 0 9px;
  white-space: nowrap;
}
.slotGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}
.slot {
  background: #1e1338;
  border: 1px solid #33245c;
  border-radius: 18px;
  padding: 16px 13px;
  text-align: center;
}
.slot.empty {
  border-style: dashed;
  color: var(--muted);
}
.slot.empty span {
  display: block;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 5px;
}
.slot.empty small {
  font-size: 10px;
}
.slot b {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}
.slot small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 11px;
}
.slot button {
  width: 100%;
  border: 0;
  border-radius: 11px;
  padding: 10px;
  font-size: 11px;
  font-weight: 850;
  background: #33245c;
  color: #cfe0f6;
}
.slot button[disabled] {
  opacity: 0.45;
}
.slot.ready {
  border-color: #ffc15e;
  box-shadow: 0 0 0 1px #ffc15e33;
}
.slot.ready button {
  background: linear-gradient(135deg, #ffc15e, #f0913a);
  color: #2a1806;
}
.slot.r-rare b {
  color: #4fe0b7;
}
.slot.r-epique b {
  color: #c4a1ff;
}
.slot.r-legendaire b {
  color: #ffc15e;
}
/* Fondu façon "carte de récompense" Clash Royale : le fond du jeu reste
   visible (flouté et assombri) au lieu d'être coupé par un simple aplat
   sombre, et la carte est encadrée (liseré doré, ruban en haut) plutôt
   qu'un rectangle nu comme avant. */
.bigMoment {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 26px;
  background: rgba(8, 6, 20, 0.62);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  opacity: 0;
  transition: opacity 0.32s ease;
}
.bigMoment.show {
  opacity: 1;
}
.bmInner {
  position: relative;
  text-align: center;
  max-width: 340px;
  width: 100%;
  box-sizing: border-box;
  padding: 34px 22px 26px;
  border-radius: 26px;
  background: linear-gradient(180deg, #241a52, #140b30);
  border: 2px solid transparent;
  background-image: linear-gradient(180deg, #241a52, #140b30), linear-gradient(155deg, #ffd98a, #a97cff 45%, #ffd98a);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow:
    0 24px 60px #05030f99,
    inset 0 1px rgba(255, 255, 255, 0.08);
  transform: scale(0.82);
  transition: transform 0.3s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.bigMoment.show .bmInner {
  transform: none;
}
.bmRibbon {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.bmKicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  color: #0f0a1e;
  background: linear-gradient(180deg, #ffe4a8, #ffc15e);
  border-radius: 99px;
  padding: 8px 18px;
  box-shadow:
    0 6px 16px #ffc15e40,
    0 0 0 3px #140b30;
}
.bmArtWrap {
  margin: 14px auto 28px;
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 10px 24px #00000066);
}
.bmArt {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bmInner h1 {
  font-size: 38px;
  line-height: 1.05;
  margin: 14px 0 10px;
  letter-spacing: -1.2px;
}
.bmInner p {
  font-size: 15px;
  color: #a9bdd8;
  margin: 0 0 18px;
}
.bmBurst {
  position: absolute;
  inset: 0;
  border-radius: 26px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #ffc15e33, transparent 58%);
  animation: burst 1.1s ease forwards;
}

@keyframes burst {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  to {
    transform: scale(1.5);
    opacity: 0;
  }
}
.bm-streak .bmKicker {
  background: linear-gradient(180deg, #ffcf9e, #f3a862);
}
.bm-chest .bmKicker {
  background: linear-gradient(180deg, #8ff5d9, #4fe0b7);
}
.bm-quest .bmKicker {
  background: linear-gradient(180deg, #ffe4a8, #ffc15e);
}
.blitzClock {
  font-size: 19px;
  font-weight: 950;
  color: #4fe0b7;
  font-variant-numeric: tabular-nums;
  padding: 5px 11px;
  border-radius: 11px;
  background: #1d1235;
  min-width: 66px;
  text-align: center;
}
.blitzClock.warn {
  color: #ffc15e;
  background: #2b2312;
}
.blitzClock.danger {
  color: #ff8fa3;
  background: #33161f;
  animation: tick 0.5s ease infinite;
}

@keyframes tick {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.09);
  }
}
.streakChip span {
  font-size: 15px;
}
.chestBtn {
  position: relative;
}
.badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 17px;
  height: 17px;
  border-radius: 99px;
  background: #7c6bff;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  font-style: normal;
  display: grid;
  place-items: center;
  padding: 0 4px;
}
.badge.ready {
  background: #ffc15e;
  color: #2a1806;
  animation: pulse 1.4s ease infinite;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.18);
  }
}
.reviewTabs {
  display: flex;
  gap: 8px;
  margin-bottom: 13px;
}
.reviewTabs button {
  flex: 1;
  padding: 11px;
  border-radius: 12px;
  border: 1px solid #40306f;
  background: #1d1235;
  color: #b0a2ce;
  font-size: 12px;
  font-weight: 850;
}
.reviewTabs button.on {
  background: #33245c;
  color: #fff;
  border-color: #6a4fb8;
}
.reviewHead {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
}
.reviewNum {
  width: 21px;
  height: 21px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
}
.reviewNum.ok {
  background: #12332a;
  color: #7ee0b4;
}
.reviewNum.ko {
  background: #341823;
  color: #f19aac;
}
.reviewCard.ok {
  border-left-color: #2f6f5b;
}
.reviewCard.ko {
  border-left-color: #8d3c52;
}
.reviewCard {
  background: #1e1338;
  border: 1px solid #33245c;
  border-left: 4px solid #40306f;
  border-image: none;
  border-radius: 16px;
  padding: 16px;
}
.dailyChrono {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 9px;
}
.dailyChrono small {
  font-size: 9px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #8fc7ae;
  font-weight: 850;
}
.dailyChrono b {
  font-size: 15px;
  font-weight: 950;
  letter-spacing: 0.5px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.dailyHero .dailyChrono {
  justify-content: center;
  margin: 16px 0 4px;
}
.dailyHero .dailyChrono b {
  font-size: 22px;
}
.claimGains {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.claimGains span {
  padding: 8px 13px;
  border-radius: 99px;
  background: #ffffff12;
  border: 1px solid #ffffff22;
  font-size: 12px;
  font-weight: 850;
}
.miniCrown {
  color: var(--gold);
  font-size: 22px;
  display: none;
}
.heroMode {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 28px;
  overflow: hidden;
  padding: 0;
  margin: 14px 0 18px;
  background: linear-gradient(135deg, #3a1f6e 0%, #2a1550 46%, #1a0f33 100%);
  cursor: pointer;
  color: var(--text);
  min-height: 212px;
  box-shadow:
    0 22px 60px #0a0518aa,
    inset 0 0 0 1px #ffffff12;
  margin-top: 4px;
}
.heroMode .heroBg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 84% 14%, #b07cff55, transparent 46%),
    radial-gradient(circle at 12% 96%, #ff6b9d33, transparent 44%);
}
.heroMode:after {
  content: '';
  position: absolute;
  right: -70px;
  top: -70px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  border: 1px solid #ffffff14;
  pointer-events: none;
}
.heroBody {
  position: relative;
  padding: 24px 22px 22px;
  max-width: 78%;
}
.heroTag {
  display: inline-flex;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 1.1px;
  color: #0f0a1e;
  background: var(--gold);
  border-radius: 99px;
  padding: 5px 10px;
  margin-bottom: 11px;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}
.heroMode h2 {
  font-size: 40px;
  margin: 13px 0 8px;
  letter-spacing: -1.8px;
  color: #fff;
  line-height: 0.98;
}
.heroMode p {
  font-size: 12.5px;
  line-height: 1.5;
  color: #cbbbe8;
  margin: 0 0 16px;
}
.heroGo {
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 900;
  color: #fff;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #7c6bff, #b07cff);
  padding: 12px 18px;
  border-radius: 14px;
  box-shadow: 0 10px 26px #7c6bff4d;
}
.heroShield {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 74px;
  height: 74px;
  opacity: 0.9;
  transform: rotate(-10deg);
  pointer-events: none;
  filter: drop-shadow(0 8px 22px #4fe0b744);
}
.heroRecord {
  position: absolute;
  right: 20px;
  top: 20px;
  text-align: right;
}
.heroRecord small {
  display: block;
  font-size: 8.5px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: #a193c4;
  font-weight: 800;
}
.heroRecord b {
  display: block;
  font-size: 26px;
  letter-spacing: -1px;
  color: var(--gold);
  line-height: 1.1;
}
.streakChip b {
  font-size: 12px;
  color: #f3a862;
}
.streakChip em {
  font-style: normal;
  font-size: 10px;
  color: var(--muted);
}
.catTile {
  position: relative;
  border: 1px solid var(--tileLine, #352761);
  border-radius: 20px;
  padding: 13px 8px 11px;
  background: var(--tileBg, #1b1133);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  overflow: hidden;
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    border-color 0.14s ease;
}
.catTile:before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, var(--tileGlow, #7c6bff26), transparent 62%);
}
.catTile:active {
  transform: scale(0.96);
}
.catTile .glyphWrap {
  position: relative;
  width: 38px;
  height: 38px;
  flex: none;
}
.catTile .glyphSvg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 4px 12px var(--tileGlow, #7c6bff40));
}
.catTile b {
  position: relative;
  display: block;
  font-size: 10.5px;
  line-height: 1.2;
  letter-spacing: -0.2px;
}
.catTile small {
  position: relative;
  display: block;
  font-size: 8.5px;
  color: var(--muted);
  margin-top: -4px;
}
.catTile i.tileBar {
  position: relative;
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 99px;
  background: #00000038;
  overflow: hidden;
  margin-top: 1px;
}
.catTile i.tileBar em {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--tileC, #7c6bff);
}
.modeTile {
  border: 1px solid #352761;
  border-radius: 19px;
  padding: 14px 10px;
  background: #1b1133;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
  transition:
    transform 0.14s ease,
    border-color 0.14s ease;
}
.modeTile:active {
  transform: scale(0.96);
}
.modeTile .modeIc {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--blue2);
}
.modeTile .modeIc svg {
  width: 28px;
  height: 28px;
}
.modeTile b {
  font-size: 12.5px;
}
.modeTile small {
  font-size: 9px;
  color: var(--muted);
  line-height: 1.35;
}
.modeTile.accentGold .modeIc {
  color: var(--gold);
}
.modeTile.accentPink .modeIc {
  color: var(--pink);
}
.dailyBand.ready {
  border-color: #ffc15e66;
  background: linear-gradient(120deg, #33245c, #241741);
  box-shadow: 0 0 0 1px #ffc15e1f;
}
.dailyBand .bandIc {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #2d1e56;
  color: var(--blue2);
}
.dailyBand.ready .bandIc {
  background: #3d2a18;
  color: var(--gold);
}
.dailyBand .bandIc svg {
  width: 22px;
  height: 22px;
}
.dailyBand b {
  display: block;
  font-size: 12.5px;
}
.dailyBand small {
  display: block;
  font-size: 9.5px;
  color: var(--muted);
  margin-top: 3px;
}
.dailyBand .bandGo {
  font-size: 22px;
  color: #7b6aa4;
  line-height: 1;
}
.dailyBand.ready .bandGo {
  color: var(--gold);
}
.bandPill {
  display: inline-block;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 99px;
  margin-left: 7px;
  background: var(--gold);
  color: #2a1806;
  vertical-align: 1px;
}
.eventScroll::-webkit-scrollbar {
  display: none;
}
.eventTile {
  position: relative;
  flex: 0 0 62%;
  min-height: 112px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #352761;
  padding: 14px;
  text-align: left;
  color: var(--text);
  scroll-snap-align: start;
  background: linear-gradient(150deg, var(--evA, #3a2148), var(--evB, #1b1133));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
}
.eventTile:before {
  content: '';
  position: absolute;
  right: -40px;
  top: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--evGlow, #ffc15e2e);
}
.eventTile b {
  position: relative;
  font-size: 13px;
  line-height: 1.2;
}
.eventTile small {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  color: var(--muted);
}
.eventTile small svg {
  width: 12px;
  height: 12px;
}
.evPill {
  position: absolute;
  left: 14px;
  top: 13px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 99px;
  color: #0f0a1e;
}
.evPill.live {
  background: var(--green);
}
.evPill.neuf {
  background: var(--blue2);
}
.evPill.hot {
  background: var(--pink);
  color: #fff;
}

@media (max-width: 420px) {
  .catGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .catTile {
    padding: 15px 9px 13px;
  }
  .catTile .glyphWrap {
    width: 42px;
    height: 42px;
  }
  .catTile b {
    font-size: 11.5px;
  }
  .heroMode h2 {
    font-size: 34px;
  }
  .heroBody {
    max-width: 100%;
    padding: 20px 18px 18px;
  }
  .heroShield {
    width: 56px;
    height: 56px;
    opacity: 0.5;
  }
  .eventTile {
    flex: 0 0 74%;
  }
}

@media (min-width: 421px) and (max-width: 520px) {
  .catGrid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.pickGlyph {
  overflow: hidden;
  padding: 9px;
}
.pickGlyph .glyphSvg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 2px 6px #00000055);
}
.bigCat {
  font-size: 42px;
  width: 58px;
  height: 58px;
  flex: none;
}
.bigCat .glyphSvg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 4px 14px #00000055);
}
.categoryHero {
  padding: 20px;
  border-radius: 24px;
  background: var(--cat);
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: inset 0 0 0 1px #ffffff18;
}
.catDot .glyphSvg,
.catSwatch .glyphSvg {
  width: 72%;
  height: 72%;
  display: block;
}
.crownMark.ringMark {
  font-size: 0;
  width: 78px;
  height: 78px;
  filter: none;
  animation: ringIn 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.crownMark.ringMark .logoRing {
  width: 78px;
  height: 78px;
  filter: drop-shadow(0 10px 30px #7c6bff55);
}

@keyframes ringIn {
  from {
    transform: scale(0.75) rotate(-25deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
#splash {
  position: fixed;
  z-index: 99;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 34%, #3b2168, #1b1133 52%, #0b0617);
  transition: 0.3s;
}
.splashTitle {
  font-weight: 950;
  font-size: 34px;
  letter-spacing: -1.6px;
  margin-top: 14px;
}
.loading i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--violet));
  animation: load 1.1s ease forwards;
}
.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  position: sticky;
  top: 0;
  z-index: 20;
  padding: max(8px, env(safe-area-inset-top)) 0 10px;
  background: linear-gradient(#130c24f0, #130c24c8 75%, transparent);
  backdrop-filter: blur(10px);
}
.brandBtn {
  gap: 9px;
  padding: 4px 0;
  align-items: center;
  min-width: 0;
}
.brandBtn .brandText {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
.brandBtn b {
  font-size: 17px;
  letter-spacing: -0.5px;
  line-height: 1.05;
  white-space: nowrap;
}
.brandBtn .brandText small {
  font-size: 8px;
  color: var(--muted);
  letter-spacing: 0.65px;
  text-transform: uppercase;
  margin-top: 0;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.logoRing {
  width: 32px;
  height: 32px;
  flex: none;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 3px 10px #7c6bff40);
}
.wallet {
  display: flex;
  gap: 5px;
  align-items: center;
  flex: none;
}
.wallet .wCoin,
.wallet .wGem {
  height: 34px;
  border: 1px solid #33245c;
  background: #1b1133;
  border-radius: 12px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 0.12s ease,
    border-color 0.12s ease,
    background 0.12s ease;
}
.wallet .wCoin:hover,
.wallet .wGem:hover {
  border-color: #4a396c;
  background: #21163b;
}
.wallet .wCoin b,
.wallet .wGem b {
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
}
.wallet .wCurrencyIcon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: inherit !important;
}
.wallet .wCurrencyIcon .qaShopSvg {
  display: block;
  width: 18px;
  height: 18px;
  overflow: visible;
}
.wallet .wCoin:active,
.wallet .wGem:active {
  transform: scale(0.94);
}
.wChest {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 11px;
  background: #22163f;
  border: 1px solid #33245c;
  color: #bcafdc;
  padding: 0;
}
.wChest svg {
  width: 17px;
  height: 17px;
}
.wChest.attente {
  color: var(--blue2);
  border-color: #4a3d9e;
}
.wChest.pret {
  color: var(--gold);
  border-color: #ffc15e88;
  background: #3d2a18;
  animation: coffrePret 1.8s ease-in-out infinite;
}

@keyframes coffrePret {
  0%,
  100% {
    box-shadow: 0 0 0 0 #ffc15e00;
  }
  50% {
    box-shadow: 0 0 0 4px #ffc15e22;
  }
}
.wDot {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 99px;
  background: var(--gold);
  color: #2a1806;
  font-size: 9px;
  font-weight: 950;
  font-style: normal;
  display: grid;
  place-items: center;
  border: 2px solid #130c24;
}

@media (max-width: 400px) {
  .wallet {
    display: flex !important;
  }
  .brandBtn .brandText small {
    display: none;
  }
  .profileChip span:last-child {
    display: none;
  }
  .profileChip {
    padding: 6px;
  }
}

@media (max-width: 340px) {
  .brandBtn .brandText {
    display: none;
  }
  .wallet .wCoin,
  .wallet .wGem {
    padding: 5px 6px;
  }
}
.modeRow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-bottom: 0;
}
.dailyBand {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  border: 1px solid #352761;
  border-radius: 18px;
  padding: 13px 14px;
  background: linear-gradient(120deg, #241741, #1b1133);
  color: var(--text);
  text-align: left;
  transition: border-color 0.14s ease;
  margin-top: 14px;
}
.streakChip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #22163f;
  border: 1px solid #352761;
  border-radius: 99px;
  padding: 8px 13px;
  margin-bottom: 12px;
  margin: 14px 0 2px;
  font-size: 11px;
}
.catGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-bottom: 2px;
}
.questGrid {
  display: grid;
  gap: 9px;
  margin-bottom: 2px;
}
.eventScroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  margin-top: 2px;
}
.sectionHead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin: 24px 2px 12px;
  gap: 12px;
}
.sectionHead h2 {
  line-height: 1.2;
}
.heroMode + .streakChip {
  margin-top: 12px;
}
.ligueBtn {
  width: 100%;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  transition:
    border-color 0.14s ease,
    transform 0.14s ease;
}
.ligueBtn:active {
  transform: scale(0.99);
}
.ligueBtn:hover {
  border-color: #6a4fb8;
}
.ligHero {
  margin-top: 14px;
  padding: 22px;
  border-radius: 24px;
  border: 1px solid #40306f;
  background: radial-gradient(circle at 88% 12%, #ffc15e33, transparent 34%), linear-gradient(140deg, #2d1e56, #1b1133);
}
.ligHero h1 {
  font-size: 33px;
  margin: 6px 0 4px;
  letter-spacing: -1.1px;
}
.ligHero p {
  font-size: 11px;
  color: var(--muted);
  margin: 0;
}
.ligBar {
  height: 9px;
  background: #120b22;
  border-radius: 99px;
  overflow: hidden;
  margin: 16px 0 10px;
  border: 1px solid #33245c;
}
.ligBar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--gold), #ff9f5e);
}
.ligReste {
  font-size: 11.5px;
  color: #c3b6e0 !important;
}
.ligReste b {
  color: var(--gold);
}
.ligRegle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid #33245c;
  font-size: 11px;
  color: var(--muted);
}
.ligRegle:first-of-type {
  margin-top: 12px;
}
.ligRegle b {
  font-size: 12px;
  color: var(--text);
}
.ligEchelle {
  display: grid;
  gap: 7px;
}
.ligPalier {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 11px;
  align-items: center;
  padding: 12px 13px;
  border-radius: 15px;
  background: #1b1133;
  border: 1px solid #302256;
}
.ligPip {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #2d1e56;
  color: #7b6aa4;
  font-size: 11px;
  font-weight: 950;
}
.ligPalier b {
  display: block;
  font-size: 12px;
}
.ligPalier small {
  display: block;
  font-size: 9px;
  color: var(--muted);
  margin-top: 3px;
}
.ligPalier.fait {
  opacity: 0.62;
}
.ligPalier.fait .ligPip {
  background: #0f3b33;
  color: var(--green);
}
.ligPalier.actuel {
  border-color: #ffc15e77;
  background: linear-gradient(120deg, #33245c, #241741);
  box-shadow: 0 0 0 1px #ffc15e22;
}
.ligPalier.actuel .ligPip {
  background: var(--gold);
  color: #2a1806;
}
.ligPalier.avenir {
  opacity: 0.8;
}
.ligIci {
  font-style: normal;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 99px;
  background: var(--gold);
  color: #2a1806;
}
/* ---- Barre cadeau de connexion (remplace l'ancien bandeau de serie) ---- */
.giftBar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin: 12px 0 2px;
  padding: 10px 13px;
  border-radius: 15px;
  text-align: left;
  cursor: pointer;
  background: linear-gradient(180deg, #22163f, #1b1133);
  border: 1px solid #352761;
  color: inherit;
}
.giftBar.ready {
  border-color: #ffc15e;
  background: linear-gradient(180deg, #2a1f3d, #1d1430);
  box-shadow:
    0 0 0 1px #ffc15e2e,
    0 6px 18px -10px #ffc15e66;
}
.giftBar:active {
  transform: scale(0.985);
}
.giftFlame {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}
.giftFlame b {
  font-size: 12px;
  color: #f3a862;
}
.giftMid b {
  display: block;
  font-size: 12px;
}
.giftMid small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}
.giftGo {
  padding: 6px 11px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
  background: #ffc15e;
  color: #2a1a05;
}
.giftBar.taken .giftGo {
  background: #2d1e56;
  color: #8b7ec8;
}
.giftStreak {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 14px;
  padding: 10px 12px;
  background: #1d1235;
  border: 1px solid #33245c;
  border-radius: 14px;
}
.giftStreak span {
  font-size: 19px;
}
.giftStreak b {
  display: block;
  font-size: 12px;
  color: #f3a862;
}
.giftStreak small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}
.bm-gift .bmKicker {
  background: #f3a862;
}

/* ---- Retour tactile commun aux zones devenues cliquables ---- */
.clickable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.12s ease,
    filter 0.12s ease;
}
.clickable:active {
  transform: scale(0.985);
  filter: brightness(1.1);
}
.statGrid button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: center;
}
.statGrid button:active {
  transform: scale(0.96);
}
.miniMastery > button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.miniMastery button:active {
  transform: scale(0.97);
}
.slot.empty {
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.buildTag {
  text-align: center;
  font-size: 9px;
  color: #5c4f8a;
  margin: 18px 0 4px;
  letter-spacing: 0.3px;
}

/* ===== Courbe de difficulté (v22) ===== */
.diffTag {
  font-style: normal;
  font-size: 10px;
  font-weight: 900;
  color: #8ad7ff;
  margin-left: 6px;
}
.diffEyebrow b {
  font-weight: 900;
  opacity: 0.95;
}
.diffEyebrow.d-easy {
  color: #7ee0a8;
}
.diffEyebrow.d-medium {
  color: #ffd98a;
}
.diffEyebrow.d-hard {
  color: #ff9f6e;
}
.diffEyebrow.d-expert {
  color: #ff7b9c;
  letter-spacing: 0.14em;
}

/* ── Accueil v23 : modes en tête, univers en rail ───────────────── */
.modeRowTop {
  margin-top: 12px;
}

.sectionHead .headLink {
  background: none;
  border: 0;
  padding: 6px 2px;
  color: #b0a2ce;
  font-size: 11.5px;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
  flex: none;
}
.sectionHead .headLink:active {
  opacity: 0.6;
}

.catRail {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  margin: 0 -4px;
  padding-left: 4px;
  padding-right: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.catRail::-webkit-scrollbar {
  display: none;
}
.catRail .catTile {
  flex: 0 0 94px;
  scroll-snap-align: start;
}
.catRail .catTile b {
  font-size: 10px;
}

.catMore {
  --tileBg: #1b1133;
  --tileLine: #3d2c70;
  --tileGlow: #7c6bff26;
  justify-content: center;
  gap: 10px;
}
.catMore .moreDots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  width: 38px;
  flex: none;
}
.catMore .moreDots i {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 4px;
}
.catMore b {
  color: #cfc3f0;
}

/* Boutique Minimal Premium — pont vers les objets de profil historiques */
.shopLegacyGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin-top: 12px;
}
.shopLegacyCard {
  border: 1px solid #352761;
  background: #1b1133;
  color: #fff;
  border-radius: 16px;
  padding: 12px;
  display: grid;
  gap: 6px;
  text-align: center;
}
.shopLegacyCard > span {
  height: 66px;
  display: grid;
  place-items: center;
  font-size: 28px;
}
.shopLegacyCard > span svg {
  width: 58px;
  height: 58px;
}
.shopLegacyCard b {
  font-size: 12px;
}
.shopLegacyCard small {
  font-size: 9px;
  color: #a193c4;
}
.adminPanel .qa-studio-tabs {
  margin-top: 14px;
}
.adminPanel .qa-studio-block {
  background: #180f2e;
}
.adminPanel .qa-field input,
.adminPanel .qa-field select,
.adminPanel .qa-field textarea {
  font-size: 11px;
}
.adminPanel .qa-section-row button,
.adminPanel .qa-product-row button {
  cursor: pointer;
}

/* ===== Intro narrative Atlas — premier lancement ===== */
.atlasIntro {
  position: relative;
  min-height: 100dvh;
  margin: -16px -14px -96px;
  padding: clamp(28px, 6vh, 58px) 20px max(28px, env(safe-area-inset-bottom));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: radial-gradient(circle at 50% 20%, #163e45 0, #17122c 34%, #0d0818 72%);
  isolation: isolate;
}
.atlasAmbient {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.28;
  z-index: -1;
  pointer-events: none;
}
.atlasAmbientA {
  width: 260px;
  height: 260px;
  left: -90px;
  top: 18%;
  background: #5eead4;
}
.atlasAmbientB {
  width: 300px;
  height: 300px;
  right: -150px;
  top: 2%;
  background: #8f72ff;
}
.atlasSkip {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: 18px;
  border: 1px solid #ffffff16;
  background: #130d22cc;
  color: #b9afcf;
  border-radius: 999px;
  padding: 9px 13px;
  font-size: 11px;
  font-weight: 850;
  z-index: 4;
  backdrop-filter: blur(10px);
}
.atlasHero {
  position: relative;
  display: grid;
  place-items: center;
  margin: auto auto 22px;
  width: min(270px, 72vw);
  aspect-ratio: 1;
  animation: atlasIn 0.48s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.atlasHalo {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, #5eead433 0, #5eead40d 44%, transparent 72%);
  box-shadow: 0 0 80px #5eead426;
}
.atlasHero:before,
.atlasHero:after {
  content: '';
  position: absolute;
  border: 1px solid #5eead42c;
  border-radius: 50%;
  inset: 16%;
  animation: atlasOrbit 7s linear infinite;
}
.atlasHero:after {
  inset: 5%;
  border-color: #8f72ff26;
  animation-duration: 11s;
  animation-direction: reverse;
}
.atlasAvatar {
  width: 58%;
  filter: drop-shadow(0 24px 34px #0008);
  z-index: 2;
}
.atlasAvatar svg {
  width: 100%;
  height: auto;
}
.atlasHero > span {
  position: absolute;
  bottom: 7%;
  z-index: 3;
  padding: 6px 12px;
  border-radius: 999px;
  background: #0f2d2b;
  border: 1px solid #5eead455;
  color: #bafff4;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.atlasDialogue {
  position: relative;
  background: linear-gradient(180deg, #1d1532f2, #140e24f8);
  border: 1px solid #ffffff14;
  border-radius: 26px;
  padding: 22px;
  box-shadow:
    0 30px 80px #0007,
    inset 0 1px #ffffff0b;
  backdrop-filter: blur(18px);
  animation: atlasUp 0.4s 0.06s both;
}
.atlasDialogue .eyebrow {
  color: #72e7d7;
  margin-bottom: 8px;
}
.atlasDialogue h1 {
  margin: 0;
  font-size: clamp(27px, 7vw, 38px);
  line-height: 1.02;
  letter-spacing: -1.2px;
}
.atlasDialogue p {
  margin: 12px 0 17px;
  color: #c8bed8;
  font-size: 14px;
  line-height: 1.55;
  max-width: 470px;
}
.atlasFooter {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 17px;
}
.atlasDots {
  display: flex;
  gap: 6px;
  margin-right: auto;
}
.atlasDots i {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: #514366;
  transition: 0.2s;
}
.atlasDots i.on {
  width: 22px;
  background: #5eead4;
}
.atlasNext {
  min-width: 142px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.atlasNext span {
  font-size: 18px;
  line-height: 1;
}
.atlasPulse {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.atlasPulse span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5eead4;
  animation: atlasBeat 1.1s ease-in-out infinite;
}
.atlasPulse span:nth-child(2) {
  animation-delay: 0.14s;
}
.atlasPulse span:nth-child(3) {
  animation-delay: 0.28s;
}
.atlasMiniAnswers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}
.atlasMiniAnswers i {
  display: grid;
  place-items: center;
  height: 42px;
  border: 1px solid #ffffff12;
  border-radius: 12px;
  background: #211735;
  color: #7f718f;
  font-style: normal;
  font-weight: 950;
}
.atlasMiniAnswers i.ok {
  background: #103b37;
  border-color: #5eead474;
  color: #a7fff1;
  box-shadow: 0 0 24px #5eead41c;
}
.atlasRewards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.atlasRewards span {
  padding: 10px 8px;
  border: 1px solid #ffffff10;
  border-radius: 13px;
  background: #201632;
  text-align: center;
}
.atlasRewards b {
  display: block;
  color: #f5f0ff;
  font-size: 16px;
}
.atlasRewards small {
  display: block;
  margin-top: 3px;
  color: #9185a6;
  font-size: 9px;
}
.atlasModes {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.atlasModes::-webkit-scrollbar {
  display: none;
}
.atlasModes span {
  flex: 0 0 auto;
  padding: 9px 11px;
  border-radius: 999px;
  background: #211735;
  border: 1px solid #ffffff12;
  color: #c9bfd9;
  font-size: 10px;
  font-weight: 850;
}
.atlasModes span:last-child {
  border-color: #ffc15e55;
  color: #ffd892;
  background: #2b2031;
}
@keyframes atlasIn {
  from {
    opacity: 0;
    transform: scale(0.88) translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes atlasUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes atlasOrbit {
  to {
    transform: rotate(360deg);
  }
}
@keyframes atlasBeat {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  50% {
    transform: translateY(-6px);
    opacity: 1;
  }
}
@media (max-height: 700px) {
  .atlasIntro {
    padding-top: 20px;
  }
  .atlasHero {
    width: min(180px, 48vw);
    margin-bottom: 12px;
  }
  .atlasDialogue {
    padding: 17px;
    border-radius: 21px;
  }
  .atlasDialogue h1 {
    font-size: 25px;
  }
  .atlasDialogue p {
    font-size: 12px;
    margin: 8px 0 12px;
  }
  .atlasMiniAnswers i {
    height: 34px;
  }
  .atlasFooter {
    margin-top: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .atlasHero,
  .atlasDialogue,
  .atlasHero:before,
  .atlasHero:after,
  .atlasPulse span {
    animation: none !important;
  }
}

/* ===== Studio contenu pro / sous-catégories ===== */
.subcatGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 10px 0 22px;
}
.subcatCard {
  border: 1px solid #3a2a61;
  background: linear-gradient(180deg, #21163a, #171024);
  color: var(--text);
  border-radius: 17px;
  padding: 14px;
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 11px;
  align-items: center;
  text-align: left;
  min-height: 78px;
}
.subcatCard:hover {
  border-color: #6f58ad;
}
.subcatCard .subcatDot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--violet);
  box-shadow: 0 0 15px #b07cff66;
}
.subcatCard b {
  display: block;
  font-size: 13px;
}
.subcatCard small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 5px;
}
.categoryAdminCard {
  border: 1px solid #39295f;
  background: #1a112d;
  border-radius: 18px;
  padding: 13px;
  margin: 10px 0;
}
.categoryAdminTop {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 11px;
  align-items: center;
}
.categoryAdminTop button,
.subAdminList button {
  border: 1px solid #44326f;
  background: #241741;
  color: #e8e0fa;
  border-radius: 11px;
  padding: 8px 10px;
  font-weight: 800;
  font-size: 11px;
}
.subAdminList {
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
  padding-left: 62px;
}
.subAdminList > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid #30234f;
  background: #151020;
  border-radius: 12px;
}
.subAdminList b {
  display: block;
  font-size: 12px;
}
.subAdminList small {
  display: block;
  color: var(--muted);
  font-size: 9px;
  margin-top: 3px;
}
.subAdminList .addSubBtn {
  justify-self: start;
  background: transparent;
  border-style: dashed;
  color: var(--text);
}
.qualitySummary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin: 12px 0;
}
.qualitySummary > div {
  padding: 13px;
  background: #160f27;
  border: 1px solid #33245c;
  border-radius: 14px;
  text-align: center;
}
.qualitySummary b {
  display: block;
  font-size: 22px;
}
.qualitySummary small {
  font-size: 9px;
  color: var(--muted);
}
.qNeedsReview {
  border-color: #7b5836 !important;
  background: linear-gradient(90deg, #281b22, #1b1231) !important;
}
.qualityWarn {
  color: #ffc15e;
  font-weight: 850;
}
.qualityBox {
  margin-top: 12px;
  border: 1px solid #7b5836;
  background: #2a1c20;
  border-radius: 14px;
  padding: 12px;
  display: grid;
  gap: 5px;
}
.qualityBox b {
  color: #ffc15e;
}
.qualityBox span {
  font-size: 11px;
  color: #dccfc1;
}
.proMeta {
  margin: 12px 0;
  border: 1px solid #39295f;
  background: #171024;
  border-radius: 13px;
  padding: 10px;
}
.proMeta summary {
  cursor: pointer;
  font-weight: 850;
  color: #c8b9e8;
  margin-bottom: 9px;
}
@media (max-width: 420px) {
  .subcatGrid {
    grid-template-columns: 1fr;
  }
  .subAdminList {
    padding-left: 0;
  }
  .categoryAdminTop {
    grid-template-columns: 44px 1fr auto;
  }
  .qualitySummary {
    grid-template-columns: 1fr 1fr;
  }
  .qualitySummary > div:last-child {
    grid-column: 1/-1;
  }
}