/* =========================================================
   Quêtes du mois — thème aligné avec ta page (bleu pétrole)
   ========================================================= */

body.profile-page #go-home-mobile {
  display: none !important;
}

#monthly-quests {
  /* Palette principale (match UI globale) */
  --bg-0: #062432; /* fond profond bleu pétrole */
  --bg-card: rgba(9, 35, 53, 0.72); /* verre fumé */
  --bg-card-weak: rgba(9, 35, 53, 0.55);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(140, 220, 255, 0.22);
  --text: #e8f4ff;
  --text-dim: rgba(210, 235, 255, 0.78);

  /* Accents (comme tes pills/boutons header) */
  --accent-1: #2ad0ff; /* cyan */
  --accent-2: #00b5ff; /* cyan plus sombre */
  --accent-3: #7c5cff; /* violet de ton UI pour l’aura discrète */

  /* Validation (on reste dans le bleu/teal, pas vert fluo) */
  --ok-1: #1de7d6;
  --ok-2: #2ac8ff;

  --r-lg: 16px;
  --r-md: 12px;
  --shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
  --mq-card-w: clamp(520px, 90vw, 700px);
}

#avatar-normal {
  opacity: 1;
}

#monthly-quests .header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}
#monthly-quests .section-title {
  margin: 0;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  font-weight: 900;
  letter-spacing: 0.3px;
  color: var(--text);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}
#monthly-quests .mq-progress-chip-slot {
  width: min(100%, var(--mq-card-w));
  max-width: 100%;
}
#monthly-quests .mq-progress-chip-slot:empty {
  display: none;
}
#monthly-quests #quest-progress-chip {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  #monthly-quests .questbar__fill,
  #participants-list .questbar__fill {
    transition: width 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}

.questbar.questbar--completion-pop {
  animation: questbarCompletionPop 1.15s cubic-bezier(0.19, 1, 0.22, 1);
}

.questbar.questbar--completion-pop .questbar__track::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.85),
      rgba(255, 255, 255, 0.18) 28%,
      transparent 62%
    ),
    linear-gradient(
      105deg,
      transparent 0 26%,
      rgba(255, 255, 255, 0.92) 43%,
      transparent 58% 100%
    );
  mix-blend-mode: screen;
  transform: translateX(-115%) skewX(-18deg);
  animation: questbarCompletionSweep 1.05s ease-out forwards;
}

.questbar.questbar--completion-pop .questbar__txt {
  overflow: hidden;
  color: transparent !important;
}

.questbar.questbar--completion-pop .questbar__txt::before,
.questbar.questbar--completion-pop .questbar__txt::after {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.96);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.75),
    0 0 10px rgba(0, 0, 0, 0.35);
}

.questbar.questbar--completion-pop .questbar__txt::before {
  content: attr(data-previous-text);
  animation: questbarCompletionOldText 0.48s ease-in forwards;
}

.questbar.questbar--completion-pop .questbar__txt::after {
  content: attr(data-completion-label);
  opacity: 0;
  transform: translateY(-120%);
  animation: questbarCompletionNewText 0.7s cubic-bezier(0.19, 1, 0.22, 1) 0.26s
    forwards;
}

@keyframes questbarCompletionPop {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  35% {
    transform: scale(1.055);
    filter: brightness(1.28) saturate(1.18);
  }
  70% {
    transform: scale(0.985);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes questbarCompletionSweep {
  0% {
    opacity: 0;
    transform: translateX(-115%) skewX(-18deg);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(115%) skewX(-18deg);
  }
}

@keyframes questbarCompletionOldText {
  to {
    opacity: 0;
    transform: translateY(120%);
  }
}

@keyframes questbarCompletionNewText {
  0% {
    opacity: 0;
    transform: translateY(-120%);
  }
  72% {
    opacity: 1;
    transform: translateY(8%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .questbar.questbar--completion-pop,
  .questbar.questbar--completion-pop .questbar__track::before,
  .questbar.questbar--completion-pop .questbar__txt,
  .questbar.questbar--completion-pop .questbar__txt::before,
  .questbar.questbar--completion-pop .questbar__txt::after {
    animation: none !important;
  }
}

/* Liste */
#mq-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 12px;
  justify-items: center;
}

/* Cartes */
.mq-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 7px 6px;
  background: linear-gradient(180deg, var(--bg-card), rgba(6, 36, 50, 0.6));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  position: relative;
  overflow: visible;
  transition:
    transform 0.15s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}
.mq-item::before {
  /* lueur cyan douce sur le bord droit, comme tes cartes */
  content: "";
  position: absolute;
  inset: -1px -1px -1px auto;
  width: 36%;
  background: radial-gradient(
    60% 120% at 100% 10%,
    color-mix(in srgb, var(--accent-2) 35%, transparent),
    transparent 60%
  );
  pointer-events: none;
  opacity: 0.6;
}
.mq-item:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
}

/* Colonne gauche */
.mq-left {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  min-width: 0;
}
.mq-ico {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(
    180deg,
    rgba(15, 48, 68, 0.9),
    rgba(10, 40, 58, 0.9)
  );
  border: 1px solid var(--border);
  font-size: 18px;
  color: #cff3ff;
  box-shadow: inset 0 6px 14px rgba(0, 0, 0, 0.35);
}
.mq-title {
  margin: 0;
  font-weight: 900;
  font-size: 1rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  visibility: hidden;
}
.mq-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}
.mq-title-row .mq-title {
  min-width: 0;
  flex: 0 1 auto;
}
.mq-exp-reward {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  min-height: 30px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(126, 219, 255, 0.58);
  background:
    linear-gradient(145deg, rgba(9, 42, 84, 0.78), rgba(20, 119, 184, 0.54)),
    radial-gradient(circle at 16% 12%, rgba(230, 249, 255, 0.22), transparent 36%);
  color: #eefbff;
  font:
    900 0.9rem/1 "Trebuchet MS",
    system-ui,
    sans-serif;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 14px rgba(46, 184, 255, 0.18);
}
.mq-exp-reward__amount {
  text-shadow: 0 1px 6px rgba(0, 18, 48, 0.58);
}
.mq-exp-reward__label {
  color: rgba(221, 246, 255, 0.84);
  font-size: 0.78em;
  letter-spacing: 0.04em;
}
.mq-pops-reward {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  min-height: 30px;
  padding: 5px 6px 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 162, 190, 0.48);
  background:
    linear-gradient(145deg, rgba(71, 9, 39, 0.72), rgba(142, 19, 64, 0.52)),
    radial-gradient(circle at 16% 12%, rgba(255, 239, 246, 0.18), transparent 36%);
  color: #fff7fb;
  font:
    900 0.9rem/1 "Trebuchet MS",
    system-ui,
    sans-serif;
  font-variant-numeric: tabular-nums;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 12px rgba(255, 58, 113, 0.14);
}
.mq-pops-reward__gem.pops-wallet__gem {
  display: inline-block;
  width: 15px;
  height: 21px;
  box-shadow:
    inset -3px -4px 7px rgba(65, 0, 30, 0.4),
    inset 3px 3px 6px rgba(255, 209, 223, 0.42),
    0 0 8px rgba(255, 70, 124, 0.36);
}
.mq-pops-reward__gem .pops-wallet__gem-shine {
  top: 3px;
  left: 5px;
  width: 4px;
  height: 4px;
}
.mq-pops-reward__amount {
  min-width: 2ch;
  text-align: left;
  text-shadow: 0 1px 5px rgba(48, 0, 28, 0.55);
}
.mq-pops-fly-layer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: visible;
  contain: layout style;
}

.mq-pops-fly-gem.pops-wallet__gem {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 18px;
  height: 25px;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  filter:
    drop-shadow(0 0 10px rgba(255, 70, 124, 0.72))
    drop-shadow(0 6px 8px rgba(18, 4, 23, 0.28));
}

.mq-pops-fly-gem .pops-wallet__gem-shine {
  top: 4px;
  left: 6px;
  width: 5px;
  height: 5px;
}

.mq-meta {
  font-size: 0.86rem;
  color: var(--text-dim);
}

/* Progress */
.mq-progress {
  height: 7px;
  margin-top: 6px;
  background: rgba(160, 205, 230, 0.18);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  outline: 1px solid rgba(160, 205, 230, 0.15);
  width: 182px;
  margin-bottom: 5px;
}
.mq-progress__bar {
  width: var(--p, 0%);
  height: 100%;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  transform-origin: left;
  transform: scaleX(var(--p-sx, 0));
  transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mq-progress__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #fff3 0 8%,
    transparent 20% 80%,
    #fff3 92% 100%
  );
  mix-blend-mode: screen;
}
@keyframes mq-shimmer {
  from {
    transform: translateX(-12%);
  }
  to {
    transform: translateX(12%);
  }
}

/* Bouton Valider (cyan comme ton UI) */
.mq-action {
  --rx: 50%;
  --ry: 50%;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  font-weight: 900;
  letter-spacing: 0.2px;
  color: #062432;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  border: 1px solid transparent;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent-2) 36%, transparent);
  transition:
    transform 0.15s ease,
    filter 0.15s ease;
}
.mq-action:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}
.mq-action::after {
  /* ripple discret */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    140px 140px at var(--rx) var(--ry),
    #ffffff26,
    transparent 60%
  );
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
}
.mq-action:where(:hover, :focus-visible)::after {
  opacity: 1;
  transform: scale(1);
}

.mq-action[disabled] {
  cursor: default;
  color: #0a2b33;
  background: linear-gradient(135deg, var(--ok-1), var(--ok-2));
  box-shadow: 0 0 0 transparent;
}

/* État vide */
.mq-empty {
  font-size: 0.95rem;
  color: var(--text);
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--bg-card), rgba(8, 34, 48, 0.55));
}

/* Mobile */
@media (max-width: 520px) {
  .mq-title {
    font-size: 0.98rem;
  }
  .mq-action {
    padding: 0.48rem 0.78rem;
  }
  .mq-ico {
    width: 32px;
    height: 32px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #monthly-quests *,
  #monthly-quests *::before,
  #monthly-quests *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* === Quêtes — largeur contrôlée + centrage === */
#mq-list > .mq-item {
  width: min(100%, var(--mq-card-w)); /* carte moins large */
  max-width: 100%;
}

/* Mobile : on garde 100% */
@media (max-width: 520px) {
  #monthly-quests {
    --mq-card-w: 100%;
  }
}
/* === Slider : une seule carte visible par type === */
#monthly-quests .mq-type-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 2px 8px;
  color: var(--text-dim);
}
#monthly-quests .mq-viewport {
  overflow: hidden;
  border-radius: var(--r-lg);
}
#monthly-quests .mq-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  transform: translateX(calc(var(--idx, 0) * -100%));
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
#monthly-quests .mq-track.mq-track--slide-left {
  transition-duration: 0.64s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
#monthly-quests .mq-track.mq-track--no-anim {
  transition: none !important;
}

/* Petites anims utilisées par le JS */
@keyframes mq-slide-in-from-right {
  from {
    transform: translateX(48px) scale(0.98);
    opacity: 0;
    filter: brightness(0.9);
  }
  to {
    transform: translateX(0) scale(1);
    opacity: 1;
    filter: brightness(1);
  }
}
#monthly-quests .mq-item.mq-item--entering {
  animation: mq-slide-in-from-right 0.64s cubic-bezier(0.19, 1, 0.22, 1) both;
}
.mq-item.not-played .mq-progress__bar {
  transform: scaleX(0);
}
.mq-item.played .mq-progress__bar {
  transform: scaleX(var(--p-sx, 0));
}
/*====== Feux d'artifice : calque global ====== */
#fireworks-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 9999; /* au-dessus du layout, sans bloquer les clics */
}
.fw-explosion {
  position: fixed;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}
.fw-explosion i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(0, 0);
  opacity: 0;
  animation: fw 0.9s ease forwards;
  animation-delay: var(--delay, 0ms);
}
@keyframes fw {
  0% {
    transform: translate(0, 0) scale(0.8);
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(0.6);
    opacity: 0;
  }
}

/* ====== Aura “clique-moi” pour le bouton ====== */
.mq-action.mq-cta {
  position: relative;
  isolation: isolate; /* pour que l’aura reste au dessus de son fond */
  overflow: visible; /* au lieu de hidden */
  z-index: 1; /* optionnel, pour être au-dessus du voisinage */
  box-shadow:
    0 0 0 0 rgba(42, 208, 255, 0.35),
    0 0 16px rgba(42, 208, 255, 0.35) inset;
}
.mq-action.mq-cta::before,
.mq-action.mq-cta::after {
  content: "";
  position: absolute;
  inset: -6px; /* déborde légèrement le bouton */
  border-radius: 999px;
  pointer-events: none;
  z-index: 2; /* l’aura passe devant le fond du bouton */
}
.mq-action.mq-cta::before {
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--accent-1, #2ad0ff) 50%, transparent) 0%,
    transparent 60%
  );
  filter: blur(8px);
  opacity: 0.85;
  animation: cta-pulse 1.6s ease-in-out infinite;
}
.mq-action.mq-cta::after {
  border: 1.5px solid
    color-mix(in srgb, var(--accent-2, #00b5ff) 80%, transparent);
  opacity: 0.7;
  animation: cta-ring 1.6s ease-out infinite;
}
@keyframes cta-pulse {
  0%,
  100% {
    opacity: 0.65;
    transform: scale(1);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.06);
  }
}
@keyframes cta-ring {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  70% {
    opacity: 0;
    transform: scale(1.05);
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}
/* Si tu as mis overflow hidden sur le viewport du carrousel, évite
   de clipper l’intérieur des cartes (on laisse hidden pour le slide) */
#mq-list .mq-type .mq-viewport {
  overflow: hidden; /* OK pour le slider */
}
#mq-list .mq-type .mq-track {
  overflow: visible; /* <— permet aux éléments dans les items de dépasser */
}

/* ==== Quêtes: puce de progression (Identity) ==== */
.inspector-identity .quest-progress-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  position: relative;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.06)
  );
  font: 600 12px/1 system-ui;
  color: #fff;
  margin-top: 0.45rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  margin-left: 20px;
}
.inspector-identity .quest-progress-chip .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c5cff, #00e4ff);
}
.inspector-identity .quest-progress-chip.bump {
  animation: quest-chip-bump 0.45s ease;
}
@keyframes quest-chip-bump {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

/* Puce “Quêtes du mois : X%” (si tu n’en as pas déjà) */
.quest-progress-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.15));
}
.quest-progress-chip .val {
  font-weight: 800;
}
.quest-progress-chip.bump {
  animation: chip-bump 0.3s ease;
}
@keyframes chip-bump {
  0% {
    transform: translateY(0) scale(1);
  }
  40% {
    transform: translateY(-3px) scale(1.06);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
/* === Jeton volant +X% (version unique) === */
.quest-fx {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate3d(var(--x0), var(--y0), 0) scale(0.9);
  opacity: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font:
    800 12px/1 system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    sans-serif;
  color: #00222b;
  background: linear-gradient(
    135deg,
    var(--ok-1, #1de7d6),
    var(--ok-2, #2ac8ff)
  );
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 99999;
  will-change: transform, opacity;
  transition:
    transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.45s ease;
}
.quest-fx.in {
  opacity: 1;
  transform: translate3d(var(--x0), var(--y0), 0) scale(1);
}
.quest-fx.fly {
  transform: translate3d(var(--x1), var(--y1), 0) scale(0.78);
  opacity: 0;
}
/* ====== Config Twitch — look & feel ====== */
#twcfg {
  --card-bg: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.18);
  --text-dim: rgba(255, 255, 255, 0.75);
}
#twcfg .twcfg-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
#twcfg .twcfg-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  #twcfg .twcfg-grid {
    grid-template-columns: 1fr 1fr;
  }
}

#twcfg .field label {
  display: block;
  margin: 0 0 8px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
#twcfg .drop {
  position: relative;
  border: 1.5px dashed var(--border);
  border-radius: 16px;
  min-height: 160px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px;
  cursor: pointer;
  transition: 0.2s;
}
#twcfg .drop:hover,
#twcfg .drop.is-drag {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.35);
}
#twcfg .drop input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
#twcfg .drop .hint {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 6px;
}

#twcfg .preview {
  margin-top: 10px;
}
#twcfg .preview .media {
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

#twcfg .meta {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 6px;
}
#twcfg .actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

#twcfg .btn {
  padding: 0.72rem 1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 800;
  letter-spacing: 0.2px;
}
#twcfg .btn-primary {
  background: linear-gradient(135deg, #7c5cff, #00e4ff);
  color: #0a0a0a;
}
#twcfg .btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#twcfg .status {
  font-size: 0.95rem;
  color: var(--text-dim);
}
#twcfg .status.ok {
  color: #2ecc71;
}
#twcfg .status.err {
  color: #ff6b81;
}

#twcfg .spin {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  vertical-align: -3px;
  margin-right: 6px;
  animation: twspin 0.8s linear infinite;
}
@keyframes twspin {
  to {
    transform: rotate(360deg);
  }
}
#twcfg .twcfg-help {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-color: rgba(42, 208, 255, 0.45);
  background: linear-gradient(
    180deg,
    var(--card-bg, rgba(255, 255, 255, 0.06)),
    rgba(42, 208, 255, 0.08)
  );
  margin-bottom: 10px;
}
#twcfg .twcfg-help .ico {
  font-size: 22px;
  margin-top: 0.15rem;
}
#twcfg .twcfg-help code {
  font:
    900 0.95rem/1 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.18));
}
#panel-badges .badge-row.is-complete::after {
  content: none;
}
#panel-badges .badge-row.is-complete .row-chips .chip {
  transform: translateZ(0);
}
#panel-badges .badge-row.is-complete.burst .row-chips .chip.is-latest {
  animation: chipGlow 1.2s ease 180ms;
}
@keyframes chipGlow {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(0, 228, 255, 0);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 228, 255, 0.55);
  }
}
.inspector-section {
  --gap: 12px;
  --radius: 14px;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  --bg: rgba(18, 18, 20, 0.55);
  --border: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
  margin: 0;
  padding: 10px;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
}

.inspector-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.inspector-header .section-title {
  margin: 0;
}

.inspector-wrap {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(200px, 363px) minmax(0, 1fr);
  align-items: start;
}
.inspector-card {
  background: var(--bg);
  backdrop-filter: blur(10px);
  border-radius: var(--radius);
  border: var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.inspector-left {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.inspector-identity {
  padding: 14px !important;
}
.inspector-identity .identity-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 10px;
  position: relative;
}
.inspector-identity .identity-avatar-shell {
  position: relative;
  display: grid;
  place-items: center;
  padding: 8px;
  border-radius: 24px;
  background:
    radial-gradient(
      circle at top left,
      rgba(255, 255, 255, 0.32),
      transparent 52%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.14),
      rgba(255, 255, 255, 0.05)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 16px 28px rgba(0, 0, 0, 0.18);
}
.inspector-identity .avatar {
  width: 88px;
  height: 88px;
  border-radius: 16px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  position: relative;
}
.inspector-identity .identity-nameplate {
  position: relative;
  z-index: 1;
  margin-top: -10px;
  max-width: min(100%, 248px);
  padding: 10px 18px 9px;
  border-radius: 999px;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.28), transparent 58%),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.18),
      rgba(255, 255, 255, 0.06)
    );
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 14px 26px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(8px);
}
.inspector-identity .name {
  display: block;
  max-width: 100%;
  font: 800 19px/1.1 system-ui;
  letter-spacing: 0.01em;
  margin: 0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
  white-space: normal;
  word-break: break-word;
  position: relative;
}
.inspector-identity .rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  margin-bottom: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0.05)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 22px rgba(0, 0, 0, 0.22);
  font: 700 11px/1 system-ui;
  opacity: 1;
}
.inspector-identity .rank[hidden] {
  display: none !important;
}
.stat {
  background: rgba(11, 13, 33, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 4px;
  margin: 1px;
}
.stat .label {
  opacity: 0.8;
  font: 600 11px/1 system-ui;
}
.stat .value {
  font: 800 16px/1.2 system-ui;
  margin-top: 6px;
}
.inspector-right {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.panel {
  padding: 12px;
}
.panel h3 {
  margin: 0 0 10px;
  font: 700 16px/1.2 system-ui;
}
.games {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.game-row {
  display: grid;
  grid-template-columns: minmax(90px, 120px) 1fr auto;
  gap: 8px;
  align-items: center;
}
.bar {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.25),
    rgba(255, 255, 255, 0.08)
  );
  border: 1px solid rgba(255, 255, 255, 0.18);
  position: relative;
  overflow: hidden;
}
.bar > span {
  position: absolute;
  inset: 0;
  width: 0%;
  background: rgba(255, 255, 255, 0.75);
}
.muted {
  opacity: 0.8;
}
.inspector-controls {
  margin-left: auto;
  display: none !important;
  gap: 8px;
}
.inspector-controls input {
  min-width: 260px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.inspector-controls .btn {
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  font: 600 13px;
  cursor: pointer;
}
.raw {
  max-height: 260px;
  overflow: auto;
  background: #0e0f12;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 12px;
}

/* --- Compact/layout guards --- */
.inspector-left,
.inspector-right,
.inspector-card,
.panel,
.v {
  min-width: 0;
}
.v {
  word-break: break-word;
}

#panel-raw {
  display: none !important;
}

/* Mobile */
@media (max-width: 980px) {
  .inspector-wrap {
    grid-template-columns: 1fr;
  }
  #panel-games .games:not(.is-expanded) {
    max-height: 220px;
  }
}

/* (Option) si votre page est en grille 2 colonnes .main-grid :
     force l’inspector à rester dans la colonne de gauche. 
     Dé-commentez si nécessaire.
  */
/* .main-grid > .inspector-section{ grid-column: 1 / 2; } */
#panel-games {
  --games-collapsed: 500px;
  --games-expanded-height: 430px;
}
#panel-games .games-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: center;
  margin: 0 0 10px;
}
#panel-games .games-search:not(.has-query) {
  grid-template-columns: minmax(0, 1fr);
}
#panel-games .games-search[hidden] {
  display: none !important;
}
#panel-games .games-search-input {
  min-width: 0;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(7, 12, 24, 0.56);
  color: #fff;
  font: 600 12px/1 system-ui;
  outline: none;
}
#panel-games .games-search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
#panel-games .games-search-input:focus {
  border-color: rgba(102, 192, 244, 0.58);
  box-shadow: 0 0 0 3px rgba(102, 192, 244, 0.14);
}
#panel-games .games-search-clear {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.86);
  font: 800 18px/1 system-ui;
  cursor: pointer;
}
#panel-games .games-search-clear:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
}
#panel-games .games {
  display: grid;
  gap: 0.5rem;
  max-height: var(--games-collapsed);
  overflow: hidden;
  position: relative;
  opacity: 0.98;
  transition:
    height 0.35s cubic-bezier(0.2, 0, 0.2, 1),
    max-height 0.35s cubic-bezier(0.2, 0, 0.2, 1),
    opacity 0.25s ease;
  will-change: height, max-height, opacity;
}
#panel-games .games.is-expanded {
  height: var(--games-expanded-height);
  max-height: var(--games-expanded-height);
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-color: rgba(102, 192, 244, 0.55) rgba(255, 255, 255, 0.08);
  scrollbar-width: thin;
  opacity: 1;
}
#panel-games .games.is-expanded::-webkit-scrollbar {
  width: 8px;
}
#panel-games .games.is-expanded::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}
#panel-games .games.is-expanded::-webkit-scrollbar-thumb {
  background: rgba(102, 192, 244, 0.5);
  border-radius: 999px;
}
#panel-games .games-empty {
  min-height: 80px;
  display: grid;
  place-items: center;
  padding: 14px;
  border-radius: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.72);
  font: 700 12px/1.35 system-ui;
  text-align: center;
}
#panel-games .games.is-collapsed::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 48px;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.35));
  pointer-events: none;
}
#panel-games .games-meta {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin: 0.25rem 0 0.5rem;
  font: 500 12px/1.2 system-ui;
  opacity: 0.8;
  justify-content: center;
}
#panel-games .games-meta .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
  margin-right: 0.35rem;
}
#panel-games .game-row {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr minmax(120px, 1.2fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition:
    transform 0.12s ease,
    background 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease;
  opacity: 0;
  transform: translateY(6px);
  animation: game-row-in 0.32s cubic-bezier(0.2, 0, 0.2, 1) forwards;
}
#panel-games .game-row:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}
#panel-games .game-row:focus-visible {
  outline: none;
  border-color: rgba(102, 192, 244, 0.72);
  box-shadow:
    0 0 0 3px rgba(102, 192, 244, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.22);
}
#panel-games .game-row:active {
  transform: translateY(0) scale(0.995);
}
#panel-games .game-row .label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font: 600 13px/1.2 system-ui;
}
#panel-games .game-row .label .swatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: var(--c, #8aa);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12) inset;
}
#panel-games .game-row .label .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#panel-games .game-row .sources {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
  min-width: 0;
}
#panel-games .game-row .source {
  flex: 0 0 auto;
  padding: 2px 5px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
  font: 700 9px/1 system-ui;
  text-transform: uppercase;
}
#panel-games .game-row .source-steam {
  border-color: rgba(102, 192, 244, 0.35);
  color: #b8e4ff;
}
#panel-games .game-row .bar {
  height: 10px;
  position: relative;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
#panel-games .game-row .bar > span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--c) 88%, white 0%),
    var(--c)
  );
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
#panel-games .game-row .count {
  font: 600 12px/1 system-ui;
  opacity: 0.9;
  white-space: nowrap;
}
#panel-games .games-toggle {
  display: flex;
  justify-content: center;
  margin: 18px 0 0;
}
#panel-games .games-toggle button {
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: 600 12px/1 system-ui;
  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease;
}
#panel-games .games-toggle button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.35);
}
@media (max-width: 700px) {
  #panel-games {
    --games-expanded-height: 320px;
  }
}
body.game-detail-open {
  overflow: hidden;
}
.game-detail-dialog {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.game-detail-dialog.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.game-detail-dialog.is-leaving {
  opacity: 0;
}
.game-detail__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(5, 9, 17, 0.72), rgba(5, 9, 17, 0.88)),
    rgba(0, 0, 0, 0.5);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.game-detail__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 560px);
  max-height: min(86vh, 720px);
  border-radius: 10px;
  border: 1px solid rgba(156, 220, 255, 0.28);
  background:
    radial-gradient(
      120% 90% at 0 0,
      color-mix(in srgb, var(--game-c, #66c0f4) 22%, transparent),
      transparent 52%
    ),
    linear-gradient(145deg, rgba(11, 22, 34, 0.98), rgba(7, 13, 24, 0.98));
  box-shadow:
    0 24px 78px rgba(0, 0, 0, 0.56),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #eef8ff;
  overflow: hidden;
  transform: translateY(12px) scale(0.98);
  transition:
    transform 0.2s ease,
    opacity 0.18s ease;
}
.game-detail-dialog.is-visible .game-detail__panel {
  transform: translateY(0) scale(1);
}
.game-detail-dialog.is-leaving .game-detail__panel {
  transform: translateY(8px) scale(0.98);
}
.game-detail__body {
  max-height: inherit;
  overflow: auto;
  padding: 18px;
  scrollbar-color: rgba(102, 192, 244, 0.55) rgba(255, 255, 255, 0.08);
  scrollbar-width: thin;
}
.game-detail__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 50;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(210, 241, 255, 0.28);
  background: rgba(18, 30, 46, 0.94);
  color: #eaf7ff;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  cursor: pointer;
}
.game-detail__close::before,
.game-detail__close::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  top: 16px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}
.game-detail__close::before {
  transform: rotate(45deg);
}
.game-detail__close::after {
  transform: rotate(-45deg);
}
.game-detail__hero {
  /* Prevent the mobile page header rules from moving this in-dialog hero. */
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none;
  z-index: 1;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-height: 116px;
  margin: 0 0 16px;
  padding: 18px 64px 18px 18px;
  border-radius: 10px;
  border: 1px solid rgba(139, 214, 255, 0.32);
  background:
    linear-gradient(
      115deg,
      color-mix(in srgb, var(--game-c, #66c0f4) 26%, rgba(9, 28, 48, 0.96))
        0%,
      rgba(12, 29, 48, 0.94) 48%,
      rgba(21, 34, 51, 0.92) 100%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.04) 0 1px,
      transparent 1px 12px
    );
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
  overflow: hidden;
  isolation: isolate;
}
.game-detail__hero::before {
  content: "";
  position: absolute;
  inset: auto 18px 14px 18px;
  z-index: -1;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--game-c, #66c0f4),
    rgba(255, 225, 151, 0.86),
    rgba(142, 220, 255, 0.18)
  );
  box-shadow: 0 0 18px color-mix(in srgb, var(--game-c, #66c0f4) 42%, transparent);
}
.game-detail__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.13),
    transparent 42%
  );
  pointer-events: none;
}
.game-detail__icon {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(210, 241, 255, 0.28);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 44%),
    color-mix(in srgb, var(--game-c, #66c0f4) 36%, rgba(7, 13, 24, 0.92));
  box-shadow:
    0 14px 26px rgba(0, 0, 0, 0.34),
    0 0 0 4px rgba(255, 255, 255, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.game-detail__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.game-detail__icon span {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--game-c, #66c0f4);
  box-shadow:
    0 0 0 7px rgba(255, 255, 255, 0.08),
    0 0 20px var(--game-c, #66c0f4);
}
.game-detail__title {
  min-width: 0;
}
.game-detail__title p {
  margin: 0 0 4px;
  color: #a8ddff;
  font: 900 12px/1.1 system-ui;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.game-detail__title h3 {
  margin: 0;
  color: #ffffff;
  font: 950 clamp(30px, 5vw, 48px) / 0.98 system-ui;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  text-shadow: 0 10px 26px rgba(0, 0, 0, 0.38);
}
.game-detail__sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.game-detail__source {
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(178, 226, 255, 0.3);
  background: rgba(7, 18, 32, 0.36);
  color: rgba(239, 249, 255, 0.86);
  font: 900 11px/1 system-ui;
  text-transform: uppercase;
}
.game-detail__source--steam {
  border-color: rgba(102, 192, 244, 0.35);
  color: #b8e4ff;
}
.game-detail__impact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.game-detail__stat {
  min-width: 0;
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.052);
}
.game-detail__stat span,
.game-detail__stat small {
  display: block;
  color: rgba(216, 239, 255, 0.66);
  font: 800 10px/1.2 system-ui;
  letter-spacing: 0;
  text-transform: uppercase;
}
.game-detail__stat strong {
  display: block;
  margin: 5px 0 3px;
  color: #ffffff;
  font: 900 19px/1.1 system-ui;
  overflow-wrap: anywhere;
}
.game-detail__stat--percent {
  grid-column: 1 / -1;
  border-color: rgba(102, 192, 244, 0.36);
  background:
    radial-gradient(
      120% 120% at 0 0,
      rgba(102, 192, 244, 0.2),
      transparent 58%
    ),
    rgba(255, 255, 255, 0.07);
  box-shadow:
    0 14px 32px rgba(30, 126, 186, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.game-detail__stat--percent strong {
  color: #8fdcff;
  font-size: clamp(34px, 7vw, 52px);
  line-height: 0.95;
  text-shadow: 0 0 22px rgba(102, 192, 244, 0.28);
}
.game-detail__stat--percent small {
  color: rgba(229, 247, 255, 0.82);
}
.game-detail__note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 213, 130, 0.24);
  background: rgba(255, 213, 130, 0.08);
  color: rgba(255, 237, 198, 0.88);
  font: 700 12px/1.35 system-ui;
}
.game-detail__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 9px;
  margin-top: 16px;
}
.game-detail__action {
  min-height: 40px;
  display: inline-grid;
  place-items: center;
  padding: 0 13px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
  color: #eaf7ff;
  font: 900 12px/1 system-ui;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.14s ease,
    filter 0.14s ease,
    border-color 0.14s ease;
}
.game-detail__action--primary {
  border-color: rgba(102, 192, 244, 0.44);
  background: linear-gradient(180deg, #66c0f4, #2f78b7);
  color: #06111f;
  box-shadow: 0 10px 24px rgba(47, 120, 183, 0.22);
}
.game-detail__action:hover,
.game-detail__action:focus-visible,
.game-detail__close:hover,
.game-detail__close:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.28);
  outline: none;
}
@media (max-width: 640px) {
  .game-detail-dialog {
    align-items: end;
    padding: 0;
    padding-top: max(10px, env(safe-area-inset-top, 0px));
  }
  .game-detail__panel {
    position: fixed;
    top: max(10px, env(safe-area-inset-top, 0px));
    bottom: 0;
    width: 100%;
    height: auto;
    max-height: none;
    border-radius: 22px 22px 0 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    box-shadow:
      0 -22px 60px rgba(0, 0, 0, 0.62),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transform: translateY(100%);
  }
  .game-detail__panel::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 50%;
    z-index: 4;
    width: 46px;
    height: 4px;
    border-radius: 999px;
    background: rgba(207, 238, 255, 0.36);
    transform: translateX(-50%);
  }
  .game-detail-dialog.is-visible .game-detail__panel {
    transform: translateY(0);
  }
  .game-detail-dialog.is-leaving .game-detail__panel {
    transform: translateY(100%);
  }
  .game-detail__body {
    height: 100%;
    max-height: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 26px 12px max(14px, env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
  }
  .game-detail__close {
    top: 18px;
    right: 12px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }
  .game-detail__close::before,
  .game-detail__close::after {
    left: 11px;
    right: 11px;
    top: 20px;
  }
  .game-detail__hero {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
    min-height: 100px;
    margin-bottom: 10px;
    padding: 14px 58px 14px 12px;
    border-radius: 14px;
    box-shadow:
      0 12px 26px rgba(0, 0, 0, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }
  .game-detail__hero::before {
    right: 14px;
    bottom: 10px;
    left: 14px;
  }
  .game-detail__icon {
    width: 58px;
    height: 58px;
    border-radius: 12px;
    box-shadow:
      0 10px 18px rgba(0, 0, 0, 0.32),
      0 0 0 3px rgba(255, 255, 255, 0.052),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
  .game-detail__title p {
    font-size: 10px;
    margin-bottom: 3px;
  }
  .game-detail__title h3 {
    font-size: clamp(24px, 8.4vw, 34px);
    line-height: 0.98;
  }
  .game-detail__sources {
    margin-top: 8px;
  }
  .game-detail__source {
    padding: 5px 8px;
    font-size: 10px;
  }
  .game-detail__impact {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 10px;
  }
  .game-detail__stat {
    padding: 12px;
    border-radius: 11px;
  }
  .game-detail__stat strong {
    font-size: 21px;
  }
  .game-detail__stat--percent {
    min-height: 118px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .game-detail__stat--percent strong {
    margin: 8px 0 5px;
    font-size: clamp(48px, 18vw, 70px);
  }
  .game-detail__actions {
    position: sticky;
    bottom: 0;
    grid-template-columns: 1fr;
    margin: 12px -12px 0;
    padding: 12px 12px max(12px, env(safe-area-inset-bottom, 0px));
    background: linear-gradient(
      180deg,
      rgba(7, 13, 24, 0),
      rgba(7, 13, 24, 0.96) 28%
    );
  }
  .game-detail__action {
    min-height: 46px;
    border-radius: 11px;
    font-size: 13px;
  }
}
@media (max-width: 380px) {
  .game-detail__hero {
    grid-template-columns: 52px minmax(0, 1fr);
    min-height: 92px;
    padding-right: 54px;
  }
  .game-detail__icon {
    width: 52px;
    height: 52px;
  }
  .game-detail__title h3 {
    font-size: clamp(22px, 8vw, 30px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .game-detail-dialog,
  .game-detail__panel,
  .game-detail__action,
  .game-detail__close {
    transition: none !important;
  }
}
.steam-link-panel {
  margin-top: 14px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(102, 192, 244, 0.26);
  background:
    linear-gradient(135deg, rgba(16, 33, 53, 0.92), rgba(9, 18, 32, 0.92)),
    rgba(255, 255, 255, 0.05);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  filter: brightness(1.05);
}
.steam-link-head,
.steam-link-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 12px;
}
.steam-link-empty {
  justify-content: space-between;
}
.steam-link-brand {
  position: relative;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 36%, #ffffff 0 8%, transparent 9%),
    radial-gradient(
      circle at 36% 36%,
      #66c0f4 0 22%,
      #1b5f8f 23% 44%,
      #102b44 45% 100%
    );
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 0 18px rgba(102, 192, 244, 0.2);
}
.steam-link-brand::before,
.steam-link-brand::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #dff4ff;
}
.steam-link-brand::before {
  width: 11px;
  height: 11px;
  right: 7px;
  top: 8px;
  box-shadow: 0 0 0 4px #1b5f8f;
}
.steam-link-brand::after {
  width: 9px;
  height: 9px;
  left: 8px;
  bottom: 8px;
  box-shadow: 0 0 0 3px #1b5f8f;
}
.steam-link-brand-arm {
  position: absolute;
  width: 18px;
  height: 5px;
  right: 12px;
  bottom: 14px;
  border-radius: 999px;
  background: #1b5f8f;
  transform: rotate(-24deg);
  transform-origin: right center;
}
.steam-link-avatar {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  object-fit: cover;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.1);
}
.steam-link-avatar--empty {
  display: inline-grid;
  place-items: center;
  color: #b8e4ff;
  font-weight: 800;
}
.steam-link-copy {
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
}
.steam-link-label {
  color: #b8e4ff;
  font: 800 11px/1.2 system-ui;
  letter-spacing: 0;
  text-transform: uppercase;
}
.steam-link-name {
  display: block;
  color: #fff;
  font: 800 13px/1.25 system-ui;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.steam-link-name:hover {
  text-decoration: underline;
}
.steam-link-meta {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.74);
  font: 500 11px/1.35 system-ui;
}
.steam-link-action {
  margin-top: 12px;
  width: 100%;
  border: 1px solid rgba(102, 192, 244, 0.42) !important;
  background: linear-gradient(180deg, #66c0f4, #2f78b7) !important;
  color: #06111f !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  box-shadow:
    0 8px 18px rgba(47, 120, 183, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
}
.steam-link-empty .steam-link-action {
  margin-top: 0;
  width: auto;
  flex: 0 0 auto;
  min-width: 132px;
  padding: 0.58rem 0.82rem;
}
.steam-link-action:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.steam-link-action:disabled {
  cursor: wait;
  filter: grayscale(0.2) brightness(0.9);
  opacity: 0.78;
}
body.steam-dialog-open {
  overflow: hidden;
}
.steam-dialog {
  position: fixed;
  inset: 0;
  z-index: 12050;
  display: grid;
  place-items: center;
  padding: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.steam-dialog.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.steam-dialog.is-leaving {
  opacity: 0;
}
.steam-dialog__backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 10, 18, 0.56), rgba(4, 10, 18, 0.76)),
    rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(8px);
}
.steam-dialog__panel {
  position: relative;
  width: min(100%, 430px);
  padding: 18px;
  border-radius: 8px;
  border: 1px solid rgba(102, 192, 244, 0.32);
  background:
    radial-gradient(
      110% 100% at 0 0,
      rgba(102, 192, 244, 0.16),
      transparent 54%
    ),
    linear-gradient(145deg, rgba(10, 22, 36, 0.98), rgba(7, 15, 27, 0.98));
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #eef8ff;
  transform: translateY(10px) scale(0.98);
  transition:
    transform 0.2s ease,
    opacity 0.18s ease;
  overflow: hidden;
}
.steam-dialog.is-visible .steam-dialog__panel {
  transform: translateY(0) scale(1);
}
.steam-dialog.is-leaving .steam-dialog__panel {
  transform: translateY(8px) scale(0.98);
}
.steam-dialog__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.06);
  color: #dff4ff;
  cursor: pointer;
}
.steam-dialog__close::before,
.steam-dialog__close::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  top: 15px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}
.steam-dialog__close::before {
  transform: rotate(45deg);
}
.steam-dialog__close::after {
  transform: rotate(-45deg);
}
.steam-dialog__close:hover,
.steam-dialog__btn:hover {
  transform: translateY(-1px);
}
.steam-dialog__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding-right: 34px;
}
.steam-dialog__avatar,
.steam-dialog__mark {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  flex: 0 0 auto;
}
.steam-dialog__avatar {
  object-fit: cover;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.13);
}
.steam-dialog__mark {
  position: relative;
  display: inline-grid;
  place-items: center;
  background:
    radial-gradient(circle at 38% 36%, #ffffff 0 8%, transparent 9%),
    radial-gradient(
      circle at 36% 36%,
      #66c0f4 0 22%,
      #1b5f8f 23% 44%,
      #102b44 45% 100%
    );
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.13) inset,
    0 10px 28px rgba(102, 192, 244, 0.24);
}
.steam-dialog__mark::before,
.steam-dialog__mark::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #dff4ff;
}
.steam-dialog__mark::before {
  width: 13px;
  height: 13px;
  right: 9px;
  top: 10px;
  box-shadow: 0 0 0 5px #1b5f8f;
}
.steam-dialog__mark::after {
  width: 10px;
  height: 10px;
  left: 10px;
  bottom: 10px;
  box-shadow: 0 0 0 4px #1b5f8f;
}
.steam-dialog__mark span {
  position: absolute;
  width: 22px;
  height: 6px;
  right: 15px;
  bottom: 19px;
  border-radius: 999px;
  background: #1b5f8f;
  transform: rotate(-24deg);
  transform-origin: right center;
}
.steam-dialog__eyebrow {
  margin: 0 0 3px;
  color: #91d7ff;
  font: 800 11px/1.1 system-ui;
  letter-spacing: 0;
  text-transform: uppercase;
}
.steam-dialog__intro h3 {
  margin: 0;
  color: #ffffff;
  font: 900 22px/1.12 system-ui;
  letter-spacing: 0;
}
.steam-dialog__message {
  margin: 15px 0 0;
  color: rgba(238, 248, 255, 0.82);
  font: 600 14px/1.45 system-ui;
}
.steam-dialog__detail {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 115, 115, 0.28);
  background: rgba(255, 69, 69, 0.1);
  color: #ffc6c6;
  font: 700 12px/1.35 system-ui;
}
.steam-dialog__account {
  display: grid;
  gap: 3px;
  margin-top: 14px;
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.05);
}
.steam-dialog__account span {
  color: rgba(216, 239, 255, 0.68);
  font: 800 10px/1.1 system-ui;
  letter-spacing: 0;
  text-transform: uppercase;
}
.steam-dialog__account strong {
  min-width: 0;
  overflow: hidden;
  color: #ffffff;
  font: 800 14px/1.25 system-ui;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.steam-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.steam-dialog__btn {
  min-height: 40px;
  padding: 0 15px;
  border-radius: 8px;
  border: 1px solid transparent;
  font: 900 13px/1 system-ui;
  cursor: pointer;
  transition:
    transform 0.14s ease,
    filter 0.14s ease,
    border-color 0.14s ease;
}
.steam-dialog__btn--ghost {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #eaf7ff;
}
.steam-dialog__btn--danger {
  border-color: rgba(255, 119, 119, 0.38);
  background: linear-gradient(180deg, #ff7373, #d93d4c);
  color: #210407;
  box-shadow: 0 10px 24px rgba(217, 61, 76, 0.22);
}
.steam-dialog__btn--primary {
  border-color: rgba(102, 192, 244, 0.42);
  background: linear-gradient(180deg, #66c0f4, #2f78b7);
  color: #06111f;
  box-shadow: 0 10px 24px rgba(47, 120, 183, 0.22);
}
.steam-dialog--error .steam-dialog__panel {
  border-color: rgba(255, 119, 119, 0.3);
}
.steam-dialog--success .steam-dialog__panel {
  border-color: rgba(29, 231, 214, 0.32);
}
.steam-dialog--success .steam-dialog__mark {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.13) inset,
    0 10px 28px rgba(29, 231, 214, 0.24);
}
@media (max-width: 520px) {
  .steam-dialog {
    align-items: end;
    padding: 12px;
  }
  .steam-dialog__panel {
    width: 100%;
  }
  .steam-dialog__actions {
    flex-direction: column-reverse;
  }
  .steam-dialog__btn {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .steam-dialog,
  .steam-dialog__panel,
  .steam-dialog__btn {
    transition: none !important;
  }
}
@media (max-width: 520px) {
  .steam-link-empty {
    align-items: stretch;
    flex-wrap: wrap;
  }
  .steam-link-empty .steam-link-action {
    width: 100%;
  }
}
@keyframes game-row-in {
  to {
    opacity: 1;
    transform: none;
  }
}

/* Respect de l’accessibilité */
@media (prefers-reduced-motion: reduce) {
  #panel-games .games {
    transition: none !important;
  }
  #panel-games .game-row {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}
/* On cache les tips internes aux boutons (on va utiliser un portail global) */
.chip-tip-host .chip-tip {
  display: none !important;
}

/* ——— Tooltip “chip” style Erwayr ——— */
.chip-tip-pop {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-50%, -8px) scale(0.98);
  opacity: 0;
  /* fond bleu/verre comme tes cards */
  background: linear-gradient(
    180deg,
    rgba(18, 34, 52, 0.92),
    rgba(18, 34, 52, 0.88)
  );
  color: #eaf6ff;
  padding: 8px 12px;
  border-radius: 12px;

  /* liseré + glow d’accent (reuse var si dispo) */
  --accent: var(--clip-accent, #8bd3ff);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.45),
    0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* lisibilité */
  font:
    600 12px/1.2 system-ui,
    Segoe UI,
    Roboto,
    sans-serif;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  white-space: nowrap;

  /* effet verre subtil */
  backdrop-filter: saturate(1.05) blur(6px);

  pointer-events: none;
  z-index: 999999;

  transition:
    opacity 0.14s ease,
    transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.2s ease;
  will-change: transform, opacity, box-shadow;
}

/* petit caret centré, même “verre” + liseré */
.chip-tip-pop::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: inherit;
  border: inherit;
  border-top: 0;
  border-left: 0;
  box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.35);
  /* évite le double-trait en bas */
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.chip-tip-pop.is-visible {
  opacity: 1;
  transform: translate(-50%, -12px) scale(1);
}

/* compact sur mobile + respect accessibilité */
@media (max-width: 520px) {
  .chip-tip-pop {
    font-size: 11px;
    padding: 7px 10px;
    border-radius: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .chip-tip-pop {
    transition: none;
  }
}

.chip-tip-pop.show {
  opacity: 1;
  transform: translate(-50%, -12px);
}
/* ====== Look "abonnés uniquement" ====== */
#twcfg .twcfg-locked {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  #twcfg .twcfg-locked {
    align-items: stretch;
  }
}
#twcfg .locked-hero {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-radius: 20px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
/* anneau glow */
#twcfg .locked-hero::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: conic-gradient(from 180deg, #7c5cff, #00e4ff, #7c5cff);
  filter: blur(12px);
  opacity: 0.18;
  z-index: 0;
}
#twcfg .locked-hero > * {
  position: relative;
  z-index: 1;
}
#twcfg .lock-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border);
  font-size: 28px;
  margin-bottom: 12px;
  animation: twpulse 1.8s ease-in-out infinite;
}
#twcfg .locked-hero h3 {
  margin: 0 0 6px;
  font-size: 1.4rem;
}
#twcfg .locked-hero p {
  margin: 0 0 8px;
  color: var(--text-dim);
}
#twcfg .perk-list {
  margin: 12px 0 16px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
#twcfg .perk-list li {
  display: flex;
  gap: 8px;
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px;
}
#twcfg .perk-list li::before {
  content: "✔";
  opacity: 0.9;
}

@keyframes twpulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}
/* === CTA S’abonner — style arcade qui colle au site === */
#twcfg .btn.btn-primary {
  /* palette du site */
  --edge: #0b2b66; /* ombre “rebord” */
  font-family: "Press Start 2P", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;

  color: #fff;
  text-decoration: none;
  background: linear-gradient(180deg, var(--primary-light), var(--primary));
  border: 2px solid #ffffff;
  border-radius: 10px;

  /* effet “bloc” + glow */
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.08) inset,
    0 4px 0 var(--edge),
    0 8px 18px rgba(0, 0, 0, 0.45);
  transition:
    transform 0.12s ease,
    box-shadow 0.18s ease,
    background 0.25s ease;
  will-change: transform, box-shadow, background;
  position: relative;
}

#twcfg .btn.btn-primary::after {
  /* reflet diagonal subtil */
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 8px;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.18),
    transparent 40%
  );
  mix-blend-mode: screen;
  pointer-events: none;
}

#twcfg .btn.btn-primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #5fb4ff, var(--primary-light));
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.12) inset,
    0 6px 0 var(--edge),
    0 14px 24px rgba(0, 0, 0, 0.5),
    0 0 10px var(--primary-light);
}

#twcfg .btn.btn-primary:active {
  transform: translateY(0);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.12) inset,
    0 2px 0 var(--edge),
    0 8px 16px rgba(0, 0, 0, 0.4);
}

#twcfg .btn.btn-primary:focus-visible {
  outline: 2px dashed #ffd700;
  outline-offset: 3px;
}

/* état désactivé si besoin */
#twcfg .btn.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  filter: grayscale(0.2);
}

@media (prefers-reduced-motion: reduce) {
  #twcfg .btn.btn-primary {
    transition: none;
  }
}
/* ====== Bloc "Titre affiché" ====== */

.rankname-selector {
  --rk-bg: #041624;
  --rk-bg-inner: radial-gradient(
    circle at 0 0,
    rgba(255, 255, 255, 0.06),
    transparent 55%
  );
  --rk-border: rgba(0, 255, 255, 0.38);
  --rk-border-soft: rgba(255, 255, 255, 0.06);
  --rk-glow: rgba(0, 220, 255, 0.45);
  --rk-text: #f6fbff;
  --rk-muted: #8ea8c6;
  --rk-accent1: #2ad0ff;
  --rk-accent2: #7c5cff;

  margin-top: 10px;
  padding: 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.rankname-selector.hidden {
  display: none;
}

.rankname-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(236, 246, 255, 0.72);
  white-space: normal;
}

.rankname-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rk-accent1), var(--rk-accent2));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 14px rgba(42, 208, 255, 0.28);
}

.inspector-title-frame {
  margin-top: 10px;
  padding: 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at 16% 0, rgba(255, 255, 255, 0.12), transparent 48%),
    linear-gradient(145deg, rgba(5, 18, 31, 0.76), rgba(8, 30, 46, 0.56));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 16px 28px rgba(0, 0, 0, 0.22);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.inspector-title-frame[hidden] {
  display: none !important;
}

.inspector-title-frame > * {
  position: relative;
  z-index: 1;
}

.inspector-title-frame__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.inspector-title-frame .rankname-label {
  color: rgba(255, 255, 255, 0.86);
}

.inspector-title-frame #rankname-selector.rankname-selector {
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* cas désactivé / pas de titres */

.rankname-selector.is-disabled,
.rankname-selector[hidden] {
  opacity: 0.55;
  pointer-events: none;
}
.rank-selector {
  margin-top: 10px;
  position: relative;
}

.participant-card-image-controls {
  margin-top: 8px;
  display: flex;
  justify-content: center;
}

.participant-card-image-controls[hidden] {
  display: none !important;
}

#clear-participant-card-image.btn {
  border: 1px solid rgba(255, 163, 163, 0.4);
  background: linear-gradient(
    135deg,
    rgba(72, 26, 26, 0.88),
    rgba(122, 44, 44, 0.92)
  );
  color: #ffe9e9;
  border-radius: 999px;
  padding: 0.42rem 0.9rem;
  font:
    700 0.75rem/1 "Segoe UI",
    sans-serif;
  letter-spacing: 0.02em;
  transition:
    transform 0.12s ease,
    border-color 0.12s ease,
    filter 0.12s ease;
  filter: brightness(1.05);
}

#clear-participant-card-image.btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 201, 201, 0.58);
  filter: brightness(1.05);
}

#clear-participant-card-image.btn:disabled {
  opacity: 0.7;
  cursor: wait;
  transform: none;
}

/* Le bloc identity doit être un repère */
.inspector-card.inspector-identity {
  position: relative;
  overflow: hidden;
  --rank-accent: rgba(124, 92, 255, 0.55);
}


#rankname-selector .rankname-surface.guardian-preview.profile-frame-card-card-emote::before {
  z-index: 4;
}

#rankname-selector .rankname-surface.guardian-preview.profile-frame-card-card-emote::after {
  z-index: 2;
}

#rankname-selector .rankname-surface.guardian-preview.profile-frame-card-card-emote-legendary::before {
  z-index: 4;
}

#rankname-selector .rankname-surface.guardian-preview.profile-frame-card-card-emote-legendary::after {
  z-index: 0;
}

#rankname-selector .rankname-surface.guardian-preview.profile-frame-card-card-emote-epic::before {
  z-index: 0;
}

#rankname-selector .rankname-surface.guardian-preview.profile-frame-card-card-emote-epic::after {
  z-index: 1;
}

#rankname-selector .rankname-surface.guardian-preview.profile-frame-card-card-emote-diam::before,
#rankname-selector .rankname-surface.guardian-preview.profile-frame-card-card-emote-diams::before {
  z-index: 4;
}

#rankname-selector .rankname-surface.guardian-preview.profile-frame-card-card-emote-diam::after,
#rankname-selector .rankname-surface.guardian-preview.profile-frame-card-card-emote-diams::after {
  z-index: 1;
}

#rankname-selector .rankname-surface.guardian-preview.profile-frame-card-card-pointchain::before {
  z-index: 4;
}

#rankname-selector .rankname-surface.guardian-preview.profile-frame-card-card-pointchain::after {
  z-index: 0;
}

#rankname-selector .rankname-surface.guardian-preview.profile-frame-card-card-pointchain-epic::before {
  z-index: 4;
}

#rankname-selector .rankname-surface.guardian-preview.profile-frame-card-card-pointchain-epic::after {
  z-index: 0;
}

#rankname-selector .rankname-surface.guardian-preview.profile-frame-card-card-pointchain-legendary::before {
  z-index: 4;
}

#rankname-selector .rankname-surface.guardian-preview.profile-frame-card-card-pointchain-legendary::after {
  z-index: 0;
}

#rankname-selector .rankname-surface.guardian-preview.profile-frame-card-card-pointchain-diam::before,
#rankname-selector .rankname-surface.guardian-preview.profile-frame-card-card-pointchain-diams::before {
  z-index: 4;
}

#rankname-selector .rankname-surface.guardian-preview.profile-frame-card-card-pointchain-diam::after,
#rankname-selector .rankname-surface.guardian-preview.profile-frame-card-card-pointchain-diams::after {
  z-index: 1;
}

#rankname-selector .rankname-surface.guardian-preview.profile-frame-card-card-presence::before {
  z-index: 4;
}

#rankname-selector .rankname-surface.guardian-preview.profile-frame-card-card-presence::after {
  z-index: 0;
}

/* ===== Rank corner (badge) ===== */
/* Top-left comme sur ton design.
   Si tu veux top-right: remplace left par right, et supprime left. */
#inspector-rank-corner.inspector-rank-corner {
  --s: 44px; /* taille du badge */
  position: absolute;
  top: 10px;
  left: 10px;

  width: var(--s);
  height: var(--s);
  border-radius: 14px;
  pointer-events: none;
  z-index: 10;

  backdrop-filter: blur(8px) saturate(1.1);
  transform: translateZ(0);
}

/* petit “shine” diagonal */
#inspector-rank-corner.inspector-rank-corner::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 12px;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.22),
    transparent 45%
  );
  opacity: 0.55;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* halo externe légèrement animé (désactivable par reduce motion via ton reset global) */
#inspector-rank-corner.inspector-rank-corner::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 18px;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--rank-accent) 35%, transparent),
    transparent 60%
  );
  opacity: 0.55;
  filter: blur(10px);
  animation: rankCornerPulse 2.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes rankCornerPulse {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(0.98);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.04);
  }
}

/* ===== Le numéro ===== */
#inspector-rank-corner .rank-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;

  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    sans-serif;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -1px;
  line-height: 1;

  color: rgba(255, 255, 255, 0.98);

  /* contour cross-browser (meilleur que -webkit-text-stroke seul) */
  text-shadow:
    -1px 0 0 rgba(0, 0, 0, 0.55),
    1px 0 0 rgba(0, 0, 0, 0.55),
    0 -1px 0 rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(0, 0, 0, 0.55),
    0 2px 0 rgba(0, 0, 0, 0.35),
    0 10px 18px rgba(0, 0, 0, 0.45);
}

/* cacher si pas de rang */
#inspector-rank-corner.is-hidden {
  display: none;
}

/* ===== Accent Top 1 / 2 / 3 (tu gardes ton système) ===== */
.inspector-card.inspector-identity.is-top1 {
  --rank-accent: rgba(255, 215, 120, 0.75);
}
.inspector-card.inspector-identity.is-top2 {
  --rank-accent: rgba(210, 230, 255, 0.7);
}
.inspector-card.inspector-identity.is-top3 {
  --rank-accent: rgba(255, 160, 90, 0.7);
}
.panel-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
/* --- Anniversaire: lisible sur n'importe quel background --- */
#stat-bday {
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  gap: 0.45rem;
  padding: 1px;
  padding-right: 0;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.94);
  color: #111;

  border: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);

  /* optionnel (si supporté) : effet “verre” */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Respecte le hidden HTML */
#stat-bday #stat-bday-edit[hidden] {
  display: none !important;
}

#stat-bday #stat-bday-text {
  font-weight: 800;
  letter-spacing: 0.2px;
}

/* zone edit */
#stat-bday #stat-bday-edit {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

/* input date lisible */
#stat-bday-input {
  -webkit-appearance: none;
  appearance: none;

  background: #fff;
  color: #111;

  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 10px;

  padding: 0.35rem 0.5rem;
  font:
    700 13px/1.2 system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* bouton compact (sans dépendre du background) */
#stat-bday-save {
  padding: 0.38rem 0.65rem;
  border-radius: 10px;
  font:
    800 12px/1 system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial;

  border: 1px solid rgba(0, 0, 0, 0.22);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

/* mobile : évite l’écrasement */
@media (max-width: 520px) {
  #stat-bday {
    justify-content: space-between;
  }
  #stat-bday-input {
    width: 100%;
  }
}

.bday-chest {
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transform: translateZ(0);
}

.bday-chest:hover {
  background: rgba(255, 255, 255, 0.08);
}

.bday-chest:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(1);
}

.bday-chest.is-claimed::after {
  content: "✓";
  position: absolute;
  transform: translate(10px, -10px);
  font: 800 12px/1 system-ui;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 2px 6px;
}
/* === Coffre anniversaire : bulle flottante === */

/* IMPORTANT :
   - On centre verticalement SANS transform (top:50% + margin-top)
   - Comme ça, l'animation peut utiliser transform sans être écrasée.
*/
#stat-bday-chest.bday-chest {
  position: absolute;
  right: -6px;
  top: -26%;
  margin-top: -19px; /* = -(height/2) si height=38px */

  width: 38px;
  height: 38px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(255, 255, 255, 0.35);
  background: radial-gradient(
    circle at 30% 28%,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.3) 35%,
    rgba(120, 190, 255, 0.22) 60%,
    rgba(130, 90, 255, 0.16) 100%
  );
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.38),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  /* Animations (bulle savon) */
  will-change: transform, box-shadow, filter;
  animation:
    bdayBubbleFloat 4.6s ease-in-out infinite,
    bdayBubbleGlow 3.2s ease-in-out infinite;

  /* Petit rendu "sticker" */
  font-size: 18px;
  line-height: 1;
}

#stat-bday-chest[hidden] {
  display: none !important;
}

/* Reflet "bulle" */
#stat-bday-chest.bday-chest::before {
  content: "";
  position: absolute;
  inset: 3px 4px auto auto;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.85),
    rgba(255, 255, 255, 0) 70%
  );
  transform: rotate(18deg);
  opacity: 0.85;
  pointer-events: none;
}

/* Micro scintillement */
#stat-bday-chest.bday-chest::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  opacity: 0.8;
  pointer-events: none;
}

#stat-bday-chest.bday-chest:hover {
  filter: saturate(1.1);
}
#stat-bday-chest.bday-chest:active {
  transform: scale(0.96);
}

/* État "déjà récupéré" */
#stat-bday-chest.bday-chest.is-claimed,
#stat-bday-chest.bday-chest:disabled {
  cursor: default;
  opacity: 0.65;
  filter: grayscale(1);
  animation: none;
}

/* Animation bulle : haut/bas + légère rotation */
@keyframes bdayBubbleFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-9px) rotate(2deg);
  }
}

/* Glow doux */
@keyframes bdayBubbleGlow {
  0%,
  100% {
    box-shadow:
      0 12px 28px rgba(0, 0, 0, 0.38),
      inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  }
  50% {
    box-shadow:
      0 16px 36px rgba(0, 0, 0, 0.46),
      0 0 18px rgba(140, 120, 255, 0.28),
      inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  }
}

/* Si ton site (ou OBS) active "reduce motion", on FORCE quand même l’anim */
@media (prefers-reduced-motion: reduce) {
  #stat-bday-chest.bday-chest {
    animation:
      bdayBubbleFloat 4.6s ease-in-out infinite,
      bdayBubbleGlow 3.2s ease-in-out infinite;
  }
}
/* Disparition après clic */
#stat-bday-chest.bday-chest.is-vanishing {
  animation: none !important;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.85);
  filter: blur(2px);
  transition:
    opacity 260ms ease,
    transform 260ms ease,
    filter 260ms ease;
}

/* ============================================================
   BadgeDex Panel (Pokemon collectible vibe)
============================================================ */
#panel-badges {
  --dex-bg-0: #0a1734;
  --dex-bg-1: #143a71;
  --dex-bg-2: #23345d;
  --dex-frame: rgba(255, 221, 122, 0.6);
  --dex-frame-soft: rgba(255, 221, 122, 0.28);
  --dex-text: #fef9e8;
  --dex-muted: rgba(236, 244, 255, 0.8);
  --dex-chip-base: rgba(18, 37, 80, 0.75);
  --dex-shadow:
    0 20px 48px rgba(1, 7, 20, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

#user-inspector-section + #inspector-badges-section {
  margin-top: 12px;
}

#inspector-badges-section #panel-badges {
  width: 100%;
  border-radius: 25px;
}

#panel-badges .panel {
  width: 100%;
  position: relative;
  isolation: isolate;
  border-radius: 22px;
  border: 2px solid var(--dex-frame);
  background:
    radial-gradient(
      130% 90% at 8% 0%,
      rgba(255, 255, 255, 0.24),
      transparent 60%
    ),
    radial-gradient(
      130% 100% at 95% 100%,
      rgba(137, 189, 255, 0.28),
      transparent 56%
    ),
    linear-gradient(
      150deg,
      var(--dex-bg-0),
      var(--dex-bg-1) 48%,
      var(--dex-bg-2)
    );
  box-shadow: var(--dex-shadow);
  overflow: hidden;
}

#panel-badges .panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.03) 0 2px,
      rgba(255, 255, 255, 0) 2px 12px
    ),
    radial-gradient(
      circle at 20% 22%,
      rgba(255, 232, 170, 0.18),
      transparent 45%
    );
  mix-blend-mode: screen;
}

#panel-badges .panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(255, 255, 255, 0.18) 42%,
    transparent 64%
  );
  transform: translateX(-120%);
  animation: dexFoilPass 8.5s ease-in-out infinite;
}

#panel-badges .badge-summary,
#panel-badges #badges-earned {
  position: relative;
  z-index: 2;
}

#panel-badges h3 {
  margin: 0;
  color: var(--dex-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.6),
    0 0 14px rgba(255, 209, 96, 0.32);
  font:
    700 clamp(0.76rem, 1.5vw, 0.94rem) / 1.2 "Press Start 2P",
    "Trebuchet MS",
    sans-serif;
}

#panel-badges .badge-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--dex-frame-soft);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.16),
      rgba(255, 255, 255, 0.04)
    ),
    rgba(10, 24, 58, 0.62);
  color: var(--dex-muted);
  font:
    700 11px/1.2 "Trebuchet MS",
    Verdana,
    sans-serif;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

#panel-badges .badge-summary .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #fbe386;
  box-shadow:
    0 0 0 2px rgba(251, 227, 134, 0.28),
    0 0 12px rgba(251, 227, 134, 0.7);
  animation: badgeDotPulse 1.5s ease-in-out infinite;
}

#panel-badges .badge-summary .badge-summary-sep {
  opacity: 0.42;
}

#panel-badges .badge-summary .badge-summary-pct {
  margin-left: 2px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 217, 109, 0.52);
  background: linear-gradient(
    145deg,
    rgba(255, 217, 109, 0.34),
    rgba(255, 157, 63, 0.28)
  );
  color: #fff6d7;
  font-weight: 800;
}

#panel-badges #badges-earned {
  display: grid;
  gap: 10px;
}

#panel-badges .badge-row {
  --row-glow: rgba(96, 177, 255, 0.28);
  --row-border: rgba(156, 199, 255, 0.28);
  display: grid;
  grid-template-columns: minmax(145px, 190px) minmax(0, 1.2fr) 30px minmax(
      0,
      1fr
    );
  align-items: center;
  gap: 10px 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--row-border);
  background:
    linear-gradient(155deg, rgba(8, 21, 51, 0.82), rgba(23, 45, 93, 0.56)),
    rgba(8, 22, 56, 0.55);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  min-width: 0;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease;
}

#panel-badges .badge-row::before {
  content: "";
  position: absolute;
  inset: -20% 50% -20% -40%;
  background: radial-gradient(
    closest-side,
    rgba(155, 210, 255, 0.2),
    rgba(155, 210, 255, 0)
  );
  opacity: 0.55;
  pointer-events: none;
}

#panel-badges .badge-row:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 221, 122, 0.46);
  box-shadow:
    0 15px 34px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 221, 122, 0.2) inset;
}

#panel-badges .badge-row > * {
  min-width: 0;
}

#panel-badges .badge-row[data-family="rank"] {
  --row-glow: rgba(255, 208, 104, 0.32);
  --row-border: rgba(255, 208, 104, 0.34);
}
#panel-badges .badge-row[data-family="sub"] {
  --row-glow: rgba(122, 221, 255, 0.3);
  --row-border: rgba(122, 221, 255, 0.32);
}
#panel-badges .badge-row[data-family="streak"] {
  --row-glow: rgba(255, 153, 104, 0.3);
  --row-border: rgba(255, 153, 104, 0.33);
}
#panel-badges .badge-row[data-family="uptime"] {
  --row-glow: rgba(121, 255, 218, 0.3);
  --row-border: rgba(121, 255, 218, 0.32);
}
#panel-badges .badge-row[data-family="wins"] {
  --row-glow: rgba(255, 212, 92, 0.32);
  --row-border: rgba(255, 212, 92, 0.36);
}
#panel-badges .badge-row[data-family="guardian"] {
  --row-glow: rgba(192, 146, 255, 0.32);
  --row-border: rgba(192, 146, 255, 0.36);
}
#panel-badges .badge-row[data-family="special"] {
  --row-glow: rgba(226, 166, 255, 0.3);
  --row-border: rgba(226, 166, 255, 0.32);
}

#panel-badges .badge-row.is-complete {
  grid-template-columns: minmax(145px, 190px) minmax(0, 1fr);
  border-color: rgba(113, 255, 206, 0.52);
  background:
    linear-gradient(155deg, rgba(13, 58, 76, 0.84), rgba(12, 33, 72, 0.58)),
    rgba(8, 22, 56, 0.66);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

#panel-badges .badge-row.is-complete .row-arrow,
#panel-badges .badge-row.is-complete .row-goals {
  display: none;
}

#panel-badges .row-label {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  padding: 7px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.16),
      rgba(255, 255, 255, 0.02)
    ),
    rgba(14, 34, 76, 0.54);
  position: relative;
}

#panel-badges .row-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 999px;
  background: var(--row-glow);
}

#panel-badges .row-label .row-icon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 14px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background:
    radial-gradient(
      circle at 28% 25%,
      rgba(255, 255, 255, 0.45),
      transparent 52%
    ),
    rgba(11, 31, 68, 0.95);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
}

#panel-badges .row-label .row-title {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font:
    700 10px/1.2 "Press Start 2P",
    "Trebuchet MS",
    sans-serif;
  text-transform: uppercase;
  color: #fff5cf;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

#panel-badges .row-label .row-count {
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.24),
      rgba(255, 255, 255, 0.06)
    ),
    rgba(15, 34, 77, 0.82);
  font:
    700 10px/1 "Press Start 2P",
    "Trebuchet MS",
    sans-serif;
  color: #fff5cb;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

#panel-badges .badge-row.is-complete .row-label::after {
  content: "SET COMPLET";
  position: absolute;
  right: 8px;
  top: -9px;
  font:
    700 8px/1 "Press Start 2P",
    "Trebuchet MS",
    sans-serif;
  letter-spacing: 0.04em;
  color: #11220c;
  padding: 4px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #87ffbf, #5ad8ff);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
}

#panel-badges .badge-row.is-complete .row-count {
  border-color: rgba(143, 255, 214, 0.72);
  color: #d7ffec;
}

#panel-badges .row-chips,
#panel-badges .row-goals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-width: 0;
  position: relative;
}

#panel-badges .row-goals {
  justify-content: flex-start;
}

#panel-badges .row-empty {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px dashed rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(241, 248, 255, 0.78);
  font:
    700 11px/1 "Trebuchet MS",
    Verdana,
    sans-serif;
}

#panel-badges .row-arrow {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(255, 255, 255, 0.34),
      transparent 55%
    ),
    rgba(11, 30, 66, 0.82);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

#panel-badges .row-arrow::after {
  content: ">>";
  font:
    700 9px/1 "Press Start 2P",
    "Trebuchet MS",
    sans-serif;
  color: rgba(255, 228, 149, 0.9);
  text-shadow: 0 0 8px rgba(255, 228, 149, 0.34);
  animation: badgeArrowFlow 1.15s ease-in-out infinite;
}

#panel-badges .badge-row.is-maxed .row-arrow {
  opacity: 0.28;
}

#panel-badges .chip {
  --chip-main: #8ec4ff;
  --chip-main-dark: #3466b2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.24),
      rgba(255, 255, 255, 0.02)
    ),
    var(--dex-chip-base);
  color: #f8fcff;
  font:
    700 11px/1.1 "Trebuchet MS",
    Verdana,
    sans-serif;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

#panel-badges button.chip {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  text-align: left;
}

#panel-badges .chip::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 40%;
  transform: skewX(-20deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.22),
    transparent
  );
  pointer-events: none;
  opacity: 0;
}

#panel-badges .chip .chip-icon {
  font-size: 14px;
  line-height: 1;
  color: #f7fbff;
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background:
    radial-gradient(
      circle at 30% 25%,
      rgba(255, 255, 255, 0.5),
      transparent 58%
    ),
    rgba(8, 25, 55, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.24);
}

#panel-badges .chip .chip-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 170px;
  letter-spacing: 0.01em;
}

#panel-badges .chip[data-variant="rank"] {
  --chip-main: #ffc95d;
  --chip-main-dark: #a15d11;
}
#panel-badges .chip[data-variant="rank"][class*="_set_gift"],
.badge-claim-flight.chip[data-variant="rank"][class*="_set_gift"] {
  --chip-main: #d9e3ef;
  --chip-main-dark: #6f8198;
}
#panel-badges .chip[data-variant="sub"] {
  --chip-main: #6fe4ff;
  --chip-main-dark: #1e6ca5;
}
#panel-badges .chip[data-variant="streak"] {
  --chip-main: #ff9966;
  --chip-main-dark: #96411a;
}
#panel-badges .chip[data-variant="uptime"] {
  --chip-main: #5bf3cd;
  --chip-main-dark: #1e8c74;
}
#panel-badges .chip[data-variant="wins"] {
  --chip-main: #ffd45c;
  --chip-main-dark: #b37a00;
}
#panel-badges .chip[data-variant="guardian"] {
  --chip-main: #c092ff;
  --chip-main-dark: #6930b3;
}
#panel-badges .chip[data-variant="special"] {
  --chip-main: #f09dff;
  --chip-main-dark: #854aa4;
}

#panel-badges .chip.is-earned {
  border-color: rgba(255, 255, 255, 0.34);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.24),
      rgba(255, 255, 255, 0.04)
    ),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--chip-main) 36%, #1f3a72),
      var(--chip-main-dark)
    );
}

#panel-badges .chip.is-earned.is-selectable {
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease,
    filter 0.16s ease;
}

#panel-badges .chip.is-earned.is-selectable:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 245, 213, 0.52);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

#panel-badges .chip.is-earned.is-selectable:hover::before {
  opacity: 1;
  animation: chipFoilSweep 0.8s ease forwards;
}

#panel-badges .chip.is-earned.is-selectable.is-loading {
  pointer-events: none;
  filter: saturate(0.78);
  opacity: 0.82;
}

#panel-badges .chip.is-earned.is-selected {
  border-color: rgba(255, 225, 129, 0.95);
  box-shadow:
    0 0 0 1px rgba(255, 225, 129, 0.45) inset,
    0 0 18px rgba(255, 225, 129, 0.38);
}

#panel-badges .chip.is-latest {
  border-color: rgba(255, 225, 133, 0.92);
  box-shadow:
    0 0 0 2px rgba(255, 225, 133, 0.16),
    0 0 18px rgba(255, 225, 133, 0.36);
}

#panel-badges .chip.is-latest::after {
  content: "NEW";
  position: absolute;
  top: -7px;
  right: -5px;
  padding: 2px 6px;
  border-radius: 999px;
  font:
    700 8px/1 "Press Start 2P",
    "Trebuchet MS",
    sans-serif;
  color: #1f1300;
  background: linear-gradient(135deg, #ffe585, #ffb95f);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}

#panel-badges .chip.is-claimable {
  border-color: rgba(255, 223, 124, 0.82);
  background:
    linear-gradient(
      180deg,
      rgba(255, 239, 172, 0.3),
      rgba(255, 188, 103, 0.12)
    ),
    linear-gradient(145deg, rgba(160, 93, 20, 0.64), rgba(78, 43, 10, 0.72));
  box-shadow:
    0 0 0 1px rgba(255, 220, 118, 0.34) inset,
    0 0 20px rgba(255, 206, 87, 0.34);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    filter 0.16s ease;
  animation: badgeClaimPulse 1.7s ease-in-out infinite;
}

#panel-badges .chip.is-claimable .claim-cta {
  margin-left: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.18);
  font:
    700 8px/1 "Press Start 2P",
    "Trebuchet MS",
    sans-serif;
  letter-spacing: 0.03em;
  color: #fffde8;
  white-space: nowrap;
}

#panel-badges .chip.is-claimable:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow:
    0 0 0 1px rgba(255, 226, 142, 0.45) inset,
    0 0 26px rgba(255, 205, 89, 0.46);
}

#panel-badges .chip.is-claimable.is-loading {
  pointer-events: none;
  filter: saturate(0.7);
  opacity: 0.82;
  animation: none;
}

#panel-badges .chip.is-claimable.is-flying {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
  box-shadow: none !important;
  animation: none !important;
}

#panel-badges .chip.is-claimable.is-disabled,
#panel-badges .chip.is-claimable:disabled {
  cursor: default;
  opacity: 0.62;
  filter: grayscale(0.28);
  animation: none;
}

#panel-badges .chip.is-claimable[class*="_set_gift"],
.badge-claim-flight.chip.is-claimable[class*="_set_gift"] {
  border-color: rgba(255, 228, 152, 0.96);
  background:
    radial-gradient(
      circle at 18% 0%,
      rgba(255, 255, 255, 0.26),
      transparent 44%
    ),
    linear-gradient(
      135deg,
      rgba(255, 236, 166, 0.36),
      rgba(255, 184, 106, 0.2)
    ),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--chip-main) 24%, #f5cb75),
      color-mix(in srgb, var(--chip-main-dark) 58%, #734113)
    );
  box-shadow:
    0 0 0 1px rgba(255, 237, 189, 0.46) inset,
    0 0 20px rgba(255, 202, 91, 0.44),
    0 0 34px rgba(255, 170, 84, 0.28);
}

#panel-badges .chip.is-claimable[class*="_set_gift"] .chip-icon,
.badge-claim-flight.chip.is-claimable[class*="_set_gift"] .chip-icon {
  border-color: rgba(255, 237, 189, 0.6);
  background:
    radial-gradient(
      circle at 32% 24%,
      rgba(255, 255, 255, 0.76),
      transparent 56%
    ),
    linear-gradient(145deg, rgba(95, 49, 12, 0.95), rgba(142, 74, 20, 0.9));
  box-shadow:
    0 0 0 1px rgba(255, 220, 149, 0.35) inset,
    0 0 11px rgba(255, 208, 118, 0.46);
}

#panel-badges .chip.is-claimable[class*="_set_gift"]::before,
.badge-claim-flight.chip.is-claimable[class*="_set_gift"]::before {
  opacity: 0.95;
  animation: setGiftSweep 1.35s linear infinite;
}

#panel-badges .chip.is-claimable[class*="_set_gift"] {
  animation: setGiftPulse 1.15s ease-in-out infinite;
}

#panel-badges .chip.is-earned[class*="_set_gift"],
.badge-claim-flight.chip.is-earned[class*="_set_gift"] {
  border-color: color-mix(in srgb, var(--chip-main) 68%, #f5fbff);
  background:
    repeating-linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.15) 0 2px,
      rgba(255, 255, 255, 0.02) 2px 10px
    ),
    radial-gradient(
      circle at 18% 0%,
      color-mix(in srgb, var(--chip-main) 38%, white) 0%,
      transparent 48%
    ),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--chip-main) 48%, #132b65),
      color-mix(in srgb, var(--chip-main-dark) 72%, #0a1734)
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--chip-main) 42%, white) inset,
    0 0 16px color-mix(in srgb, var(--chip-main) 50%, #7ce8ff),
    0 0 26px color-mix(in srgb, var(--chip-main-dark) 42%, #7a6eff);
  filter: saturate(1.2) brightness(1.08);
  animation: setGiftHoloPulse 2.2s ease-in-out infinite;
}

#panel-badges .chip.is-earned[class*="_set_gift"] .chip-icon,
.badge-claim-flight.chip.is-earned[class*="_set_gift"] .chip-icon {
  border-color: color-mix(in srgb, var(--chip-main) 60%, #ffffff);
  background:
    radial-gradient(
      circle at 28% 22%,
      rgba(255, 255, 255, 0.78),
      transparent 56%
    ),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--chip-main-dark) 68%, #090f2f),
      color-mix(in srgb, var(--chip-main) 42%, #163a7a)
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--chip-main) 36%, white) inset,
    0 0 12px color-mix(in srgb, var(--chip-main) 48%, #99ffff);
}

#panel-badges .chip.is-earned[class*="_set_gift"]::before,
.badge-claim-flight.chip.is-earned[class*="_set_gift"]::before {
  opacity: 0.92;
  background: linear-gradient(
    110deg,
    transparent 10%,
    color-mix(in srgb, var(--chip-main) 72%, #ffffff) 46%,
    transparent 78%
  );
  animation: setGiftHoloSweep 1.2s linear infinite;
}

#panel-badges .row-goals .chip.is-goal {
  padding-right: 24px;
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.24);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.01)
    ),
    rgba(23, 33, 56, 0.78);
  opacity: 0.85;
  filter: saturate(0.8);
}

#panel-badges .row-goals .chip.is-goal .chip-icon,
#panel-badges .row-goals .chip.is-goal .chip-text {
  filter: blur(2.3px);
}

#panel-badges .row-goals .chip.is-goal::after {
  content: "\1F512";
  position: absolute;
  right: 6px;
  top: 6px;
  font-size: 10px;
  opacity: 0.9;
}

#panel-badges .row-chips.claim-target-pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 12px;
  border: 1px solid rgba(255, 222, 135, 0.58);
  box-shadow:
    0 0 16px rgba(255, 214, 105, 0.34),
    inset 0 0 12px rgba(255, 214, 105, 0.2);
  pointer-events: none;
  animation: claimTargetPulse 0.7s ease-out forwards;
}

.badge-claim-flight {
  position: fixed;
  margin: 0 !important;
  pointer-events: none;
  z-index: 99999;
  will-change: transform, opacity, filter;
}

.badge-claim-flight.chip {
  --dex-chip-base: rgba(18, 37, 80, 0.75);
  --chip-main: #8ec4ff;
  --chip-main-dark: #3466b2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.24),
      rgba(255, 255, 255, 0.04)
    ),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--chip-main) 36%, #1f3a72),
      var(--chip-main-dark)
    );
  color: #f8fcff;
  font:
    700 11px/1.1 "Trebuchet MS",
    Verdana,
    sans-serif;
  overflow: hidden;
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.badge-claim-flight.chip .chip-icon {
  font-size: 14px;
  line-height: 1;
  color: #f7fbff;
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background:
    radial-gradient(
      circle at 30% 25%,
      rgba(255, 255, 255, 0.5),
      transparent 58%
    ),
    rgba(8, 25, 55, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.badge-claim-flight.chip[data-variant="rank"] {
  --chip-main: #ffc95d;
  --chip-main-dark: #a15d11;
}
.badge-claim-flight.chip[data-variant="sub"] {
  --chip-main: #6fe4ff;
  --chip-main-dark: #1e6ca5;
}
.badge-claim-flight.chip[data-variant="streak"] {
  --chip-main: #ff9966;
  --chip-main-dark: #96411a;
}
.badge-claim-flight.chip[data-variant="uptime"] {
  --chip-main: #5bf3cd;
  --chip-main-dark: #1e8c74;
}
.badge-claim-flight.chip[data-variant="wins"] {
  --chip-main: #ffd45c;
  --chip-main-dark: #b37a00;
}
.badge-claim-flight.chip[data-variant="guardian"] {
  --chip-main: #c092ff;
  --chip-main-dark: #6930b3;
}
.badge-claim-flight.chip[data-variant="special"] {
  --chip-main: #f09dff;
  --chip-main-dark: #854aa4;
}

.badge-claim-probe {
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transform: none !important;
}

@media (max-width: 1180px) {
  #panel-badges .badge-row {
    grid-template-columns: minmax(138px, 176px) minmax(0, 1fr);
  }

  #panel-badges .row-arrow {
    display: none;
  }

  #panel-badges .row-goals {
    grid-column: 2;
  }
}

@media (max-width: 760px) {
  #panel-badges .panel {
    padding: 12px;
    border-radius: 16px;
  }

  #panel-badges .badge-summary {
    width: 100%;
    flex-wrap: wrap;
  }

  #panel-badges .badge-row {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 10px;
  }

  #panel-badges .row-goals {
    grid-column: auto;
  }

  #panel-badges .chip .chip-text {
    max-width: 130px;
  }

  /* Set complet mobile: titre en haut + badges en ligne */
  #panel-badges .badge-row.is-complete {
    grid-template-columns: 1fr;
    align-items: start;
  }

  #panel-badges .badge-row.is-complete .row-label {
    width: 100%;
    margin-bottom: 2px;
  }

  #panel-badges .badge-row.is-complete .row-label::after {
    left: 8px;
    right: auto;
  }

  #panel-badges .badge-row.is-complete .row-chips {
    width: 100%;
    margin-inline: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding-bottom: 2px;
  }

  #panel-badges .badge-row.is-complete .row-chips .chip {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  #panel-badges .panel::after,
  #panel-badges .badge-summary .dot,
  #panel-badges .row-arrow::after,
  #panel-badges .chip.is-claimable,
  #panel-badges .chip.is-claimable[class*="_set_gift"],
  #panel-badges .chip[class*="_set_gift"]::before,
  #panel-badges .chip.is-earned[class*="_set_gift"] {
    animation: none !important;
  }
}

@keyframes dexFoilPass {
  0%,
  15% {
    transform: translateX(-125%);
    opacity: 0;
  }
  28% {
    opacity: 0.9;
  }
  45% {
    transform: translateX(130%);
    opacity: 0;
  }
  100% {
    transform: translateX(130%);
    opacity: 0;
  }
}

@keyframes chipFoilSweep {
  from {
    left: -60%;
  }
  to {
    left: 125%;
  }
}

@keyframes badgeClaimPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(255, 220, 118, 0.34) inset,
      0 0 16px rgba(255, 206, 87, 0.26);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 229, 143, 0.46) inset,
      0 0 24px rgba(255, 215, 104, 0.48);
  }
}

@keyframes setGiftSweep {
  from {
    left: -75%;
  }
  to {
    left: 140%;
  }
}

@keyframes setGiftPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(255, 234, 176, 0.4) inset,
      0 0 22px rgba(255, 207, 109, 0.42),
      0 0 32px rgba(255, 168, 89, 0.26);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 242, 201, 0.62) inset,
      0 0 28px rgba(255, 221, 141, 0.64),
      0 0 40px rgba(255, 176, 95, 0.44);
  }
}

@keyframes setGiftHoloSweep {
  from {
    left: -70%;
  }
  to {
    left: 130%;
  }
}

@keyframes setGiftHoloPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--chip-main) 38%, white) inset,
      0 0 16px color-mix(in srgb, var(--chip-main) 46%, #7ce8ff),
      0 0 24px color-mix(in srgb, var(--chip-main-dark) 38%, #7a6eff);
  }
  50% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--chip-main) 52%, white) inset,
      0 0 22px color-mix(in srgb, var(--chip-main) 62%, #a6ffff),
      0 0 34px color-mix(in srgb, var(--chip-main-dark) 52%, #9b8eff);
  }
}

@keyframes claimTargetPulse {
  from {
    opacity: 0.9;
    transform: scale(0.97);
  }
  to {
    opacity: 0;
    transform: scale(1.03);
  }
}

@keyframes badgeDotPulse {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes badgeArrowFlow {
  0% {
    transform: translateX(-1px);
    opacity: 0.45;
  }
  50% {
    transform: translateX(2px);
    opacity: 1;
  }
  100% {
    transform: translateX(5px);
    opacity: 0.45;
  }
}

@media (max-width: 768px) {
  .inspector-section.is-admin .inspector-controls {
    display: flex !important;
    flex-direction: column;
  }

  #user-inspector-section + #inspector-badges-section {
    margin-top: 0px;
  }

  #monthly-quests {
    padding: 0;
  }

  header {
    position: fixed !important;
    top: auto !important;
    right: 0;
    bottom: 0 !important;
    left: 0;
    z-index: 220 !important;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  #social-links .social-topbar {
    position: fixed !important;
    top: env(safe-area-inset-top, 0px) !important;
    right: 0;
    left: 0;
    z-index: 244 !important;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  body.profile-page {
    --mobile-bottom-nav-height: calc(
      132px + env(safe-area-inset-bottom, 0px)
    );
    padding-bottom: var(--mobile-bottom-nav-height);
  }

  html:has(body.profile-page.mobile-panels-mode) {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.profile-page.mobile-panels-mode {
    height: 100%;
    max-height: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body.profile-page .navbar.is-mobile-nav {
    --mobile-nav-inline-pad: clamp(8px, 2.8vw, 12px);
    --mobile-drawer-side-pad: clamp(10px, 3vw, 14px);
    --mobile-drawer-radius: 18px;
    --mobile-menu-left-gap: max(10px, env(safe-area-inset-left, 0px));
    --mobile-menu-right-gap: max(10px, env(safe-area-inset-right, 0px));
    display: block;
    min-height: var(--mobile-bottom-nav-height);
    padding: 7px max(var(--mobile-nav-inline-pad), env(safe-area-inset-left, 0px))
      calc(7px + env(safe-area-inset-bottom, 0px))
      max(var(--mobile-nav-inline-pad), env(safe-area-inset-right, 0px));
  }

  body.profile-page .navbar.is-mobile-nav .nav-logo,
  body.profile-page .navbar.is-mobile-nav #user-avatar {
    display: none;
  }

  body.profile-page .navbar.is-mobile-nav .mobile-primary-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px 5px;
    width: 100%;
    min-width: 0;
  }

  body.profile-page .navbar.is-mobile-nav #go-home-mobile {
    display: inline-flex !important;
  }

  body.profile-page
    .navbar.is-mobile-nav
    .mobile-primary-link
    .notification-badge {
top: -9px;
    right: -4px;
  }

  body.profile-page
    .navbar.is-mobile-nav
    .mobile-primary-link
    .notification-badge.mobile-alert-dot {
    top: 5px;
    right: 6px;
  }

  body.profile-page .navbar.is-mobile-nav .nav-links {
    bottom: calc(var(--mobile-bottom-nav-height) + 9px);
    left: var(--mobile-menu-left-gap);
    width: calc(
      100vw - var(--mobile-menu-left-gap) - var(--mobile-menu-right-gap)
    );
    max-width: calc(
      100vw - var(--mobile-menu-left-gap) - var(--mobile-menu-right-gap)
    );
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: min(48vh, 340px);
    overflow-x: hidden;
    box-sizing: border-box;
  }

  body.profile-page .navbar.is-mobile-nav .nav-links .desktop-nav-only {
    display: none !important;
  }

  body.profile-page .navbar.is-mobile-nav .nav-links .mobile-nav-only {
    display: inline-flex;
  }

  .navbar .hamburger {
    display: inline-flex;
  }

  #mobile-logout-btn.mobile-logout-btn,
  #mobile-user-btn.mobile-user-btn {
    z-index: 246 !important;
  }

  body.mobile-panels-mode main.container > .main-left.is-mobile-active-col,
  body.mobile-panels-mode main.container > .main-right.is-mobile-active-col {
    width: 100%;
    max-width: 100%;
    align-items: stretch;
  }

  body.mobile-panels-mode
    main.container
    > .main-left.is-mobile-active-col
    > #participants.section.is-mobile-active,
  body.mobile-panels-mode
    main.container
    > .main-right.is-mobile-active-col
    > #participants.section.is-mobile-active {
    width: 100%;
    max-width: none;
    min-height: clamp(
      340px,
      calc(100dvh - var(--mobile-bottom-nav-height, 72px) - 220px),
      720px
    );
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    padding: 16px 0px 33px 0px;
  }

  body.mobile-panels-mode #participants .section-header,
  body.mobile-panels-mode #participants .section-title {
    width: 100%;
    text-align: center;
    margin-left: 0;
    justify-content: center;
  }

  body.mobile-panels-mode #participants-list {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    width: 100%;
    gap: 0.75rem;
  }

  body.mobile-panels-mode #participants-list .card-container {
    margin-left: auto;
    margin-right: auto;
  }

  body.profile-page.mobile-panels-mode main.container {
    height: var(--mobile-main-available, auto);
    max-height: var(--mobile-main-available, none);
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y pinch-zoom;
  }

  body.profile-page.mobile-panels-mode
    main.container
    > :is(.main-left, .main-right).is-mobile-active-col {
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }

  body.profile-page.mobile-panels-mode
    main.container
    > :is(.main-left, .main-right).is-mobile-active-col
    > :is(.section, .panel).is-mobile-active {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y pinch-zoom;
  }

  body.profile-page.mobile-panels-mode
    main.container
    > :is(.main-left, .main-right).is-mobile-active-col
    > :is(.section, .panel).is-mobile-active
    > :is(.section-title, .section-header, .inspector-header, .header) {
    position: sticky;
    top: 0;
    z-index: 7;
    backdrop-filter: blur(6px);
  }

  html.is-android-touch
    body.profile-page.mobile-panels-mode
    main.container
    > :is(.main-left, .main-right)
    > :is(.section, .panel).is-mobile-active {
    content-visibility: visible !important;
    contain: none !important;
    contain-intrinsic-size: auto !important;
  }

  html.is-android-touch
    body.profile-page.mobile-panels-mode
    main.container
    > :is(.main-left, .main-right)
    > :is(.section, .panel).is-mobile-active
    :is(#clips-list, #tiktok-list, #vods-list, .highlight-list) {
    touch-action: pan-x pinch-zoom;
  }

  body.profile-page.mobile-panels-mode
    main.container[data-mobile-panel-group="participants"] {
    height: var(--mobile-main-available, auto);
    max-height: var(--mobile-main-available, none);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  body.profile-page.mobile-panels-mode
    main.container[data-mobile-panel-group="participants"]
    > :is(.main-left, .main-right).is-mobile-active-col {
    flex: 0 0 auto;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  body.profile-page.mobile-panels-mode
    main.container[data-mobile-panel-group="participants"]
    > :is(.main-left, .main-right).is-mobile-active-col
    > :is(.section, .panel).is-mobile-active {
    flex: 0 0 auto;
    max-height: none;
    overflow: visible !important;
  }

  body.profile-page.mobile-panels-mode
    main.container[data-mobile-panel-group="participants"]
    > :is(.main-left, .main-right).is-mobile-active-col
    > :is(.section, .panel).is-mobile-active
    > :is(.section-title, .section-header, .inspector-header, .header) {
    position: static;
    backdrop-filter: none;
  }

  body.mobile-panels-mode
    main.container[data-mobile-panel-group="participants"]
    > :is(.main-left, .main-right).is-mobile-active-col
    > #participants.section.is-mobile-active {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    min-height: 0;
    justify-content: flex-start;
    padding-bottom: 24px;
  }

  body.mobile-panels-mode
    main.container[data-mobile-panel-group="participants"]
    #participants-list {
    flex: 0 0 auto;
    justify-content: flex-start !important;
    align-content: flex-start;
  }

  body.mobile-panels-mode
    main.container[data-mobile-panel-group="participants"]
    #winners.section.is-mobile-active {
    margin-top: 8px;
  }

  body:not(.mobile-panels-mode) #participants-list {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
  }
}

html.is-android-touch body.profile-page {
  overscroll-behavior-y: auto !important;
}
#monthly-quests .header {
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(188, 237, 255, 0.19) 0%,
      rgba(188, 237, 255, 0) 62%
    ),
    linear-gradient(180deg, rgba(57, 132, 189, 0.14), rgba(18, 66, 112, 0.04)),
    linear-gradient(
      145deg,
      rgba(14, 55, 98, 0.98),
      rgba(19, 89, 144, 0.88) 52%,
      rgba(13, 54, 97, 0.98)
    );
}

/* Custom dropdown pour le titre de profil */
#rankname-selector.rankname-selector {
  --rankname-dropdown-height: 0px;
  --rankname-dropdown-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --rankname-dropdown-duration: 320ms;
  display: grid;
  gap: 10px;
  align-items: stretch;
  padding: 12px;
  border-radius: 20px;
  isolation: isolate;
}

#rankname-selector.rankname-selector::after {
  content: none;
}

#rankname-selector #rankname-select {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

#rankname-selector .rankname-trigger {
  display: block;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  position: relative;
  color: inherit;
  transition:
    transform 220ms var(--rankname-dropdown-ease),
    filter 220ms ease;
}

#rankname-selector .rankname-trigger:hover {
  transform: translateY(-1px);
  filter: saturate(1.04);
}

#rankname-selector .rankname-trigger::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 11px;
  height: 7px;
  transform: translateY(-50%);
  background: linear-gradient(
    135deg,
    rgba(42, 208, 255, 0.95),
    rgba(124, 92, 255, 0.95)
  );
  border-radius: 999px;
  box-shadow:
    0 0 0 6px rgba(255, 255, 255, 0.04),
    0 0 10px rgba(0, 0, 0, 0.5);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
  transition:
    transform var(--rankname-dropdown-duration) var(--rankname-dropdown-ease),
    box-shadow 220ms ease,
    filter 220ms ease;
}

#rankname-selector.is-open .rankname-trigger::after {
  transform: translateY(-50%) rotate(180deg) scale(1.08);
  box-shadow:
    0 0 0 7px rgba(255, 255, 255, 0.05),
    0 0 18px rgba(42, 208, 255, 0.22),
    0 0 24px rgba(124, 92, 255, 0.14);
  filter: drop-shadow(0 0 8px rgba(42, 208, 255, 0.25));
}

#rankname-selector .rankname-trigger:focus-visible,
#rankname-selector .rankname-option:focus-visible {
  outline: none;
}

#rankname-selector .rankname-trigger:focus-visible .rankname-surface,
#rankname-selector .rankname-option:focus-visible .rankname-surface {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.38),
    0 0 0 1px var(--rk-border),
    0 0 26px var(--rk-glow);
}

#rankname-selector .rankname-trigger__empty {
  display: block;
  min-height: 64px;
  padding: 14px 42px 14px 14px;
  border-radius: 18px;
  color: rgba(255, 255, 255, 0.7);
  background: linear-gradient(
    135deg,
    rgba(3, 19, 34, 0.92),
    rgba(7, 38, 59, 0.82)
  );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(0, 0, 0, 0.74),
    0 12px 28px rgba(0, 0, 0, 0.28);
}

#rankname-selector .rankname-surface {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
}

#rankname-selector .rankname-surface--trigger {
  min-height: 88px;
  gap: 7px;
  padding: 14px 42px 14px 14px;
}

#rankname-selector .rankname-surface--option {
  min-height: 72px;
  padding: 12px 14px;
}

#rankname-selector .rankname-surface--plain {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(
      circle at top left,
      rgba(255, 255, 255, 0.18),
      transparent 35%
    ),
    linear-gradient(135deg, rgba(4, 23, 38, 0.94), rgba(8, 40, 61, 0.84));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 0 1px rgba(0, 0, 0, 0.74),
    0 12px 24px rgba(0, 0, 0, 0.24);
}

#rankname-selector .rankname-surface.guardian-preview {
  width: 100%;
  max-width: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 10px 26px rgba(0, 0, 0, 0.34);
}

#rankname-selector .rankname-surface::before,
#rankname-selector .rankname-surface::after {
  z-index: 0;
}

#rankname-selector .rankname-surface > * {
  position: relative;
  z-index: 1;
}

#rankname-selector .rankname-surface__eyebrow {
  display: block;
  width: 100%;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(236, 246, 255, 0.6);
}

#rankname-selector .rankname-surface__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

#rankname-selector .rankname-surface__chip {
  flex: 0 0 auto;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 18px rgba(0, 0, 0, 0.16);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.15em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(236, 246, 255, 0.86);
}

#rankname-selector .rankname-surface__title {
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: 1px;
}

#rankname-selector .rankname-title-text {
  display: inline-block;
  max-width: 100%;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--rk-text);
  white-space: normal;
  word-break: break-word;
}

#rankname-selector .rankname-surface__meta {
  display: block;
  width: 100%;
  font-size: 12px;
  color: rgba(236, 246, 255, 0.8);
}

#rankname-selector .rankname-surface--trigger .rankname-surface__eyebrow {
  width: auto;
  flex: 1 1 auto;
  color: rgba(236, 246, 255, 0.54);
}

#rankname-selector .rankname-surface--trigger .rankname-title-text {
  font-size: 18px;
  line-height: 1.12;
}

#rankname-selector .rankname-surface--trigger .rankname-surface__meta {
  padding-right: 22px;
  font-size: 11px;
  color: rgba(236, 246, 255, 0.86);
}

#rankname-selector
  .rankname-surface.has-title-card-id:not(.title-theme-level)
  .rankname-title-text,
#rankname-selector
  .rankname-title-text.has-title-card-id:not(.title-theme-level) {
  color: var(--selected-title-color, #fff);
  -webkit-text-fill-color: var(
    --auto-title-text-fill,
    var(--selected-title-color, #fff)
  );
  background: var(--auto-title-gradient, none);
  background-size: var(--auto-title-bg-size, auto);
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: var(--selected-title-shadow, 0 0 9px rgba(255, 255, 255, 0.42));
  animation: var(
    --auto-title-text-animation,
    var(
      --selected-title-animation,
      selectedTitleCollection 4.8s ease-in-out infinite
    )
  );
  transform-origin: center bottom;
}

#rankname-selector
  .rankname-surface.title-theme-first-time
  .rankname-title-text,
#rankname-selector .rankname-title-text.title-theme-first-time {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
  color: #ffd1dc;
  -webkit-text-fill-color: #ffd1dc;
  text-shadow:
    0 0 7px rgba(255, 77, 141, 0.74),
    0 0 16px rgba(255, 180, 202, 0.34),
    0 0 26px rgba(166, 36, 94, 0.22);
  animation: firstTimeTitlePulse 2.7s ease-in-out infinite;
  overflow: visible;
}

#rankname-selector
  .rankname-surface.title-theme-first-time
  .rankname-title-text::before,
#rankname-selector .rankname-title-text.title-theme-first-time::before {
  content: "\1F48B";
  display: inline-block;
  flex: 0 0 auto;
  font-size: 0.94em;
  line-height: 1;
  color: initial;
  -webkit-text-fill-color: initial;
  font-family:
    "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  filter: drop-shadow(0 0 6px rgba(255, 77, 141, 0.82));
  pointer-events: none;
  animation: firstTimeKissPop 1.45s ease-in-out infinite;
}

#rankname-selector
  .rankname-surface.title-theme-first-time
  .rankname-title-text::after,
#rankname-selector .rankname-title-text.title-theme-first-time::after {
  content: "\1F48B";
  display: inline-block;
  flex: 0 0 auto;
  font-size: 0.78em;
  line-height: 1;
  color: initial;
  -webkit-text-fill-color: initial;
  font-family:
    "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  filter: drop-shadow(0 0 5px rgba(255, 159, 189, 0.78));
  pointer-events: none;
  animation: firstTimeKissPop 1.45s ease-in-out 0.72s infinite reverse;
}

#rankname-selector .rankname-surface.title-theme-pig .rankname-title-text,
#rankname-selector .rankname-title-text.title-theme-pig {
  position: relative;
  display: inline-block;
  color: #ffd3e5;
  -webkit-text-fill-color: #ffd3e5;
  text-shadow:
    0 0 7px rgba(255, 157, 199, 0.76),
    0 0 16px rgba(255, 199, 116, 0.28),
    0 0 24px rgba(255, 111, 166, 0.18);
  animation: pigTitleWiggle 2.9s ease-in-out infinite;
}

#rankname-selector
  .rankname-surface.title-theme-pig
  .rankname-title-text::before,
#rankname-selector .rankname-title-text.title-theme-pig::before {
  content: "🐷";
  display: inline-block;
  margin-right: 0.24em;
  filter: drop-shadow(0 0 5px rgba(255, 157, 199, 0.7));
  animation: pigEmojiPop 1.8s ease-in-out infinite;
}

#rankname-selector
  .rankname-surface.title-theme-pig
  .rankname-title-text::after,
#rankname-selector .rankname-title-text.title-theme-pig::after {
  content: " ✨";
  display: inline-block;
  margin-left: 0.16em;
  color: #ffe59a;
  -webkit-text-fill-color: #ffe59a;
  filter: drop-shadow(0 0 5px rgba(255, 229, 154, 0.72));
  animation: pigEmojiPop 1.8s ease-in-out infinite reverse;
}

#rankname-selector
  .rankname-surface.title-theme-emote-rain
  .rankname-title-text,
#rankname-selector .rankname-title-text.title-theme-emote-rain {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #fde047;
  -webkit-text-fill-color: #fde047;
  background: none;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  text-shadow:
    0 0 8px rgba(253, 224, 71, 0.82),
    0 0 18px rgba(250, 204, 21, 0.38),
    0 0 28px rgba(255, 139, 216, 0.18);
  animation: emoteRainTitleDrift 3.1s ease-in-out infinite;
  isolation: isolate;
  overflow: visible;
}

#rankname-selector
  .rankname-surface.title-theme-emote-rain
  .rankname-title-text::before,
#rankname-selector .rankname-title-text.title-theme-emote-rain::before,
#rankname-selector
  .rankname-surface.title-theme-emote-rain
  .rankname-title-text::after,
#rankname-selector .rankname-title-text.title-theme-emote-rain::after {
  content: "\1F603  \1F604  \1F606  \1F601  \1F60E  \1F603  \1F604  \1F606  \1F601  \1F60A";
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  display: block;
  width: 100%;
  overflow: hidden;
  color: initial;
  -webkit-text-fill-color: initial;
  background: none;
  font-family:
    "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: 0.5em;
  line-height: 1;
  letter-spacing: 0.14em;
  white-space: nowrap;
  filter: drop-shadow(0 0 5px rgba(253, 224, 71, 0.7))
    drop-shadow(0 0 9px rgba(255, 139, 216, 0.3));
  pointer-events: none;
}

#rankname-selector
  .rankname-surface.title-theme-emote-rain
  .rankname-title-text::before,
#rankname-selector .rankname-title-text.title-theme-emote-rain::before {
  top: -0.82em;
  animation: emoteRainFall 1.55s linear infinite;
}

#rankname-selector
  .rankname-surface.title-theme-emote-rain
  .rankname-title-text::after,
#rankname-selector .rankname-title-text.title-theme-emote-rain::after {
  bottom: -0.76em;
  animation: emoteRainRise 1.55s linear 0.22s infinite;
}

@media (prefers-reduced-motion: reduce) {
  #rankname-selector
    .rankname-surface.title-theme-emote-rain
    .rankname-title-text,
  #rankname-selector .rankname-title-text.title-theme-emote-rain,
  #rankname-selector
    .rankname-surface.title-theme-emote-rain
    .rankname-title-text::before,
  #rankname-selector .rankname-title-text.title-theme-emote-rain::before,
  #rankname-selector
    .rankname-surface.title-theme-emote-rain
    .rankname-title-text::after,
  #rankname-selector .rankname-title-text.title-theme-emote-rain::after {
    animation: none !important;
  }
}

#rankname-selector .rankname-surface.title-theme-fun-spam .rankname-title-text,
#rankname-selector .rankname-title-text.title-theme-fun-spam {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #bbf7d0;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(
    90deg,
    #bbf7d0 0%,
    #fef08a 28%,
    #fb7185 58%,
    #67e8f9 100%
  );
  background-size: 240% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: none;
  animation: funSpamTitleBuzz 1.8s steps(2, end) infinite;
  isolation: isolate;
  overflow: visible;
}

#rankname-selector
  .rankname-surface.title-theme-fun-spam
  .rankname-title-text::before,
#rankname-selector .rankname-title-text.title-theme-fun-spam::before,
#rankname-selector
  .rankname-surface.title-theme-fun-spam
  .rankname-title-text::after,
#rankname-selector .rankname-title-text.title-theme-fun-spam::after {
  position: absolute;
  z-index: -1;
  display: block;
  color: #fef08a;
  -webkit-text-fill-color: #fef08a;
  background: none;
  font-size: 0.42em;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow:
    0 0 6px rgba(254, 240, 138, 0.74),
    0 0 10px rgba(244, 114, 182, 0.34);
  pointer-events: none;
}

#rankname-selector
  .rankname-surface.title-theme-fun-spam
  .rankname-title-text::before,
#rankname-selector .rankname-title-text.title-theme-fun-spam::before {
  content: "FUN! FUN! FUN!";
  left: -0.08em;
  top: -0.78em;
  animation: funSpamBurst 1.2s steps(2, end) infinite;
}

#rankname-selector
  .rankname-surface.title-theme-fun-spam
  .rankname-title-text::after,
#rankname-selector .rankname-title-text.title-theme-fun-spam::after {
  content: "LOL! GG! FUN!";
  right: -0.08em;
  bottom: -0.74em;
  color: #67e8f9;
  -webkit-text-fill-color: #67e8f9;
  text-shadow:
    0 0 6px rgba(103, 232, 249, 0.74),
    0 0 10px rgba(74, 222, 128, 0.34);
  animation: funSpamBurst 1.2s steps(2, end) 0.18s infinite reverse;
}

@media (prefers-reduced-motion: reduce) {
  #rankname-selector
    .rankname-surface.title-theme-fun-spam
    .rankname-title-text,
  #rankname-selector .rankname-title-text.title-theme-fun-spam,
  #rankname-selector
    .rankname-surface.title-theme-fun-spam
    .rankname-title-text::before,
  #rankname-selector .rankname-title-text.title-theme-fun-spam::before,
  #rankname-selector
    .rankname-surface.title-theme-fun-spam
    .rankname-title-text::after,
  #rankname-selector .rankname-title-text.title-theme-fun-spam::after {
    animation: none !important;
  }
}

#rankname-selector
  .rankname-surface.title-theme-first-purchase
  .rankname-title-text,
#rankname-selector .rankname-title-text.title-theme-first-purchase {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
  color: #fef3c7;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(
    90deg,
    #fef3c7 0%,
    #fbbf24 34%,
    #34d399 68%,
    #fff7ed 100%
  );
  background-size: 230% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: none;
  animation: firstPurchaseTitleShine 3s ease-in-out infinite;
  isolation: isolate;
  overflow: visible;
}

#rankname-selector
  .rankname-surface.title-theme-first-purchase
  .rankname-title-text::before,
#rankname-selector .rankname-title-text.title-theme-first-purchase::before {
  content: "\1F6CD\FE0F";
  display: inline-block;
  flex: 0 0 auto;
  font-size: 0.92em;
  line-height: 1;
  color: initial;
  -webkit-text-fill-color: initial;
  background: none;
  font-family:
    "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.8))
    drop-shadow(0 0 10px rgba(16, 185, 129, 0.32));
  pointer-events: none;
  animation: firstPurchaseBagBounce 1.7s ease-in-out infinite;
}

#rankname-selector
  .rankname-surface.title-theme-first-purchase
  .rankname-title-text::after,
#rankname-selector .rankname-title-text.title-theme-first-purchase::after {
  content: "1er achat";
  position: absolute;
  left: 1.45em;
  right: -0.1em;
  bottom: -0.72em;
  z-index: -1;
  height: 1em;
  display: block;
  color: #fde68a;
  -webkit-text-fill-color: #fde68a;
  background: linear-gradient(
    90deg,
    rgba(251, 191, 36, 0),
    rgba(251, 191, 36, 0.28),
    rgba(16, 185, 129, 0.2),
    rgba(251, 191, 36, 0)
  );
  border-radius: 999px;
  font-size: 0.42em;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    0 0 6px rgba(251, 191, 36, 0.72),
    0 0 10px rgba(16, 185, 129, 0.3);
  pointer-events: none;
  animation: firstPurchaseTicketGlow 2.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  #rankname-selector
    .rankname-surface.title-theme-first-purchase
    .rankname-title-text,
  #rankname-selector .rankname-title-text.title-theme-first-purchase,
  #rankname-selector
    .rankname-surface.title-theme-first-purchase
    .rankname-title-text::before,
  #rankname-selector .rankname-title-text.title-theme-first-purchase::before,
  #rankname-selector
    .rankname-surface.title-theme-first-purchase
    .rankname-title-text::after,
  #rankname-selector .rankname-title-text.title-theme-first-purchase::after {
    animation: none !important;
  }
}

#rankname-selector .rankname-surface.title-theme-funes-wow .rankname-title-text,
#rankname-selector .rankname-title-text.title-theme-funes-wow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  color: #fff7d6;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(
    90deg,
    #fff7d6 0%,
    #ffd166 24%,
    #ef4444 50%,
    #2563eb 74%,
    #fff7d6 100%
  );
  background-size: 260% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: none;
  animation: funesTitlePanic 1.55s cubic-bezier(0.25, 0.8, 0.3, 1) infinite;
  isolation: isolate;
  overflow: visible;
}

#rankname-selector
  .rankname-surface.title-theme-funes-wow
  .rankname-title-text::before,
#rankname-selector .rankname-title-text.title-theme-funes-wow::before {
  content: "\1F3AC";
  display: inline-block;
  flex: 0 0 auto;
  font-size: 0.94em;
  line-height: 1;
  color: initial;
  -webkit-text-fill-color: initial;
  background: none;
  font-family:
    "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  filter: drop-shadow(0 0 6px rgba(255, 214, 102, 0.82))
    drop-shadow(0 0 11px rgba(239, 68, 68, 0.34));
  pointer-events: none;
  animation: funesClapboardPop 1.3s ease-in-out infinite;
}

#rankname-selector
  .rankname-surface.title-theme-funes-wow
  .rankname-title-text::after,
#rankname-selector .rankname-title-text.title-theme-funes-wow::after {
  content: "OH !";
  position: absolute;
  right: -0.56em;
  top: -0.92em;
  z-index: -1;
  display: block;
  color: #ffe08a;
  -webkit-text-fill-color: #ffe08a;
  background:
    linear-gradient(135deg, rgba(127, 29, 29, 0.86), rgba(239, 68, 68, 0.52)),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.22) 0 0.12em,
      transparent 0.12em 0.24em
    );
  border: 1px solid rgba(255, 214, 102, 0.72);
  border-radius: 0.18em;
  padding: 0.08em 0.24em;
  font-size: 0.48em;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-shadow:
    0 0 6px rgba(255, 214, 102, 0.72),
    0 0 10px rgba(239, 68, 68, 0.34);
  box-shadow:
    0 0 10px rgba(255, 214, 102, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  pointer-events: none;
  animation: funesCurtainFlash 1.2s steps(2, end) infinite;
}

@media (prefers-reduced-motion: reduce) {
  #rankname-selector
    .rankname-surface.title-theme-funes-wow
    .rankname-title-text,
  #rankname-selector .rankname-title-text.title-theme-funes-wow,
  #rankname-selector
    .rankname-surface.title-theme-funes-wow
    .rankname-title-text::before,
  #rankname-selector .rankname-title-text.title-theme-funes-wow::before,
  #rankname-selector
    .rankname-surface.title-theme-funes-wow
    .rankname-title-text::after,
  #rankname-selector .rankname-title-text.title-theme-funes-wow::after {
    animation: none !important;
  }
}

#rankname-selector
  .rankname-surface.title-theme-compulsive-shopper
  .rankname-title-text,
#rankname-selector .rankname-title-text.title-theme-compulsive-shopper {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.24em;
  color: #bbf7d0;
  -webkit-text-fill-color: #bbf7d0;
  background: none;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  font-family: "Press Start 2P", "Roboto", sans-serif;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow:
    0 0 8px rgba(34, 197, 94, 0.82),
    0 0 18px rgba(250, 204, 21, 0.3),
    0 0 30px rgba(14, 165, 233, 0.18);
  animation: shopperRegisterBlink 1.9s steps(2, end) infinite;
  isolation: isolate;
  overflow: visible;
}

#rankname-selector
  .rankname-surface.title-theme-compulsive-shopper
  .rankname-title-text::before,
#rankname-selector .rankname-title-text.title-theme-compulsive-shopper::before {
  content: "\1F6D2";
  display: inline-block;
  flex: 0 0 auto;
  font-size: 1.18em;
  line-height: 1;
  color: initial;
  -webkit-text-fill-color: initial;
  background: none;
  font-family:
    "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.82))
    drop-shadow(0 0 11px rgba(250, 204, 21, 0.34));
  pointer-events: none;
  animation: shopperCartDash 1.35s ease-in-out infinite;
}

#rankname-selector
  .rankname-surface.title-theme-compulsive-shopper
  .rankname-title-text::after,
#rankname-selector .rankname-title-text.title-theme-compulsive-shopper::after {
  content: "PANIER x99";
  position: absolute;
  left: 1.72em;
  right: -0.12em;
  bottom: -0.82em;
  z-index: -1;
  display: block;
  color: #022c22;
  -webkit-text-fill-color: #022c22;
  background:
    linear-gradient(90deg, #bbf7d0, #fde047, #7dd3fc),
    repeating-linear-gradient(
      90deg,
      rgba(2, 44, 34, 0.22) 0 0.08em,
      transparent 0.08em 0.16em
    );
  border: 1px solid rgba(187, 247, 208, 0.76);
  border-radius: 0.18em;
  padding: 0.12em 0.28em;
  font-family: "Press Start 2P", "Roboto", sans-serif;
  font-size: 0.42em;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.42);
  box-shadow:
    0 0 10px rgba(34, 197, 94, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  pointer-events: none;
  animation: shopperReceiptScan 1.55s steps(2, end) infinite;
}

@media (prefers-reduced-motion: reduce) {
  #rankname-selector
    .rankname-surface.title-theme-compulsive-shopper
    .rankname-title-text,
  #rankname-selector .rankname-title-text.title-theme-compulsive-shopper,
  #rankname-selector
    .rankname-surface.title-theme-compulsive-shopper
    .rankname-title-text::before,
  #rankname-selector
    .rankname-title-text.title-theme-compulsive-shopper::before,
  #rankname-selector
    .rankname-surface.title-theme-compulsive-shopper
    .rankname-title-text::after,
  #rankname-selector
    .rankname-title-text.title-theme-compulsive-shopper::after {
    animation: none !important;
  }
}

#rankname-selector
  .rankname-surface.title-theme-moula-treasure
  .rankname-title-text,
#rankname-selector .rankname-title-text.title-theme-moula-treasure {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.22em;
  color: #ffe08a;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(
    90deg,
    #fff7cc 0%,
    #fbbf24 28%,
    #34d399 54%,
    #38bdf8 76%,
    #ffe08a 100%
  );
  background-size: 240% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  letter-spacing: 0;
  text-shadow: none;
  animation: moulaTreasureShine 2.8s ease-in-out infinite;
  isolation: isolate;
  overflow: visible;
}

#rankname-selector
  .rankname-surface.title-theme-moula-treasure
  .rankname-title-text::before,
#rankname-selector .rankname-title-text.title-theme-moula-treasure::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 1.12em;
  height: 0.82em;
  border: 0.08em solid rgba(255, 224, 138, 0.95);
  border-radius: 0.22em 0.22em 0.16em 0.16em;
  background:
    linear-gradient(
      90deg,
      transparent 42%,
      rgba(255, 247, 204, 0.96) 42% 58%,
      transparent 58%
    ),
    linear-gradient(180deg, #facc15 0 0.18em, transparent 0.18em),
    linear-gradient(180deg, #92400e 0 46%, #5f2f0f 46% 100%);
  box-shadow:
    inset 0 0.16em 0 rgba(255, 255, 255, 0.18),
    inset 0 -0.16em 0 rgba(0, 0, 0, 0.22),
    0 0 9px rgba(251, 191, 36, 0.62),
    0 0 16px rgba(16, 185, 129, 0.24);
  pointer-events: none;
  animation: moulaTreasureChest 1.75s ease-in-out infinite;
}

#rankname-selector
  .rankname-surface.title-theme-moula-treasure
  .rankname-title-text::after,
#rankname-selector .rankname-title-text.title-theme-moula-treasure::after {
  content: "";
  position: absolute;
  left: 1.18em;
  right: -0.1em;
  top: -0.56em;
  bottom: -0.28em;
  z-index: -1;
  background:
    radial-gradient(
      circle at 10% 26%,
      rgba(250, 204, 21, 0.95) 0 0.08em,
      transparent 0.1em
    ),
    radial-gradient(
      circle at 27% 4%,
      rgba(52, 211, 153, 0.92) 0 0.075em,
      transparent 0.1em
    ),
    radial-gradient(
      circle at 46% 28%,
      rgba(251, 191, 36, 0.9) 0 0.07em,
      transparent 0.095em
    ),
    radial-gradient(
      circle at 68% 8%,
      rgba(56, 189, 248, 0.86) 0 0.08em,
      transparent 0.1em
    ),
    radial-gradient(
      circle at 90% 24%,
      rgba(253, 224, 71, 0.86) 0 0.065em,
      transparent 0.09em
    ),
    linear-gradient(
      90deg,
      rgba(251, 191, 36, 0),
      rgba(251, 191, 36, 0.2),
      rgba(16, 185, 129, 0.14),
      rgba(251, 191, 36, 0)
    );
  border-radius: 999px;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.64))
    drop-shadow(0 0 10px rgba(16, 185, 129, 0.28));
  pointer-events: none;
  animation: moulaTreasureCoins 1.9s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  #rankname-selector
    .rankname-surface.title-theme-moula-treasure
    .rankname-title-text,
  #rankname-selector .rankname-title-text.title-theme-moula-treasure,
  #rankname-selector
    .rankname-surface.title-theme-moula-treasure
    .rankname-title-text::before,
  #rankname-selector .rankname-title-text.title-theme-moula-treasure::before,
  #rankname-selector
    .rankname-surface.title-theme-moula-treasure
    .rankname-title-text::after,
  #rankname-selector .rankname-title-text.title-theme-moula-treasure::after {
    animation: none !important;
  }
}

#rankname-selector
  .rankname-surface.title-theme-goofy-glasses
  .rankname-title-text,
#rankname-selector .rankname-title-text.title-theme-goofy-glasses {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  color: #fef08a;
  -webkit-text-fill-color: #fef08a;
  background: none;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  font-family: "Comic Sans MS", "Trebuchet MS", "Roboto", sans-serif;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow:
    0 0 8px rgba(250, 204, 21, 0.8),
    0 0 18px rgba(34, 211, 238, 0.26);
  isolation: isolate;
  overflow: visible;
}

#rankname-selector
  .rankname-surface.title-theme-goofy-glasses
  .rankname-title-text::before,
#rankname-selector .rankname-title-text.title-theme-goofy-glasses::before {
  content: none;
  display: none;
}

#rankname-selector
  .rankname-surface.title-theme-goofy-glasses
  .rankname-title-text::after,
#rankname-selector .rankname-title-text.title-theme-goofy-glasses::after {
  content: "\1F913";
  position: absolute;
  right: -20px;
  top: 50%;
  z-index: 1;
  display: inline-block;
  color: initial;
  -webkit-text-fill-color: initial;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-family:
    "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: 0.9em;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
  text-shadow: none;
  box-shadow: none;
  transform: translateY(-50%);
  filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.58));
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #rankname-selector
    .rankname-surface.title-theme-goofy-glasses
    .rankname-title-text,
  #rankname-selector .rankname-title-text.title-theme-goofy-glasses,
  #rankname-selector
    .rankname-surface.title-theme-goofy-glasses
    .rankname-title-text::before,
  #rankname-selector .rankname-title-text.title-theme-goofy-glasses::before,
  #rankname-selector
    .rankname-surface.title-theme-goofy-glasses
    .rankname-title-text::after,
  #rankname-selector .rankname-title-text.title-theme-goofy-glasses::after {
    animation: none !important;
  }
}

#rankname-selector .rankname-surface.title-theme-emotion .rankname-title-text,
#rankname-selector .rankname-title-text.title-theme-emotion {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  color: #fce7f3;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(
    90deg,
    #fce7f3 0%,
    #fb7185 30%,
    #2dd4bf 60%,
    #c4b5fd 100%
  );
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: none;
  animation: emotionTitlePulse 3.4s ease-in-out infinite;
  isolation: isolate;
  overflow: visible;
}

#rankname-selector
  .rankname-surface.title-theme-emotion
  .rankname-title-text::before,
#rankname-selector .rankname-title-text.title-theme-emotion::before {
  content: "\1F493";
  display: inline-block;
  flex: 0 0 auto;
  font-size: 0.92em;
  line-height: 1;
  color: initial;
  -webkit-text-fill-color: initial;
  background: none;
  font-family:
    "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  filter: drop-shadow(0 0 7px rgba(244, 114, 182, 0.82))
    drop-shadow(0 0 12px rgba(45, 212, 191, 0.34));
  pointer-events: none;
  animation: emotionEmojiFloat 1.65s ease-in-out infinite;
}

#rankname-selector
  .rankname-surface.title-theme-emotion
  .rankname-title-text::after,
#rankname-selector .rankname-title-text.title-theme-emotion::after {
  content: "";
  position: absolute;
  left: 1.38em;
  right: -0.08em;
  bottom: -0.16em;
  z-index: -1;
  height: 0.22em;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(244, 114, 182, 0),
    rgba(244, 114, 182, 0.86),
    rgba(45, 212, 191, 0.78),
    rgba(196, 181, 253, 0)
  );
  box-shadow:
    0 0 10px rgba(244, 114, 182, 0.42),
    0 0 16px rgba(45, 212, 191, 0.26);
  transform-origin: left center;
  pointer-events: none;
  animation: emotionSignalSweep 2.35s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  #rankname-selector .rankname-surface.title-theme-emotion .rankname-title-text,
  #rankname-selector .rankname-title-text.title-theme-emotion,
  #rankname-selector
    .rankname-surface.title-theme-emotion
    .rankname-title-text::before,
  #rankname-selector .rankname-title-text.title-theme-emotion::before,
  #rankname-selector
    .rankname-surface.title-theme-emotion
    .rankname-title-text::after,
  #rankname-selector .rankname-title-text.title-theme-emotion::after {
    animation: none !important;
  }
}

#rankname-selector
  .rankname-surface--trigger[data-selected-title-card-id]
  .rankname-surface__chip {
  border-color: rgba(255, 255, 255, 0.2);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0.04)
  );
}

#rankname-selector .rankname-dropdown {
  position: relative;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-14px) scale(0.965);
  transform-origin: top center;
  filter: blur(10px) saturate(0.82);
  transition:
    max-height var(--rankname-dropdown-duration) var(--rankname-dropdown-ease),
    opacity 220ms ease,
    transform var(--rankname-dropdown-duration) var(--rankname-dropdown-ease),
    filter 280ms ease,
    visibility 0s linear var(--rankname-dropdown-duration);
}

#rankname-selector .rankname-dropdown::before,
#rankname-selector .rankname-dropdown::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 260ms ease,
    transform var(--rankname-dropdown-duration) var(--rankname-dropdown-ease);
}

#rankname-selector .rankname-dropdown::before {
  background:
    radial-gradient(
      circle at top center,
      rgba(74, 218, 255, 0.18),
      rgba(74, 218, 255, 0) 52%
    ),
    linear-gradient(
      180deg,
      rgba(7, 20, 34, 0.14),
      rgba(7, 20, 34, 0.02) 38%,
      rgba(7, 20, 34, 0.14)
    );
  transform: scale(0.98);
}

#rankname-selector .rankname-dropdown::after {
  inset: 1px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 38px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(0, 0, 0, 0.38);
  transform: scale(0.985);
}

#rankname-selector .rankname-options {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  min-height: 0;
  max-height: min(360px, calc(72vh - 120px));
  overflow-y: auto;
  padding: 12px 6px 6px 0;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

#rankname-selector .rankname-options::-webkit-scrollbar {
  width: 8px;
}

#rankname-selector .rankname-options::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(42, 208, 255, 0.7),
    rgba(124, 92, 255, 0.7)
  );
}

#rankname-selector .rankname-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity 200ms ease,
    transform var(--rankname-dropdown-duration) var(--rankname-dropdown-ease);
  transition-delay: 0ms;
}

#rankname-selector .rankname-group__label {
  padding-left: 2px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(142, 168, 198, 0.85);
}

#rankname-selector .rankname-group__items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-left: 2px;
}

#rankname-selector .rankname-option {
  display: block;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

#rankname-selector .rankname-option .rankname-surface {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease,
    opacity 0.2s ease;
  opacity: 0.94;
}

#rankname-selector .rankname-option:hover .rankname-surface {
  transform: translateY(-1px);
  filter: saturate(1.05);
}

#rankname-selector .rankname-option.is-selected .rankname-surface {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.3),
    0 0 0 1px var(--rk-border),
    0 0 22px rgba(0, 220, 255, 0.28);
}

#rankname-selector.is-open .rankname-dropdown {
  max-height: var(--rankname-dropdown-height, 420px);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  filter: blur(0) saturate(1);
  transition:
    max-height var(--rankname-dropdown-duration) var(--rankname-dropdown-ease),
    opacity 220ms ease,
    transform var(--rankname-dropdown-duration) var(--rankname-dropdown-ease),
    filter 280ms ease,
    visibility 0s linear 0s;
}

#rankname-selector.is-open .rankname-dropdown::before,
#rankname-selector.is-open .rankname-dropdown::after {
  opacity: 1;
  transform: scale(1);
}

#rankname-selector.is-open .rankname-group {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(42ms + var(--rankname-group-index, 0) * 34ms);
}

#rankname-selector.is-open .rankname-option .rankname-surface {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  #rankname-selector .rankname-trigger,
  #rankname-selector .rankname-trigger::after,
  #rankname-selector .rankname-dropdown,
  #rankname-selector .rankname-dropdown::before,
  #rankname-selector .rankname-dropdown::after,
  #rankname-selector .rankname-group,
  #rankname-selector .rankname-option .rankname-surface {
    transition: none;
  }

  #rankname-selector .rankname-dropdown {
    transform: none;
    filter: none;
  }
}

@media (max-width: 640px) {
  #rankname-selector .rankname-surface--trigger {
    min-height: 82px;
  }

  #rankname-selector .rankname-surface--option {
    min-height: 68px;
  }

  #rankname-selector .rankname-title-text {
    font-size: 13px;
  }

  #rankname-selector .rankname-surface__topline {
    flex-wrap: wrap;
    gap: 8px;
  }

  #rankname-selector .rankname-surface__chip {
    font-size: 8px;
  }
}

.mq-item.mq-item--validated-exiting .mq-action {
  opacity: 0;
  transform: translateX(8px) scale(0.96);
  pointer-events: none;
}

.mq-item.mq-item--skip-hidden {
  opacity: 0;
  pointer-events: none;
}

/* =========================================================
   Quetes du mois - refresh visuel uniquement
   ========================================================= */

body.profile-page #monthly-quests.monthly-quests-panel {
  --mq-premium-bg: rgba(5, 18, 31, 0.86);
  --mq-premium-line: rgba(156, 220, 255, 0.24);
  --mq-premium-line-strong: rgba(46, 232, 255, 0.46);
  --mq-premium-text: #f3fbff;
  --mq-premium-muted: rgba(221, 239, 248, 0.72);
  padding: 14px;
  border-radius: 8px;
  border: 1px solid var(--mq-premium-line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 34%),
    linear-gradient(145deg, rgba(8, 29, 46, 0.92), var(--mq-premium-bg));
  box-shadow: 0 18px 48px rgba(1, 7, 18, 0.42);
}

body.profile-page #monthly-quests .profile-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px;
  padding: 0;
  background: transparent;
}

body.profile-page #monthly-quests .profile-panel-title {
  display: grid;
  gap: 5px;
  min-width: 0;
  text-align: left;
}

body.profile-page #monthly-quests .mq-title-icon {
  display: none;
}

body.profile-page #monthly-quests .profile-kicker {
  color: #2ee8ff;
  font:
    800 0.68rem/1.1 "Trebuchet MS",
    system-ui,
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

body.profile-page #monthly-quests .section-title {
  margin: 0;
  color: var(--mq-premium-text);
  font:
    700 1.05rem/1.25 "Press Start 2P",
    "Trebuchet MS",
    system-ui,
    sans-serif;
  text-align: left;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.42),
    0 0 18px rgba(46, 232, 255, 0.16);
}

body.profile-page #monthly-quests .mq-title-sub {
  color: var(--mq-premium-muted);
}

body.profile-page #monthly-quests .mq-panel-copy {
  margin: -4px 0 12px;
  color: var(--mq-premium-muted);
  font:
    700 0.82rem/1.35 "Trebuchet MS",
    system-ui,
    sans-serif;
  text-align: left;
}

body.profile-page #monthly-quests .mq-deadline-note {
  margin: -4px 0 12px;
  padding: 8px 10px;
  border: 1px solid rgba(46, 232, 255, 0.24);
  border-radius: 8px;
  background: rgba(6, 32, 49, 0.52);
  color: rgba(232, 250, 255, 0.88);
  font:
    700 0.78rem/1.35 "Trebuchet MS",
    system-ui,
    sans-serif;
  text-align: left;
}

body.profile-page #monthly-quests .mq-deadline-note[hidden] {
  display: none;
}

body.profile-page #monthly-quests .mq-progress-chip-slot {
  width: min(100%, 190px);
  margin-left: auto;
}

body.profile-page #monthly-quests #quest-progress-chip {
  width: 100%;
}

body.profile-page #monthly-quests #mq-list {
  justify-items: stretch;
  gap: 10px;
  margin-top: 0;
}

@media (min-width: 769px) {
  body.profile-page #monthly-quests #mq-list {
    max-height: clamp(360px, 54vh, 620px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 6px;
    scrollbar-gutter: stable;
    align-content: start;
  }

  body.profile-page #monthly-quests #mq-list::-webkit-scrollbar {
    width: 8px;
  }

  body.profile-page #monthly-quests #mq-list::-webkit-scrollbar-track {
    background: rgba(2, 14, 25, 0.34);
    border-radius: 999px;
  }

  body.profile-page #monthly-quests #mq-list::-webkit-scrollbar-thumb {
    background: rgba(46, 232, 255, 0.34);
    border-radius: 999px;
  }
}

body.profile-page #monthly-quests .mq-type {
  width: 100%;
  min-width: 0;
}

body.profile-page #monthly-quests .mq-type-head {
  margin: 0 0 6px;
  justify-content: space-between;
  color: var(--mq-premium-muted);
  font:
    900 0.76rem/1.25 "Trebuchet MS",
    system-ui,
    sans-serif;
}

body.profile-page #monthly-quests .mq-viewport {
  border-radius: 8px;
}

body.profile-page #monthly-quests .mq-item {
  width: 100%;
  min-height: 72px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  border-color: rgba(156, 220, 255, 0.18);
  background:
    linear-gradient(90deg, rgba(46, 232, 255, 0.08), transparent 42%),
    rgba(4, 15, 27, 0.78);
}

body.profile-page #monthly-quests .mq-item::before {
  display: none;
}

body.profile-page #monthly-quests .mq-left {
  gap: 9px;
}

body.profile-page #monthly-quests .mq-ico {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

body.profile-page #monthly-quests .mq-title {
  visibility: visible;
  color: var(--mq-premium-text);
  font:
    900 0.82rem/1.18 "Trebuchet MS",
    system-ui,
    sans-serif;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

body.profile-page #monthly-quests .mq-progress {
  width: min(100%, 172px);
  height: 7px;
}

body.profile-page #monthly-quests .mq-action {
  min-width: 72px;
  min-height: 34px;
  border-radius: 8px;
  padding: 0 10px;
  color: #02131a;
}

@media (max-width: 768px) {
  body.profile-page.mobile-panels-mode #monthly-quests.monthly-quests-panel {
    --mq-mobile-pad: 14px;
    --mq-mobile-header-bg: #071a2a;
    box-sizing: border-box;
    isolation: isolate;
    padding-top: 0;
    overflow-x: hidden;
    scroll-padding-top: 132px;
  }

  body.profile-page #monthly-quests .profile-panel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 9px;
  }

  body.profile-page #monthly-quests .profile-kicker {
    grid-area: kicker;
    display: block;
    color: rgba(191, 239, 255, 0.82);
    font-size: 0.58rem;
    letter-spacing: 0.14em;
  }

  body.profile-page.mobile-panels-mode
    #monthly-quests
    > .header.profile-panel-head {
    position: sticky !important;
    top: 0;
    z-index: 40;
    overflow: visible;
    margin: 0 calc(var(--mq-mobile-pad) * -1) 14px;
    padding: 12px var(--mq-mobile-pad) 12px;
    border-bottom: 1px solid rgba(156, 220, 255, 0.18);
    border-radius: 8px 8px 0 0;
    background:
      linear-gradient(
        180deg,
        rgb(16, 55, 80),
        var(--mq-mobile-header-bg)
      ),
      linear-gradient(145deg, rgb(8, 29, 46), rgb(5, 18, 31));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
      0 12px 22px rgba(1, 7, 18, 0.34),
      0 1px 0 rgba(255, 255, 255, 0.06) inset;
  }

  body.profile-page.mobile-panels-mode
    #monthly-quests
    > .header.profile-panel-head::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -18px;
    left: 0;
    height: 18px;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(7, 26, 42, 0.64),
      rgba(7, 26, 42, 0)
    );
  }

  body.profile-page #monthly-quests .profile-panel-title {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-areas:
      "icon kicker"
      "icon title";
    column-gap: 10px;
    row-gap: 3px;
    align-items: center;
    width: 100%;
  }

  body.profile-page #monthly-quests .mq-title-icon {
    grid-area: icon;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(156, 220, 255, 0.3);
    border-radius: 8px;
    color: #031821;
    background:
      linear-gradient(135deg, rgba(62, 238, 255, 0.98), rgba(47, 177, 255, 0.9)),
      #2ee8ff;
    box-shadow:
      0 10px 22px rgba(1, 7, 18, 0.28),
      0 0 18px rgba(46, 232, 255, 0.18);
    font:
      900 1.2rem/1 "Trebuchet MS",
      system-ui,
      sans-serif;
  }

  body.profile-page #monthly-quests .section-title {
    grid-area: title;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 4px 9px 5px;
    border: 1px solid rgba(156, 220, 255, 0.18);
    border-radius: 8px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
      rgba(2, 14, 25, 0.38);
    color: #f4fbff;
    font:
      900 1rem/1.1 "Trebuchet MS",
      system-ui,
      sans-serif;
    letter-spacing: 0;
    overflow: hidden;
    text-shadow: 0 1px 10px rgba(46, 232, 255, 0.18);
  }

  body.profile-page #monthly-quests .mq-title-main,
  body.profile-page #monthly-quests .mq-title-sub {
    display: inline-flex;
    min-width: 0;
  }

  body.profile-page #monthly-quests .mq-title-sub {
    padding: 0;
    border: 0;
    border-radius: 0;
    color: rgba(191, 239, 255, 0.72);
    background: transparent;
    font:
      800 0.7rem/1.2 "Trebuchet MS",
      system-ui,
      sans-serif;
    text-transform: none;
  }

  body.profile-page #monthly-quests .mq-panel-copy {
    margin: 0 0 12px;
    padding: 9px 10px;
    border: 1px solid rgba(156, 220, 255, 0.14);
    border-radius: 8px;
    background: rgba(4, 15, 27, 0.44);
    font-size: 0.78rem;
  }

  body.profile-page #monthly-quests .mq-progress-chip-slot {
    width: 100%;
    margin-left: 0;
    padding: 8px;
    border: 1px solid rgba(156, 220, 255, 0.12);
    border-radius: 8px;
    background: rgba(2, 11, 20, 0.36);
  }

  body.profile-page #monthly-quests #mq-list {
    position: relative;
    z-index: 1;
    gap: 12px;
  }

  body.profile-page #monthly-quests .mq-type {
    overflow: hidden;
    border-radius: 8px;
  }

  body.profile-page #monthly-quests .mq-type-head {
    margin-bottom: 8px;
    padding: 0 2px;
  }

  body.profile-page #monthly-quests .mq-item {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 10px 28px rgba(1, 7, 18, 0.28);
  }

  body.profile-page #monthly-quests .mq-action,
  body.profile-page #monthly-quests .mq-progress {
    width: 100%;
  }
}

@media (max-width: 420px) {
  body.profile-page #monthly-quests .mq-left {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  body.profile-page #monthly-quests .mq-ico {
    width: 30px;
    height: 30px;
  }
}

#monthly-quests .mq-type {
  transition:
    opacity 0.24s ease,
    transform 0.24s ease;
}

#monthly-quests .mq-type--closing {
  position: relative;
  overflow: hidden;
  max-height: var(--mq-close-height, 180px);
  transform-origin: top center;
  animation: mqSeriesClose 0.9s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

#monthly-quests .mq-type--closing .mq-type-head {
  animation: mqSeriesHeadSeal 0.78s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

#monthly-quests .mq-type--closing .mq-viewport {
  max-height: 150px;
  transform-origin: top center;
  animation: mqSeriesViewportFold 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.12s
    forwards;
}

#monthly-quests .mq-type--closed {
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
  border: 1px solid rgba(88, 255, 190, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(56, 242, 166, 0.12), transparent 58%),
    rgba(4, 15, 27, 0.62);
  box-shadow:
    0 8px 22px rgba(1, 7, 18, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#monthly-quests .mq-type--closed .mq-type-head {
  margin: 0;
  padding: 9px 10px;
  min-height: 42px;
  gap: 8px;
}

#monthly-quests .mq-type--closed .mq-h {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#monthly-quests .mq-type-closed-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: max-content;
  padding: 5px 8px;
  border: 1px solid rgba(56, 242, 166, 0.36);
  border-radius: 999px;
  color: #dfffee;
  background:
    linear-gradient(180deg, rgba(56, 242, 166, 0.18), rgba(56, 242, 166, 0.08)),
    rgba(2, 20, 14, 0.42);
  box-shadow: 0 0 16px rgba(56, 242, 166, 0.12);
  font:
    900 0.68rem/1 "Trebuchet MS",
    system-ui,
    sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

#monthly-quests .mq-type-closed-badge > span {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  color: #062016;
  background: linear-gradient(135deg, #38f2a6, #7dffcf);
  box-shadow: 0 0 12px rgba(56, 242, 166, 0.34);
}

#monthly-quests .mq-type-dismiss {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid rgba(156, 220, 255, 0.24);
  border-radius: 999px;
  appearance: none;
  background: rgba(2, 11, 20, 0.36);
  color: rgba(235, 248, 255, 0.84);
  cursor: pointer;
  font:
    900 1rem/1 system-ui,
    sans-serif;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}

#monthly-quests .mq-type-dismiss > span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  transform: translateY(-1px);
}

#monthly-quests .mq-type-dismiss:hover,
#monthly-quests .mq-type-dismiss:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 116, 116, 0.5);
  background: rgba(86, 20, 24, 0.48);
  color: #fff;
}

#monthly-quests .mq-type-dismiss:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.54);
  outline-offset: 2px;
}

#monthly-quests .mq-type-dismiss[disabled] {
  cursor: default;
  opacity: 0.62;
}

#monthly-quests .mq-type--dismissing {
  pointer-events: none;
  max-height: var(--mq-dismiss-height, 52px);
  transform-origin: center right;
  animation: mqCompletedQuestDismiss 0.58s cubic-bezier(0.4, 0, 0.2, 1)
    forwards;
  will-change: max-height, opacity, transform;
}

#monthly-quests .mq-type--swiping {
  transform: translateX(var(--mq-swipe-x, 0));
  transition: none;
  will-change: transform;
}

#monthly-quests .mq-type--swipe-ready {
  border-color: rgba(255, 116, 116, 0.48);
  background:
    linear-gradient(90deg, rgba(255, 116, 116, 0.16), transparent 58%),
    rgba(4, 15, 27, 0.62);
}

@keyframes mqSeriesClose {
  0% {
    max-height: var(--mq-close-height, 180px);
    opacity: 1;
    transform: translateY(0);
    filter: brightness(1);
  }
  54% {
    max-height: var(--mq-close-height, 180px);
    opacity: 1;
    transform: translateY(-1px);
    filter: brightness(1.16);
  }
  100% {
    max-height: 52px;
    opacity: 1;
    transform: translateY(-3px);
    filter: brightness(1);
  }
}

@keyframes mqSeriesViewportFold {
  0% {
    max-height: 150px;
    opacity: 1;
    transform: perspective(620px) rotateX(0deg) scaleY(1);
  }
  100% {
    max-height: 0;
    opacity: 0;
    transform: perspective(620px) rotateX(-18deg) scaleY(0.72)
      translateY(-8px);
  }
}

@keyframes mqSeriesHeadSeal {
  0% {
    border-color: rgba(156, 220, 255, 0.18);
  }
  100% {
    border-color: rgba(56, 242, 166, 0.32);
    color: #dfffee;
    text-shadow: 0 0 14px rgba(56, 242, 166, 0.18);
  }
}

@keyframes mqCompletedQuestDismiss {
  0% {
    max-height: var(--mq-dismiss-height, 52px);
    opacity: 1;
    transform: translateX(0);
  }
  48% {
    max-height: var(--mq-dismiss-height, 52px);
    opacity: 0.28;
    transform: translateX(110%);
  }
  100% {
    max-height: 0;
    opacity: 0;
    transform: translateX(110%);
  }
}

@media (max-width: 420px) {
  #monthly-quests .mq-type--closed .mq-type-head {
    gap: 6px;
  }

  #monthly-quests .mq-type-dismiss {
    width: 26px;
    height: 26px;
  }
}