* { box-sizing: border-box; }

/* ============ Charte graphique Valastia v1 ============ */
:root {
  --font-display: "Lilita One", "Baloo 2", "Segoe UI", system-ui, sans-serif;
  --font-body: "Nunito", "Segoe UI", system-ui, sans-serif;

  /* Univers */
  --bg-primary: #1A122B;
  --bg-secondary: #24173A;
  --bg-card: #31204C;
  --bg-menu-selected: #43296B;
  --accent: #6A49C7;

  /* Valaston (or) */
  --gold-light: #FFD95A;
  --gold: #F6C542;
  --gold-dark: #D89A1A;
  --gold-shadow: #9C6510;
  --gold-shine: #FFF6BE;

  /* Agriculture */
  --wheat-young: #F5E79A;
  --wheat-ripe: #E7BE45;
  --earth-light: #B67A44;
  --earth-dark: #6A4325;
  --wood: #8C5B34;

  /* Nature */
  --green-light: #78D64B;
  --green: #4DAF4A;
  --green-dark: #2E7D32;
  --foliage: #1D5A2A;

  /* Magie */
  --blue-magic: #53D7FF;
  --blue-light: #8CEFFF;
  --cyan: #00C8FF;

  /* États */
  --success: #57D163;
  --error: #E74C3C;
  --warning: #FFB84D;
  --info: #63A9FF;

  /* Texte */
  --text-title: #FFFFFF;
  --text-main: #F2F0FF;
  --text-secondary: #CFC7E8;
  --text-disabled: #8C84A8;

  /* Raretés */
  --rarity-commune: #B8BDC7;
  --rarity-rare: #4DA7FF;
  --rarity-epic: #B066FF;
  --rarity-legendary: #F5C84C;
  --rarity-heritage-1: #5FE7FF;
  --rarity-heritage-2: #8C7CFF;
  --rarity-heritage-3: #FFD95A;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: url("assets/Arrière-Plan/Arrière-Plan.png") center top / cover no-repeat fixed,
              linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
  color: var(--text-main);
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

/* ============ Coquille d'application ============ */

.app-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: url("assets/Arrière-Plan/Arrière-Plan.png") center top / cover no-repeat;
}

/* Sur grand écran : on présente le prototype dans un cadre de téléphone,
   pour rappeler que c'est une application portable, pas une page web. */
@media (min-width: 560px) {
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 0;
  }

  .app-shell {
    width: 420px;
    height: 900px;
    max-height: 94vh;
    border-radius: 46px;
    border: 12px solid #0c0815;
    box-shadow:
      0 0 0 2px rgba(106,73,199,0.25) inset,
      0 30px 70px rgba(0,0,0,0.55);
  }

  /* petite encoche façon smartphone, purement décorative */
  .app-shell::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 22px;
    background: #0c0815;
    border-radius: 0 0 16px 16px;
    z-index: 500;
  }
}

/* ============ Barre du haut ============ */

.top-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 12px 10px;
}

.xp-pill {
  flex: 1 1 auto;
  min-width: 36px;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 65%);
  border: 2px solid var(--gold-dark);
  border-radius: 999px;
  padding: 0 10px;
  height: 26px;
  display: flex;
  align-items: center;
  box-shadow: 0 3px 0 var(--gold-shadow), 0 4px 8px rgba(0,0,0,0.3);
}

/* ============ Écrans (onglets) ============ */

.screens {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 4px 16px 16px;
  position: relative;
  /* Réserve l'horizontal au swipe de changement d'onglet (cf. setupScreenSwipe)
     sans casser le scroll vertical natif au doigt. */
  touch-action: pan-y;
}

/* Pendant le swipe, l'écran actuel ET l'écran voisin (cf. setupScreenSwipe)
   passent tous les deux en absolu pour se superposer et glisser ensemble en
   temps réel, plutôt que de ne voir que le fond pendant le geste. #screens
   reçoit une hauteur figée en JS le temps du drag pour ne pas s'effondrer
   quand ses enfants sortent du flux normal. */
.screen.swipe-pane {
  position: absolute;
  top: 4px;
  left: 16px;
  right: 16px;
  width: auto;
}

.screen-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text-title);
  border-bottom: 2px solid rgba(106,73,199,0.5);
  padding-bottom: 6px;
  margin: 16px 0 10px;
  letter-spacing: 0.2px;
  text-shadow: 0 2px 0 rgba(0,0,0,0.5);
}

.screen-title:first-child { margin-top: 6px; }

.screen-title-compact {
  font-size: 0.95rem;
  margin: 10px 0 8px;
  padding-bottom: 4px;
}

.screen-title-sub {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--text-secondary);
  letter-spacing: 0;
}

/* ============ Barre de navigation basse ============ */

.bottom-nav {
  flex-shrink: 0;
  display: flex;
  background: var(--bg-secondary);
  border-top: 2px solid var(--bg-menu-selected);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 14px rgba(0,0,0,0.3);
  z-index: 20;
}

.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  border: none;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  color: var(--text-disabled);
}

.nav-icon {
  position: relative;
  font-size: 1.5rem;
  line-height: 1;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s ease, transform 0.15s ease;
}

.nav-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

.nav-icon-emoji {
  font-size: 1.55rem;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

.nav-btn.active .nav-icon {
  background: linear-gradient(180deg, var(--bg-menu-selected) 0%, var(--accent) 100%);
  box-shadow: 0 0 0 2px var(--accent);
  transform: scale(1.08);
}

/* Le blé est l'action centrale du jeu (cf. demande "mets-le au milieu, plus en
   avant, c'est l'élément central") : bouton central surélevé façon FAB, toujours
   doré, plus grand que les autres onglets. */
.nav-btn-primary {
  overflow: visible;
}
.nav-btn-primary .nav-icon {
  width: 62px;
  height: 62px;
  margin-top: -22px;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 65%);
  border: 3px solid var(--gold-dark);
  box-shadow: 0 6px 14px rgba(0,0,0,0.45), 0 0 0 4px var(--bg-secondary);
}
.nav-btn-primary .nav-icon img {
  width: 40px;
  height: 40px;
}
.nav-btn-primary.active .nav-icon {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 65%);
  box-shadow: 0 6px 14px rgba(0,0,0,0.45), 0 0 0 4px var(--accent);
  transform: scale(1.05);
}
.nav-btn-primary:active .nav-icon { transform: scale(0.94); }

.nav-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.58rem;
  white-space: nowrap;
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.nav-dot {
  position: absolute;
  top: -3px;
  right: -6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--error);
  border: 2px solid var(--bg-secondary);
  display: none;
}

.nav-dot.show { display: block; animation: dotPulse 1.4s ease-in-out infinite; }

@keyframes dotPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}

/* ============ Récolte ============ */

.click-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 6px 0 14px;
}

.wheat-drop {
  position: absolute;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--gold-dark);
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 65%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  z-index: 15;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4), 0 0 0 4px rgba(255,217,90,0.25);
  animation: wheatDropPop 0.3s ease-out, wheatDropBob 1.4s ease-in-out 0.3s infinite;
}
.wheat-drop .icon-inline {
  width: 28px;
  height: 28px;
  margin: 0;
}
.wheat-drop:active { transform: scale(0.88); }

@keyframes wheatDropPop {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes wheatDropBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.combo-label {
  display: none;
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8rem;
  color: var(--warning);
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}

.combo-label.show { display: block; animation: comboPop 0.18s ease; }

/* Combo de vente (cf. retour "combos de vente, + on vend d'affilé + ça
   augmente") : même style que .combo-label (clics), repositionné sous le
   bouton Vendre plutôt que dans .click-zone. */
.sell-combo-label {
  text-align: center;
  margin: -4px 0 8px;
  color: var(--gold-light);
}

@keyframes comboPop {
  0%   { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.harvest-btn {
  position: relative;
  width: 188px;
  height: 188px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.08s ease, filter 0.08s ease;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.harvest-btn img {
  width: 98%;
  height: 98%;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.5));
  pointer-events: none;
  -webkit-user-drag: none;
  animation: harvestFloat 3s ease-in-out infinite;
}

@keyframes harvestFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.harvest-btn:hover { filter: brightness(1.06); }
.harvest-btn:active { transform: scale(0.93); }
.harvest-btn.click-pulse { animation: harvestClickPulse 0.18s ease; }
@keyframes harvestClickPulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.harvest-btn.crit-pulse { animation: critPulse 0.3s ease; }

.click-burst-flash {
  position: absolute;
  width: 70px;
  height: 70px;
  margin: -35px 0 0 -35px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,245,210,0.95) 0%, rgba(255,217,90,0.55) 40%, rgba(255,217,90,0) 72%);
  pointer-events: none;
  z-index: 5;
  animation: clickBurstFlash 0.45s ease-out forwards;
}

@keyframes clickBurstFlash {
  0%   { opacity: 0; transform: scale(0.55); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.35); }
}

.click-burst-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 8px 2px rgba(255,217,90,0.85);
  pointer-events: none;
  z-index: 6;
  animation: clickBurstParticle 0.55s ease-out forwards;
}

@keyframes clickBurstParticle {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.15); opacity: 0; }
}

@keyframes critPulse {
  0%   { transform: scale(1); filter: brightness(1); }
  40%  { transform: scale(1.15); filter: brightness(1.4) drop-shadow(0 0 18px var(--gold-light)); }
  100% { transform: scale(1); filter: brightness(1); }
}

.click-info {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-title);
  font-size: 1rem;
  letter-spacing: 0.2px;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0,0,0,0.5);
}

.progress-bar {
  width: 220px;
  max-width: 100%;
  height: 10px;
  background: var(--bg-card);
  border: 1px solid rgba(106,73,199,0.4);
  border-radius: 6px;
  margin-top: 8px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold) , var(--gold-dark));
  transition: width 0.15s ease;
}

.progress-label {
  margin-top: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}

.float-text {
  position: absolute;
  top: 20%;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: rgba(255,255,255,0.75);
  pointer-events: none;
  animation: floatUp 0.8s ease-out forwards;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0,0,0,0.5);
}

.float-text.crit-text {
  color: var(--gold-light);
  font-size: 1.5rem;
  text-shadow: 0 2px 0 rgba(0,0,0,0.5), 0 0 10px rgba(255,217,90,0.6);
}

/* Gain de Rubis (cf. retour "je dois pouvoir voir un rubis, pas juste +3 blé") :
   couleur et halo dédiés, bien distincts du blé (blanc) et du critique (doré). */
.float-text.rubis-text {
  color: #ff5d7a;
  font-size: 1.35rem;
  text-shadow: 0 2px 0 rgba(0,0,0,0.5), 0 0 12px rgba(255,93,122,0.7);
  animation: floatUp 0.8s ease-out forwards, rubisSparkle 0.5s ease-in-out;
}
@keyframes rubisSparkle {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.5); }
}

@keyframes floatUp {
  0%   { opacity: 0; transform: translate(-50%, 4px) scale(0.85); }
  15%  { opacity: 1; transform: translate(-50%, -4px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60px) scale(1); }
}

/* ============ Stats ============ */

.stats {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 8px;
}

.stat-pill {
  flex: 0 1 auto;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 65%);
  border: 2px solid var(--gold-dark);
  border-radius: 999px;
  padding: 3px 10px 3px 3px;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 3px 0 var(--gold-shadow), 0 4px 8px rgba(0,0,0,0.3);
  min-width: 0;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.stat-pill:active { transform: scale(0.96); }

.stat-pill-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}

.stat-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.86rem;
  color: #4a2f0a;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-inline {
  width: 16px;
  height: 16px;
  object-fit: contain;
  vertical-align: -3px;
  margin: 0 1px;
}

.title-icon {
  width: 20px;
  height: 20px;
  vertical-align: -5px;
}

.trophy-icon-lg {
  width: 26px;
  height: 26px;
  object-fit: contain;
  vertical-align: middle;
}

.boost-status {
  display: none;
  width: 220px;
  max-width: 100%;
  margin-top: 10px;
  background: linear-gradient(180deg, var(--bg-menu-selected) 0%, var(--accent) 100%);
  border: 2px solid var(--accent);
  border-radius: 10px;
  padding: 6px 10px;
  text-align: center;
  box-shadow: 0 3px 8px rgba(106,73,199,0.5);
}

.boost-status.show { display: block; }

#boostStatusLabel {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.82rem;
  color: var(--text-title);
}

.boost-status-bar {
  height: 6px;
  margin-top: 4px;
  background: rgba(0,0,0,0.3);
  border-radius: 4px;
  overflow: hidden;
}

.boost-status-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue-magic), var(--accent));
  transition: width 1s linear;
}

/* Boost royal (cf. demande "comme pour les contrats royaux") : même carcasse que
   .boost-status, habillage doré distinct pour signaler que c'est exceptionnel —
   indépendant du boost normal, les deux peuvent s'afficher en même temps. */
.royal-boost-status {
  background: linear-gradient(180deg, #3a2a12 0%, var(--gold-dark) 100%);
  border-color: var(--gold);
  box-shadow: 0 3px 10px rgba(240,178,62,0.55);
  animation: royalShimmer 2.2s ease-in-out infinite;
}
.royal-boost-status #royalBoostStatusLabel {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.82rem;
  color: var(--gold-light);
}
.royal-boost-status .boost-status-fill {
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
}

.sell-btn {
  display: block;
  width: 100%;
  margin: 0 0 20px;
  padding: 12px 22px;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 65%);
  color: #4a2f0a;
  border: 2px solid var(--gold-dark);
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  touch-action: manipulation;
  text-shadow: 0 1px 1px rgba(255,255,255,0.35);
  box-shadow: 0 4px 0 var(--gold-shadow), 0 7px 12px rgba(0,0,0,0.3);
  transition: transform 0.06s ease, box-shadow 0.06s ease, filter 0.1s ease;
}

.sell-btn:hover { filter: brightness(1.06); }
.sell-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--gold-shadow); }

.sell-btn-compact {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 100%;
  margin: 0 0 10px;
  padding: 7px 18px 8px;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 65%);
  color: #4a2f0a;
  border: 2px solid var(--gold-dark);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 3px 0 var(--gold-shadow), 0 5px 8px rgba(0,0,0,0.3);
  transition: transform 0.06s ease, box-shadow 0.06s ease, filter 0.25s ease, background 0.3s ease;
}

.sell-btn-compact:hover { filter: brightness(1.06); }
.sell-btn-compact:active { transform: translateY(3px); box-shadow: 0 0 0 var(--gold-shadow); }

.sell-btn-label { display: block; }
.sell-btn-preview {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.75;
}

/* États du marché (cf. demande "rendre le bouton Vendre attractif") — le prix
   du marché pilote désormais la couleur du bouton, pas le stock de blé (c'est
   le prix qui rend l'action attractive ou non, cf. retour). */
.sell-btn-compact.market-bas { filter: grayscale(0.55) brightness(0.82); }
.sell-btn-compact.market-haut {
  background: linear-gradient(180deg, #fff6d8 0%, #ffb300 65%);
  box-shadow: 0 3px 0 var(--gold-shadow), 0 5px 14px rgba(255,179,0,0.55);
}
.sell-btn-compact.market-pic {
  background: linear-gradient(180deg, #fffbe8 0%, var(--gold) 60%);
  box-shadow: 0 3px 0 var(--gold-shadow), 0 0 18px rgba(255,217,90,0.85), 0 0 34px rgba(255,180,50,0.5);
  animation: marketPicPulse 1.4s ease-in-out infinite;
}
@keyframes marketPicPulse {
  0%, 100% { box-shadow: 0 3px 0 var(--gold-shadow), 0 0 18px rgba(255,217,90,0.85), 0 0 34px rgba(255,180,50,0.5); }
  50% { box-shadow: 0 3px 0 var(--gold-shadow), 0 0 28px rgba(255,217,90,1), 0 0 50px rgba(255,180,50,0.75); }
}

/* Petit rebond au clic (cf. demande "micro-interaction") — animation courte qui
   revient à scale(1), retirée par JS une fois finie (cf. sellWheat), même
   pattern que .level-pulse ailleurs dans le jeu. */
.sell-btn-compact.bounce { animation: sellBounce 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes sellBounce {
  0% { transform: scale(1); }
  45% { transform: scale(0.93); }
  100% { transform: scale(1); }
}

/* Gain flottant ancré sur le bouton lui-même (position:relative déjà en place
   ci-dessus) plutôt que sur .click-zone comme le texte flottant générique —
   cf. demande "le texte apparaît au-dessus du bouton". Réutilise l'animation
   floatUp existante, juste repositionnée plus haut. */
.float-text.sell-gain-text { top: -18px; }

.market-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 2px 0 6px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-secondary);
  transition: color 0.3s ease;
}
.market-arrow { font-size: 0.78rem; }
.market-indicator.market-pic-active {
  color: var(--gold-light);
  text-shadow: 0 0 8px rgba(255,217,90,0.7);
}

/* ============ Contrat compact (fusionné sur Ferme) ============ */

.contract-bar {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  border: 2px solid var(--bg-menu-selected);
  border-radius: 12px;
  padding: 6px 8px;
  margin: 0 0 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.contract-bar-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.contract-bar-icon { flex-shrink: 0; }

.contract-bar-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contract-bar-text strong {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--text-title);
}

.contract-bar-progress {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.contract-bar-royal-timer {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.7rem;
  color: #d8c4ff;
}

.contract-bar-track {
  width: 100%;
  height: 7px;
  margin: 0 0 6px;
}

.contract-bar-track .progress-fill {
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
}

.contract-bar-btn {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  padding: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  color: #4a2f0a;
  border: 2px solid var(--gold-dark);
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 65%);
  box-shadow: 0 3px 0 var(--gold-shadow);
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}

.contract-bar-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--gold-shadow); }

.contract-bar-btn:disabled {
  background: var(--bg-card);
  border-color: var(--bg-menu-selected);
  color: var(--text-disabled);
  box-shadow: 0 3px 0 var(--bg-menu-selected);
  cursor: not-allowed;
}

/* Contrat royal (cf. demande "occasionnel, plutôt rare, avec une animation, un
   fond différent qui montre que c'est exceptionnel") — fond doré/violet
   scintillant en permanence tant qu'il est actif, + une bannière injectée en
   CSS (pas besoin de markup dédié) et une seule impulsion d'apparition. */
.contract-bar.royal {
  position: relative;
  border-color: var(--rarity-heritage-2);
  background: linear-gradient(160deg, rgba(140,124,255,0.22), rgba(255,217,90,0.16)), linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  box-shadow: 0 0 14px rgba(140,124,255,0.55), 0 2px 6px rgba(0,0,0,0.3);
}
.contract-bar.royal::before {
  content: "👑 CONTRAT ROYAL — récompense ×10";
  display: block;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--gold-light);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  margin-bottom: 4px;
  animation: royalShimmer 2.4s ease-in-out infinite;
}
@keyframes royalShimmer {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; text-shadow: 0 0 8px rgba(255,217,90,0.85); }
}
.contract-bar.royal .contract-bar-btn {
  background: linear-gradient(180deg, #b08cff 0%, #7a4fe0 65%);
  border-color: #5a35b0;
  color: #fff;
  box-shadow: 0 3px 0 #4a2890;
}
.contract-bar.royal .contract-bar-track .progress-fill {
  background: linear-gradient(90deg, #b08cff, #7a4fe0);
}
.contract-bar.royal-reveal {
  animation: royalReveal 0.9s ease;
}
@keyframes royalReveal {
  0% { transform: scale(1); }
  15% { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(140,124,255,0.5), 0 0 30px rgba(255,217,90,0.85); }
  100% { transform: scale(1); box-shadow: 0 0 14px rgba(140,124,255,0.55), 0 2px 6px rgba(0,0,0,0.3); }
}

.reset-link {
  display: block;
  margin: 4px auto 0;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: underline;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  cursor: pointer;
  padding: 8px;
}

/* ============ Cartes de boutique ============ */

/* Le booster est l'atout principal de la Boutique (cf. demande) : grande
   illustration en vedette, tout le reste vient en dessous. */
.booster-hero {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 4px 0 14px;
}
.booster-hero-img {
  width: 78%;
  max-width: 320px;
  height: auto;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,0.55));
  animation: hangarHeroFloat 3.4s ease-in-out infinite;
  cursor: pointer;
  touch-action: manipulation;
}

.booster-tear-piece {
  position: absolute;
  top: 0;
  left: 50%;
  width: 78%;
  max-width: 320px;
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,0.55));
}
.booster-tear-top {
  clip-path: polygon(0 0, 100% 0, 100% 42%, 87% 47%, 75% 43%, 62% 49%, 50% 44%, 38% 50%, 25% 45%, 13% 49%, 0 44%);
  animation: boosterTearTop 0.55s ease forwards;
}
.booster-tear-bottom {
  clip-path: polygon(0 44%, 13% 49%, 25% 45%, 38% 50%, 50% 44%, 62% 49%, 75% 43%, 87% 47%, 100% 42%, 100% 100%, 0 100%);
  animation: boosterTearBottom 0.55s ease forwards;
}
@keyframes boosterTearTop {
  0%   { transform: translateX(-50%) translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateX(-95%) translateY(-70px) rotate(-30deg); opacity: 0; }
}
@keyframes boosterTearBottom {
  0%   { transform: translateX(-50%) translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateX(-5%) translateY(70px) rotate(28deg); opacity: 0; }
}


.card-list {
  display: grid;
  gap: 10px;
}

/* ============ Améliorations compactes (3 colonnes, cf. maquette) ============ */

.mini-shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

/* Les deux conteneurs (Blé/Valastons) laissent leurs cartes rejoindre la même
   grille 3 colonnes, plutôt que de former deux blocs séparés. */
.mini-shop-group { display: contents; }

.mini-card {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  border: 2px solid var(--bg-menu-selected);
  border-radius: 14px;
  padding: 8px 4px 7px;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
  transition: transform 0.06s ease, filter 0.1s ease;
}

.mini-card:active { transform: scale(0.96); }

.mini-card-cost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--text-title);
}

.mini-card-cost img { width: 15px; height: 15px; object-fit: contain; }

.mini-card-level {
  display: inline-block;
  margin-top: 4px;
  background: var(--bg-menu-selected);
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 6px;
}

.mini-card-desc {
  margin-top: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-secondary);
  line-height: 1.2;
}

.mini-card.unaffordable {
  opacity: 0.55;
  filter: grayscale(0.4);
  cursor: not-allowed;
}

/* Achat groupé x10 (cf. demande "le bouton x10 doit être présent avec la
   somme que cela représente, achat possible uniquement si on possède
   l'entièreté de la somme") — compact pour tenir sous une mini-carte étroite. */
.mini-card-x10 {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 4px 2px;
  border: none;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.56rem;
  line-height: 1.25;
  color: var(--bg-primary);
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 65%);
  cursor: pointer;
  touch-action: manipulation;
}
.mini-card-x10:disabled {
  background: var(--bg-menu-selected);
  color: var(--text-secondary);
  cursor: not-allowed;
}

.card {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  border: 2px solid var(--bg-menu-selected);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}

.card-info { flex: 1; min-width: 0; }
.card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--text-title);
}
.card-desc { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); margin-top: 1px; }

.level-badge {
  display: inline-block;
  background: var(--bg-menu-selected);
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 6px;
  margin-left: 4px;
  vertical-align: middle;
}

/* --- Carte d'achat du booster (Boutique) --- */

.booster-buy-card {
  position: relative;
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  border: 2px solid var(--bg-menu-selected);
  border-radius: 14px;
  padding: 14px 16px;
  text-align: center;
}

.booster-buy-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.booster-info-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.42);
  color: rgba(255,255,255,0.8);
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.booster-info-btn:active { transform: scale(0.92); }

.booster-buy-card .card-desc { margin: 4px 0 12px; }

.booster-rates-popover {
  position: absolute;
  top: 32px;
  right: 6px;
  z-index: 4;
  width: 168px;
  background: var(--bg-primary);
  border: 1px solid var(--bg-menu-selected);
  border-radius: 10px;
  padding: 8px 12px;
  text-align: left;
  box-shadow: 0 8px 18px rgba(0,0,0,0.45);
}
.booster-rate-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.booster-rate-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.booster-rate-label { flex: 1; }
.booster-rate-val { font-family: var(--font-display); color: var(--text-title); }

.booster-buy-btn {
  display: block;
  margin: 0 auto;
  min-width: 60%;
  font-size: 1rem;
  padding: 12px 26px;
}

/* Achat groupé x10 (cf. demande "une option pour acheter 10 boosters/10
   améliorations d'un coup") — bouton compact à côté du bouton normal. */
.booster-buy-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  justify-content: center;
}
.booster-buy-row .booster-buy-btn {
  display: inline-block;
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
}
.bulk-btn {
  flex: 0 0 auto;
  font-size: 0.72rem;
  line-height: 1.25;
  padding: 8px 12px;
  min-width: 54px;
}
/* La version boutique affiche la somme totale (cf. demande "le bouton x10
   doit être présent avec la somme que cela représente") — texte plus long,
   donc plus petit et autorisé à passer sur 2 lignes plutôt que déborder. */
.booster-buy-row .bulk-btn {
  flex: 1 1 auto;
  font-size: 0.68rem;
  line-height: 1.2;
  white-space: normal;
  padding: 8px 6px;
}

.card-btn {
  font-family: var(--font-display);
  border-radius: 10px;
  padding: 9px 16px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  touch-action: manipulation;
  color: #fff;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  transition: transform 0.06s ease, box-shadow 0.06s ease, filter 0.1s ease;
}

.card-btn:hover:not(:disabled) { filter: brightness(1.07); }
.card-btn:active:not(:disabled) { transform: translateY(4px); }

.btn-green {
  background: linear-gradient(180deg, var(--green-light) 0%, var(--green) 65%);
  border: 2px solid var(--green-dark);
  box-shadow: 0 4px 0 var(--green-dark), 0 6px 10px rgba(0,0,0,0.3);
}
.btn-green:active:not(:disabled) { box-shadow: 0 0 0 var(--green-dark); }

.btn-blue {
  background: linear-gradient(180deg, var(--blue-light) 0%, var(--blue-magic) 65%);
  border: 2px solid var(--cyan);
  color: #0a3a4a;
  text-shadow: none;
  box-shadow: 0 4px 0 var(--cyan), 0 6px 10px rgba(0,0,0,0.3);
}
.btn-blue:active:not(:disabled) { box-shadow: 0 0 0 var(--cyan); }

.btn-gold {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 65%);
  border: 2px solid var(--gold-dark);
  color: #4a2f0a;
  box-shadow: 0 4px 0 var(--gold-shadow), 0 6px 10px rgba(0,0,0,0.3);
}
.btn-gold:active:not(:disabled) { box-shadow: 0 0 0 var(--gold-shadow); }

.btn-purple {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--rarity-epic) 0%, var(--accent) 65%);
  border: 2px solid var(--bg-menu-selected);
  box-shadow: 0 4px 0 var(--bg-menu-selected), 0 6px 10px rgba(0,0,0,0.3);
}
.btn-purple:active:not(:disabled) { box-shadow: 0 0 0 var(--bg-menu-selected); }

.card-btn:disabled {
  background: var(--bg-card);
  border: 2px solid var(--bg-menu-selected);
  box-shadow: 0 4px 0 var(--bg-menu-selected);
  color: var(--text-disabled);
  text-shadow: none;
  cursor: not-allowed;
}

.card-btn.owned {
  background: linear-gradient(180deg, var(--green-light) 0%, var(--green) 65%);
  border: 2px solid var(--green-dark);
  box-shadow: 0 4px 0 var(--green-dark);
  color: #16321a;
  text-shadow: none;
  cursor: default;
}

/* ============ Niveau de compte ============ */

.level-badge-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold-dark));
  border: 3px solid var(--gold-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #4a2f0a;
  box-shadow: 0 3px 6px rgba(0,0,0,0.4);
  padding: 0;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.level-badge-circle:active { transform: scale(0.94); }

.level-badge-label {
  font-family: var(--font-display);
  font-size: 0.4rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1;
}

#levelNumber {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.1;
}

.level-badge-circle.level-pulse {
  animation: critPulse 0.5s ease;
}

.xp-bar {
  width: 100%;
  height: 8px;
  background: rgba(0,0,0,0.25);
  border-radius: 8px;
  overflow: hidden;
}

.xp-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue-light), var(--blue-magic));
  transition: width 0.2s ease;
}

/* ============ Overlays (relatifs à la coquille d'app) ============ */

/* --- Choix de Talent --- */

.talent-modal {
  position: absolute;
  inset: 0;
  background: rgba(10,7,18,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.talent-modal.show {
  opacity: 1;
  pointer-events: auto;
}

.talent-modal-inner {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  border: 3px solid var(--accent);
  border-radius: 20px;
  padding: 24px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.55);
  transform: translateY(10px) scale(0.97);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.talent-modal.show .talent-modal-inner {
  transform: translateY(0) scale(1);
}

.talent-modal-inner h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--text-title);
}

.talent-modal-inner p {
  margin: 0 0 18px;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.88rem;
}

/* Modal de confirmation de l'Orbe de Réinitialisation (cf. retour "le bouton ne
   fonctionne plus, il faudrait qu'il fonctionne avec le message de prévention") :
   remplace window.confirm() natif, peu fiable en PWA/webview mobile (silencieux
   ou bloqué selon les plateformes), par un modal in-app cohérent avec les
   autres (talentModal/resourceInfoModal). */
.orb-confirm-inner { border-color: var(--rarity-heritage-2); }
.orb-confirm-icon {
  width: 88px;
  height: 88px;
  object-fit: contain;
  margin: 0 auto 8px;
  display: block;
  filter: drop-shadow(0 0 16px rgba(140,124,255,0.65));
  animation: heritageShimmer 3s ease-in-out infinite;
}
.orb-confirm-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.orb-confirm-btn {
  flex: 1 1 0;
  padding: 12px;
  border-radius: 12px;
  border: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
.orb-confirm-btn.cancel {
  background: var(--bg-menu-selected);
  color: var(--text-secondary);
}
.orb-confirm-btn.confirm {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 65%);
  color: #2a1a05;
}

.talent-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.talent-option {
  background: linear-gradient(180deg, var(--bg-menu-selected) 0%, var(--bg-card) 100%);
  border: 2px solid var(--gold-dark);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  touch-action: manipulation;
  text-align: left;
  box-shadow: 0 4px 0 var(--gold-shadow), 0 6px 10px rgba(0,0,0,0.3);
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}

.talent-option:hover { filter: brightness(1.1); }
.talent-option:active { transform: translateY(4px); box-shadow: 0 0 0 var(--gold-shadow); }

.talent-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--gold-light);
  margin-bottom: 4px;
}

.talent-desc {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* --- Détail d'une carte Talent (bouton ⓘ) --- */

.talent-info-inner {
  position: relative;
  max-width: 280px;
  padding: 22px 20px 20px;
}

.talent-info-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.35);
  color: var(--text-main);
  font-size: 0.85rem;
  cursor: pointer;
  touch-action: manipulation;
}
.talent-info-close:active { transform: scale(0.92); }

.talent-info-portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
}

.talent-info-portrait .card-art-char {
  animation: cardCharFloat 3s ease-in-out infinite;
}

@keyframes cardCharFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.talent-info-icon {
  font-size: 3.5rem;
  text-align: center;
  padding: 20px 0;
}

.talent-info-name {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--text-title);
  text-align: center;
}

.talent-info-type {
  margin-top: 3px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold-light);
  text-align: center;
}

.talent-info-type.secondary {
  margin-top: 1px;
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.talent-info-desc {
  margin-top: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.4;
}

.talent-info-level {
  margin-top: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-align: center;
}

.talent-info-inner .talent-tile-lvbar { margin-top: 4px; height: 6px; }
.talent-info-inner .talent-upgrade-btn { margin-top: 10px; font-size: 0.8rem; padding: 8px; }
.talent-info-inner .talent-tile-copies { text-align: center; margin-top: 4px; font-size: 0.68rem; }

#talentInfoContent.rarity-rare .talent-info-portrait { box-shadow: 0 0 0 3px var(--rarity-rare); }
#talentInfoContent.rarity-epique .talent-info-portrait { box-shadow: 0 0 0 3px var(--rarity-epic); }
#talentInfoContent.rarity-heritage .talent-info-portrait { box-shadow: 0 0 0 3px var(--rarity-heritage-2); }

/* --- Contrat --- */

.contract-card {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  border: 2px solid var(--bg-menu-selected);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 0 0 18px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}

.contract-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.contract-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--text-title);
}

.contract-progress {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.contract-desc {
  margin: 0 0 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.contract-desc strong {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--text-title);
}

.contract-hint {
  display: block;
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--text-disabled);
  margin-top: 2px;
}

.contract-bar.contract-card-bar {
  width: 100%;
  margin: 0 0 12px;
}

.contract-deliver-btn {
  width: 100%;
  justify-content: center;
}

/* --- Packs de Talents --- */

.pack-collection {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.pack-count {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
}

/* Révélation de booster : contrairement aux toasts (niveau, boost, saison) qui ne
   doivent JAMAIS bloquer le clic, ouvrir un booster est une action DÉLIBÉRÉE — le
   joueur s'arrête volontairement pour le faire. On peut donc se permettre un vrai
   moment de mise en scène façon "coffre", tant que ça reste bref et qu'un tap
   n'importe où le referme immédiatement (cf. étude du dossier inspiration).
   Réservée aux VRAIES nouvelles cartes — un doublon reste un petit toast rapide. */
.pack-reveal {
  position: absolute;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgba(6, 4, 12, 0);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.3s ease, background 0.3s ease;
}

.pack-reveal.show {
  opacity: 1;
  pointer-events: auto;
  background: rgba(6, 4, 12, 0.85);
}

.pack-reveal-card-wrap {
  perspective: 1000px;
}

.pack-reveal-inner {
  position: relative;
  width: 220px;
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  border-radius: 20px;
  padding: 26px 18px 20px;
  text-align: center;
  box-shadow: 0 24px 50px rgba(0,0,0,0.6);
  border: 4px solid var(--rarity-commune);
  transform: translateY(70px) scale(0.9);
  opacity: 0;
}

/* Grande illustration (cf. demande "l'illustration doit apparaître en grand, pas
   juste une simple carte") — utilisée pour la pile de révélation d'un booster. */
.pack-reveal-inner.big {
  width: min(86vw, 350px);
}

/* IMPORTANT : l'entrée de CHAQUE carte (y compris la toute première) est
   pilotée uniquement par la classe .rise-in ajoutée en JS (showBoosterCardReveal).
   Il ne doit PAS exister d'autre règle qui déclare `animation: cardRiseIn` sur
   .pack-reveal-inner (ex. via `.pack-reveal.show .pack-reveal-inner`) : une telle
   règle, plus spécifique que `.pack-reveal-inner.rise-in` seule, gagnerait toujours
   la cascade et figerait la valeur calculée de `animation` — du coup l'ajout/retrait
   de .rise-in en JS ne changerait plus rien et l'animation ne se rejouerait qu'une
   seule fois (à l'ouverture du overlay), jamais entre les cartes suivantes : c'est
   exactement le bug "on ne voit plus la carte, l'écran reste noir" observé. */
.pack-reveal-inner.rise-in {
  animation: cardRiseIn 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.1) forwards;
}
@keyframes cardRiseIn {
  0%   { transform: translateY(70px) scale(0.9); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Effet de pile (cf. demande "on les voit entassées les unes après les autres") :
   1 ou 2 bords décalés derrière la carte du dessus, tant qu'il en reste dans le
   booster — capé à 2 pour rester lisible même avec 5 cartes.
   Prévisualisation au toucher (cf. demande "pencher vers un côté pour voir la
   rareté des cartes suivantes, ça crée de la dopamine") : --stack-color-1/2
   (posées en JS dans showBoosterCardReveal, cf. RARITY_STACK_COLOR) teintent
   ces bords selon la VRAIE rareté des prochaines cartes — déjà connue dès
   l'ouverture, donc pas besoin d'attendre de les révéler. --peek (-1→1, signé,
   piloté par dx en drag horizontal dans setupBoosterRevealSwipe) décale la
   pile DANS LE SENS du geste — pencher à droite révèle sur la droite, à gauche
   sur la gauche — et --peekAbs (0→1, |peek|) pilote l'opacité/profondeur sans
   dépendre du signe. Retombe à 0 dès qu'on relâche. */
.pack-reveal-inner[data-stack]::before,
.pack-reveal-inner[data-stack]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: var(--bg-card);
  border: 4px solid var(--stack-color-fallback, var(--bg-menu-selected));
  transition: transform 0.18s ease-out, opacity 0.18s ease-out, border-color 0.15s ease;
}
.pack-reveal-inner[data-stack]::before {
  z-index: -1;
  border-color: var(--stack-color-1, var(--bg-menu-selected));
  transform: translate(calc(8px + var(--peek, 0) * 34px), calc(10px + var(--peekAbs, 0) * 6px)) rotate(calc(2deg + var(--peek, 0) * 10deg));
}
.pack-reveal-inner[data-stack]::after {
  z-index: -2;
  opacity: calc(0.7 + var(--peekAbs, 0) * 0.3);
  border-color: var(--stack-color-2, var(--bg-menu-selected));
  transform: translate(calc(16px + var(--peek, 0) * 58px), calc(20px + var(--peekAbs, 0) * 10px)) rotate(calc(4deg + var(--peek, 0) * 13deg));
}
.pack-reveal-inner[data-stack="0"]::before,
.pack-reveal-inner[data-stack="0"]::after,
.pack-reveal-inner[data-stack="1"]::after { content: none; }

.pack-reveal-icon {
  font-size: 3.2rem;
  line-height: 1;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.4));
}

/* Orbe de Réinitialisation dans la pile de révélation (cf. retour "objet très
   rare, il faut absolument la voir") — grande icône centrée, pas de crop plein
   cadre comme les illustrations de carte. */
.pack-reveal-resource-img {
  width: 60%;
  max-width: 160px;
  margin: 4px auto 0;
  display: block;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5));
}

/* overflow:hidden retiré ici (cf. retour "l'illustration de fond pose problème,
   elle ne permet pas de voir derrière") : cette règle clippait TOUT ce qui
   dépasse de .pack-reveal-inner, y compris les bords empilés des cartes
   suivantes (::before/::after, cf. plus bas) qui doivent pourtant déborder
   pour être visibles pendant le peek au toucher. Le clip de l'image elle-même
   reste géré par .pack-reveal-portrait ci-dessous, qui a son propre
   overflow:hidden — donc rien ne change visuellement pour l'illustration. */
.pack-reveal-inner.has-art { padding-top: 0; }

.pack-reveal-portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  /* 20px (au lieu de 16px) pour matcher exactement le rayon de .pack-reveal-inner
     maintenant que son propre overflow:hidden ne rattrape plus l'écart au
     raccord des coins supérieurs. */
  border-radius: 20px 20px 0 0;
  margin: -26px -18px 0;
  width: calc(100% + 36px);
  overflow: hidden;
}

.pack-reveal-count {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 0.7rem;
  color: var(--text-main);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  display: inline-block;
  padding: 3px 10px;
}

.pack-reveal-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  margin-top: 8px;
  color: var(--text-title);
}

.pack-reveal-rarity {
  margin-top: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Badge neuf/doublon très visible (cf. retour "on n'arrive pas à différencier
   les cartes obtenues en double") — avant, une simple ligne de texte discrète. */
.pack-reveal-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  padding: 5px 14px;
  border-radius: 20px;
  margin-top: 10px;
}
.pack-reveal-badge.new {
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
  color: var(--bg-primary);
  box-shadow: 0 0 16px rgba(240, 178, 62, 0.6);
  animation: newCardBadgePulse 1s ease-in-out infinite;
}
@keyframes newCardBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.pack-reveal-badge.dup {
  background: var(--bg-primary);
  border: 1px solid var(--bg-menu-selected);
  color: var(--text-secondary);
}

.pack-reveal-bonus {
  margin-top: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-secondary);
  max-width: 220px;
  margin-left: auto;
  margin-right: auto;
}

.pack-reveal-hint {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--text-main);
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.3s ease 0.4s;
}
.pack-reveal.show .pack-reveal-hint {
  opacity: 0.85;
  animation: hintPulse 1.6s ease-in-out 0.6s infinite;
}
@keyframes hintPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.95; }
}

.pack-reveal-inner.rarity-commune { border-color: var(--rarity-commune); }
.pack-reveal-inner.rarity-commune .pack-reveal-label { color: var(--rarity-commune); }

.pack-reveal-inner.rarity-rare { border-color: var(--rarity-rare); box-shadow: 0 24px 50px rgba(77,167,255,0.45); }
.pack-reveal-inner.rarity-rare .pack-reveal-label { color: var(--rarity-rare); }

.pack-reveal-inner.rarity-epique { border-color: var(--rarity-epic); box-shadow: 0 24px 50px rgba(176,102,255,0.5); }
.pack-reveal-inner.rarity-epique .pack-reveal-label { color: var(--rarity-epic); }

.pack-reveal-inner.rarity-heritage {
  border-color: var(--rarity-heritage-2);
  background: linear-gradient(160deg, rgba(95,231,255,0.18), rgba(140,124,255,0.18), rgba(255,217,90,0.18)), linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  box-shadow: 0 0 40px rgba(140,124,255,0.65), 0 24px 50px rgba(0,0,0,0.5);
  animation: heritageShimmer 3s ease-in-out infinite;
}
.pack-reveal-inner.rarity-heritage .pack-reveal-label {
  background: linear-gradient(90deg, var(--rarity-heritage-1), var(--rarity-heritage-2), var(--rarity-heritage-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes heritageShimmer {
  0%, 100% { box-shadow: 0 0 40px rgba(95,231,255,0.5), 0 24px 50px rgba(0,0,0,0.5); }
  50% { box-shadow: 0 0 40px rgba(255,217,90,0.6), 0 24px 50px rgba(0,0,0,0.5); }
}

/* --- Collection de Talents --- */

.talent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.talent-tile {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  border: 2px solid var(--rarity-commune);
  border-radius: 14px;
  padding: 10px 6px 8px;
  text-align: center;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
  position: relative;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.talent-tile-icon { font-size: 1.6rem; line-height: 1; }

.card-art-bg, .card-art-char {
  position: absolute;
  inset: 0;
}
.card-art-bg {
  background-size: cover;
  background-position: center;
}
.card-art-char {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}

.lock-icon { width: 140px; max-width: 85%; height: auto; object-fit: contain; }

/* Portrait plein cadre (cf. demande "implémenter les cartes talents, bords arrondis
   légèrement, moderne, garder le contour et le halo selon la rareté") : l'image
   remplit toute la tuile, coins légèrement arrondis, le contour/halo de rareté déjà
   en place sur .talent-tile continue de faire son travail par-dessus. */
.talent-tile.has-art {
  padding: 0;
  display: block;
}

.talent-tile-portrait {
  position: absolute;
  inset: 0;
  border-radius: 11px;
  overflow: hidden;
}

.talent-tile-type-badge {
  position: absolute;
  left: 5px;
  bottom: 5px;
  z-index: 3;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(10,7,18,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  backdrop-filter: blur(2px);
}

.talent-tile-actions {
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Bouton d'amélioration direct sur la tuile (cf. demande "sans avoir à accéder au
   ⓘ") : pilule compacte entre le badge de type (bas-gauche) et le ⓘ (bas-droite),
   affichant le coût réel — un tap suffit pour améliorer, sans ouvrir la modale. */
.talent-tile-upgrade-btn {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 5px;
  z-index: 3;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: var(--font-display);
  font-size: 0.55rem;
  font-weight: 800;
  padding: 0 4px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(180deg, var(--green-light), var(--green));
  color: #16321a;
  cursor: pointer;
  touch-action: manipulation;
  animation: pulseGlow 1.3s ease-in-out infinite;
  white-space: nowrap;
  overflow: hidden;
}
.talent-tile-upgrade-btn:active { transform: scale(0.94); }
.talent-tile-upgrade-btn .icon-inline { width: 10px; height: 10px; }

.talent-info-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(10,7,18,0.6);
  color: var(--text-main);
  font-size: 0.72rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  backdrop-filter: blur(2px);
  flex-shrink: 0;
}
.talent-info-btn:active { transform: scale(0.92); }

.talent-tile-scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 16px 6px 7px;
  background: linear-gradient(180deg, rgba(26,18,43,0) 0%, rgba(26,18,43,0.82) 40%, rgba(26,18,43,0.96) 100%);
  border-radius: 0 0 11px 11px;
}

.talent-tile-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.68rem;
  color: var(--text-title);
  margin-top: 4px;
  line-height: 1.15;
}

.talent-tile-type {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-top: 2px;
}

.talent-tile:not(.locked) {
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.talent-tile:not(.locked):active { transform: scale(0.96); }

.talent-tile.equipped {
  border-width: 3px;
  box-shadow: 0 0 0 3px rgba(255,217,90,0.4), 0 3px 8px rgba(0,0,0,0.3);
}

.talent-tile-equipped {
  position: absolute;
  top: 4px;
  left: 6px;
  z-index: 3;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.talent-tile-level {
  position: absolute;
  top: 4px;
  right: 6px;
  z-index: 3;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.6rem;
  color: var(--gold-light);
  background: var(--bg-menu-selected);
  padding: 0 5px;
  border-radius: 6px;
  line-height: 1.5;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.talent-tile-lvbar {
  margin-top: 5px;
  height: 4px;
  background: rgba(0,0,0,0.3);
  border-radius: 3px;
  overflow: hidden;
}

.talent-tile-lvfill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue-light), var(--blue-magic));
}

.talent-tile-level.is-max {
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  color: #4a2f0a;
}

.talent-upgrade-btn {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 5px 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.62rem;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
  background: linear-gradient(180deg, var(--green-light) 0%, var(--green) 65%);
  box-shadow: 0 2px 0 var(--green-dark);
}

.talent-upgrade-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }

.talent-upgrade-btn:disabled {
  background: var(--bg-card);
  box-shadow: 0 2px 0 var(--bg-menu-selected);
  color: var(--text-disabled);
  cursor: not-allowed;
}

.talent-tile-copies {
  margin-top: 2px;
  font-size: 0.56rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.talent-tile.locked {
  opacity: 0.5;
  filter: grayscale(0.5);
  border-style: dashed;
}

.talent-tile.locked .talent-tile-name { color: var(--text-disabled); }

.talent-tile.level-locked {
  opacity: 0.4;
  filter: grayscale(0.8);
  border-style: solid;
}

.talent-tile.rarity-commune { border-color: var(--rarity-commune); }
.talent-tile.rarity-rare { border-color: var(--rarity-rare); box-shadow: 0 3px 10px rgba(77,167,255,0.3); }
.talent-tile.rarity-epique { border-color: var(--rarity-epic); box-shadow: 0 3px 10px rgba(176,102,255,0.32); }
.talent-tile.rarity-heritage {
  border-color: var(--rarity-heritage-2);
  box-shadow: 0 3px 14px rgba(140,124,255,0.45);
  background: linear-gradient(160deg, rgba(95,231,255,0.15), rgba(140,124,255,0.15), rgba(255,217,90,0.15)), linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
}

/* Onglet Ressources : cartes horizontales façon "objet d'inventaire", distinctes de
   la grille de collection de cartes. */
.resources-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.resource-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  border: 2px solid var(--rarity-commune);
  border-radius: 16px;
  padding: 10px;
}
.resource-card.rarity-heritage {
  border-color: var(--rarity-heritage-2);
  box-shadow: 0 3px 14px rgba(140,124,255,0.45);
  background: linear-gradient(160deg, rgba(95,231,255,0.15), rgba(140,124,255,0.15), rgba(255,217,90,0.15)), linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  animation: heritageShimmer 3s ease-in-out infinite;
}
.resource-card-portrait {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,0.25);
}
.resource-card-portrait img { width: 100%; height: 100%; object-fit: contain; }
.resource-card-icon { font-size: 2.4rem; flex-shrink: 0; width: 64px; text-align: center; }
.resource-card-body { flex: 1; min-width: 0; }
.resource-card-name {
  font-family: var(--font-display);
  font-size: 0.88rem;
  color: var(--text-title);
}
.resource-card-count {
  font-size: 0.72rem;
  color: var(--gold-light);
  margin-top: 2px;
}
.resource-card-desc {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.35;
}
.resource-card-use-btn {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 0.74rem;
  padding: 7px 14px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 65%);
  color: var(--bg-primary);
  cursor: pointer;
  touch-action: manipulation;
}
.resource-card-use-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.resource-card-use-btn:active:not(:disabled) { transform: scale(0.96); }

/* --- Équipe de Talents --- */

.talents-hint {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  margin: 8px 0 0;
}

/* Pastilles de configuration (cf. demande "pas si bas dans la page, juste des
   numéros sur lesquels cliquer") : au milieu du panneau d'équipe, juste sous les
   emplacements — un tap sur le numéro charge, le bouton 💾 à côté sauvegarde
   explicitement (cf. retour "l'appui long n'est pas intuitif"). */
.deck-pills {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 10px;
}

.deck-slot-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

.deck-save-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--bg-menu-selected);
  background: var(--bg-card);
  font-size: 0.66rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
}
.deck-save-btn:active { transform: scale(0.9); }
.deck-save-btn.saved-flash { animation: pulseGlow 0.4s ease; }

.deck-pill {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px dashed var(--bg-menu-selected);
  background: var(--bg-card);
  color: var(--text-disabled);
  font-family: var(--font-display);
  font-size: 0.85rem;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}
.deck-pill:active { transform: scale(0.92); }

.deck-pill.filled {
  border-style: solid;
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--bg-menu-selected) 0%, var(--accent) 100%);
  color: var(--text-title);
}

.deck-pill.active {
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(246,197,66,0.55);
  color: var(--gold-light);
}

.deck-pill.saved-flash {
  animation: pulseGlow 0.4s ease;
}

/* Panneau "deck" (cf. retour "les emplacements sont trop petits, il faut les mettre
   en avant et différencier qu'il s'agit du deck") : un cadre distinct, façon
   présentoir, pour que l'équipe active se voie tout de suite comme LE morceau
   central de l'écran Talents plutôt qu'un simple bloc parmi d'autres. */
.subtab-bar {
  display: flex;
  gap: 5px;
  margin-bottom: 14px;
}

/* 4 onglets (cf. ajout "Ressources") : padding/gap/police resserrés pour que tout
   tienne sans défilement horizontal sur un écran de téléphone étroit. */
.subtab-btn {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 9px 4px;
  border: 2px solid var(--bg-menu-selected);
  border-radius: 12px;
  background: var(--bg-card);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
}
.subtab-btn .subtab-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  opacity: 0.7;
  flex-shrink: 0;
}
.subtab-btn .subtab-icon-emoji {
  font-size: 0.92rem;
  opacity: 0.7;
  flex-shrink: 0;
}
.subtab-btn.active .subtab-icon-emoji { opacity: 1; }
.subtab-btn.active {
  background: linear-gradient(180deg, var(--bg-menu-selected) 0%, var(--accent) 100%);
  color: var(--text-title);
  border-color: var(--accent);
}
.subtab-btn.active .subtab-icon { opacity: 1; }
.subtab-btn .nav-dot { position: absolute; top: 4px; right: 8px; }

.collection-filter-bar {
  display: flex;
  gap: 6px;
  margin: 8px 0 12px;
}
.collection-filter-btn {
  flex: 1;
  padding: 6px 4px;
  border: 1px solid var(--bg-menu-selected);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 0.68rem;
  cursor: pointer;
  touch-action: manipulation;
}
.collection-filter-btn.active {
  background: var(--bg-menu-selected);
  color: var(--text-title);
  border-color: var(--accent);
}

/* --- Caractéristiques --- */

.stat-points-header {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  border: 2px solid var(--gold-dark);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 10px;
}
.stat-points-icon { font-size: 2rem; }
.stat-points-title { font-size: 0.72rem; color: var(--text-secondary); }
.stat-points-count {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--gold-light);
  line-height: 1;
}

.stat-points-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.stat-points-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  border: 2px solid var(--bg-menu-selected);
  border-radius: 12px;
  padding: 10px 12px;
}
.stat-points-row-icon { font-size: 1.4rem; flex-shrink: 0; }
.stat-points-row-body { flex: 1; min-width: 0; }
.stat-points-row-label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--text-title);
}
.stat-points-row-bonus {
  font-size: 0.74rem;
  color: var(--gold-light);
  margin-top: 2px;
}
.stat-points-row-val {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--text-title);
  min-width: 18px;
  text-align: center;
}
.stat-points-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--gold-dark);
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 65%);
  color: var(--bg-primary);
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  flex-shrink: 0;
}
.stat-points-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.stat-points-btn:active:not(:disabled) { transform: scale(0.9); }
.stat-points-btn.minus {
  background: linear-gradient(180deg, var(--bg-menu-selected) 0%, var(--accent) 100%);
  border-color: var(--accent);
  color: var(--text-title);
}

/* Jeton de Recalibrage (cf. demande "rendre les caractéristiques stratégiques, la
   modification instantanée enlève ça") : seul moyen de tout réattribuer avant la
   fin de saison, obtenu très rarement en ouvrant des boosters. */
.stat-reset-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg-card);
  border: 1px dashed var(--bg-menu-selected);
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 10px;
}
.stat-reset-tokens {
  font-size: 0.76rem;
  color: var(--text-secondary);
}
.stat-reset-btn {
  font-family: var(--font-display);
  font-size: 0.72rem;
  padding: 7px 12px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 65%);
  color: var(--bg-primary);
  cursor: pointer;
  touch-action: manipulation;
  flex-shrink: 0;
}
.stat-reset-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.stat-reset-btn:active:not(:disabled) { transform: scale(0.95); }

.deck-panel {
  background: linear-gradient(180deg, rgba(106,73,199,0.22) 0%, rgba(67,41,107,0.3) 100%);
  border: 2px solid var(--accent);
  border-radius: 20px;
  padding: 14px 12px 12px;
  margin: 6px 0 16px;
  box-shadow: 0 0 0 1px rgba(106,73,199,0.25) inset, 0 6px 18px rgba(0,0,0,0.35);
}

.deck-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.deck-panel-title { flex: 1; }

.deck-panel-shuffle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.3);
  font-size: 0.9rem;
  cursor: pointer;
  touch-action: manipulation;
  flex-shrink: 0;
}
.deck-panel-shuffle:active { transform: scale(0.9) rotate(15deg); }

.deck-panel-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.5px;
  color: var(--gold-light);
  text-shadow: 0 2px 0 rgba(0,0,0,0.5);
}

.deck-panel-count {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.equip-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.equip-slot {
  position: relative;
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  border: 2px dashed var(--bg-menu-selected);
  border-radius: 16px;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.equip-slot-icon { font-size: 2rem; line-height: 1; opacity: 0.5; }

.equip-slot.tap-pulse { animation: equipSlotTap 0.3s ease; }
@keyframes equipSlotTap {
  0%   { transform: scale(1); border-color: var(--bg-menu-selected); }
  40%  { transform: scale(0.93); border-color: var(--gold-light); }
  100% { transform: scale(1); border-color: var(--bg-menu-selected); }
}

.equip-slot-info {
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: 3;
}

.equip-slot-portrait {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  overflow: hidden;
}
.equip-slot-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.65rem;
  color: var(--text-disabled);
  margin-top: 4px;
}

.equip-slot.filled {
  border-style: solid;
  border-width: 3px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.equip-slot.filled .equip-slot-icon { opacity: 1; }
.equip-slot.filled .equip-slot-name { color: var(--text-title); }

.equip-slot.filled.rarity-commune { border-color: var(--rarity-commune); }
.equip-slot.filled.rarity-rare { border-color: var(--rarity-rare); box-shadow: 0 0 18px rgba(77,167,255,0.5), 0 4px 12px rgba(0,0,0,0.35); }
.equip-slot.filled.rarity-epique { border-color: var(--rarity-epic); box-shadow: 0 0 18px rgba(176,102,255,0.55), 0 4px 12px rgba(0,0,0,0.35); }
.equip-slot.filled.rarity-heritage {
  border-color: var(--rarity-heritage-2);
  background: linear-gradient(160deg, rgba(95,231,255,0.18), rgba(140,124,255,0.18), rgba(255,217,90,0.18)), linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  box-shadow: 0 0 24px rgba(140,124,255,0.65), 0 4px 12px rgba(0,0,0,0.35);
  animation: heritageShimmer 3s ease-in-out infinite;
}

.equip-summary {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  border: 2px solid var(--bg-menu-selected);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 12px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.equip-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.equip-summary-val {
  font-family: var(--font-display);
  color: var(--gold-light);
  font-weight: 800;
}

.equip-summary-empty {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-disabled);
  text-align: center;
}

/* --- Configurations (decks) --- */

/* --- Notification de montée de niveau --- */

/* Toast non-bloquant, comme .pack-reveal : ne capture jamais le clic. Positionné un
   peu plus bas pour ne pas se superposer à la notification de booster. */
.levelup-overlay {
  position: absolute;
  top: 54px;
  left: 50%;
  width: auto;
  max-width: 82%;
  z-index: 400;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-16px) scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.levelup-overlay.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.levelup-inner {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  border: 3px solid var(--gold);
  border-radius: 14px;
  padding: 10px 16px;
  text-align: center;
  max-width: 260px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.5);
}

.levelup-icon { font-size: 1.4rem; line-height: 1; }

.levelup-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--gold-light);
  margin-top: 2px;
}

.levelup-line {
  margin-top: 3px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.levelup-bonus-card {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed var(--bg-menu-selected);
  color: var(--gold-light);
}

.season-end-overlay .levelup-inner { border-color: var(--rarity-rare); box-shadow: 0 10px 26px rgba(77,167,255,0.4); }
.season-end-overlay { top: 100px; }

.offline-overlay .levelup-inner { border-color: var(--accent); box-shadow: 0 10px 26px rgba(106,73,199,0.5); }

/* Montée de niveau plein écran (cf. retour "monter de niveau doit + être mis en
   avant, la totalité de la fenêtre qui s'ouvre avec les récompenses affichées
   une à une") : #levelUpOverlay reçoit EN PLUS de .levelup-overlay la classe
   .levelup-full, qui transforme le petit toast en overlay plein écran façon
   .pack-reveal, avec une carte de récompense par étape (tap pour avancer). Les
   overlays de fin de saison / hors-ligne réutilisent .levelup-inner tel quel
   (toast) et ne sont jamais concernés par ces règles, scopées à .levelup-full. */
.levelup-overlay.levelup-full {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  z-index: 450;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 4, 12, 0);
  transform: none;
  transition: opacity 0.3s ease, background 0.3s ease;
  cursor: pointer;
}
.levelup-overlay.levelup-full.show {
  background: rgba(6, 4, 12, 0.85);
  /* .levelup-overlay de base garde pointer-events:none à dessein (c'est un
     toast passif "qui ne capture jamais le clic" — cf. commentaire plus haut,
     réutilisé tel quel par season-end/offline). La variante plein écran est
     interactive (tap pour avancer les étapes) : sans cette ligne, les clics
     traversaient l'overlay jusqu'aux éléments dessous — c'est le bug "je peux
     continuer à cliquer comme si c'était invisible" remonté par un joueur. */
  pointer-events: auto;
}
.levelup-overlay.levelup-full .levelup-inner {
  width: min(84vw, 320px);
  max-width: 320px;
  padding: 30px 22px 22px;
  border-width: 4px;
  border-color: var(--gold);
}
.levelup-reveal-count {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 8px;
}
.levelup-reveal-icon { font-size: 2.8rem; line-height: 1; }
.levelup-reveal-hint {
  margin-top: 16px;
  font-size: 0.62rem;
  color: var(--text-secondary);
  opacity: 0.65;
}
/* Même piège que pour les cartes de booster (cf. showBoosterCardReveal) :
   une seule règle doit déclarer `animation: levelupRiseIn`, sinon une règle
   plus spécifique gagnerait la cascade et .rise-in ajoutée/retirée en JS
   n'aurait plus aucun effet visuel entre deux étapes. */
.levelup-inner.rise-in {
  animation: levelupRiseIn 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.1) forwards;
}
@keyframes levelupRiseIn {
  0%   { transform: translateY(50px) scale(0.9); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* --- Classement --- */

.season-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 10px;
}

.season-meta-pill {
  flex: 1;
  min-width: 90px;
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  border: 2px solid var(--bg-menu-selected);
  border-radius: 12px;
  padding: 6px 10px;
  text-align: center;
}

.season-meta-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.season-meta-val {
  display: block;
  margin-top: 2px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--gold-light);
}

.season-recap {
  display: none;
  background: linear-gradient(180deg, var(--bg-menu-selected) 0%, var(--bg-card) 100%);
  border: 2px solid var(--gold-dark);
  border-radius: 12px;
  padding: 8px 12px;
  margin: 0 0 12px;
}

.season-recap.show { display: block; }

.rubis-rate-note {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  margin: 0 0 10px;
}

.weekly-record-card {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  border: 2px solid var(--gold-dark);
  border-radius: 14px;
  padding: 10px 14px;
  margin: 0 0 14px;
}

.weekly-record-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-title);
}

.weekly-record-row.weekly-record-current {
  margin-top: 4px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.weekly-record-track {
  width: 100%;
  height: 7px;
  margin-top: 8px;
}

.season-recap-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--gold-light);
}

.season-recap-line {
  margin-top: 2px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Historique des saisons (cf. demande "sauvegarder le contenu du compte
   toutes les saisons... pour en faire un classement") — une carte par saison
   passée, la plus récente en premier. */
.season-history-section { margin-top: 16px; }
.season-history-title {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--text-title);
  margin: 0 0 8px;
}
.season-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.season-history-row {
  background: var(--bg-card);
  border: 1px solid rgba(106,73,199,0.3);
  border-radius: 12px;
  padding: 8px 12px;
}
.season-history-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.season-history-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--text-title);
}
.season-history-rank {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold-light);
}
.season-history-score {
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--gold-light);
}
.season-history-stats {
  margin-top: 3px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* Écran Événements — carrousel de cartes de mission, une à la fois, avec
   swipe/flèches pour naviguer et une piste de progression en dessous (cf.
   demande "revoir totalement l'onglet événement" + maquette fournie). */
.event-card-stage {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
  touch-action: pan-y;
}
.event-card-stage.slide-next .event-card:not(.event-card-ghost) {
  animation: hangarSlideInRight 0.26s ease-out;
}
.event-card-stage.slide-prev .event-card:not(.event-card-ghost) {
  animation: hangarSlideInLeft 0.26s ease-out;
}

.event-card {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  border: 1px solid rgba(106,73,199,0.35);
  border-radius: 22px;
  padding: 16px 14px 18px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.4);
}
/* Sélecteur composé (.event-card.event-card-ghost) — une seule classe aurait
   la même spécificité que .event-card tout court et pouvait perdre selon
   l'ordre dans la feuille (cf. bug déjà rencontré sur le fantôme du hangar,
   qui restait visible/en flux normal et cassait tout l'agencement). */
.event-card.event-card-ghost {
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
}
.event-card.event-card-ghost[hidden] { display: none; }

.event-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

/* Le badge circulaire = la récompense, en grand, façon médaille (cf. maquette).
   Un anneau doré toujours présent, une couleur de fond différente par type de
   récompense pour les différencier d'un coup d'œil. */
.event-card-badge {
  position: relative;
  width: min(42vw, 150px);
  height: min(42vw, 150px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.18), transparent 55%), var(--event-badge-bg, #3f6fae);
  border: 6px solid var(--gold);
  box-shadow: 0 0 0 3px var(--gold-dark), 0 6px 18px rgba(0,0,0,0.45);
  margin-bottom: 14px;
  flex-shrink: 0;
}
.event-card-badge-wheat { --event-badge-bg: #4a7c3f; }
.event-card-badge-valastons { --event-badge-bg: #2f6fb0; }
.event-card-badge-card { --event-badge-bg: #6a3fae; }
.event-card-badge-booster { --event-badge-bg: #b0742f; }

.event-card-badge-icon {
  width: 62%;
  height: 62%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.event-card-badge-emoji { font-size: min(20vw, 4.2rem); width: auto; height: auto; }
.event-card-badge-booster.event-card-badge-icon { width: 74%; height: 74%; }

.event-card-badge.locked .event-card-badge-icon { filter: grayscale(1) brightness(0.35); }
.event-card-badge-lock {
  position: absolute;
  width: 44%;
  height: 44%;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.6));
}
.event-card-badge.claimed { border-color: var(--green-light); box-shadow: 0 0 0 3px var(--green); }
.event-card-badge.claimed .event-card-badge-icon { opacity: 0.5; }
.event-card-badge-check {
  position: absolute;
  font-size: 3rem;
  color: var(--green-light);
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}
.event-card-badge.just-claimed { animation: pulseGlow 0.5s ease; }

.event-card-reward {
  font-family: var(--font-display);
  font-size: min(5.5vw, 1.25rem);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-title);
  text-align: center;
  text-shadow: 0 2px 0 rgba(0,0,0,0.5);
}
.event-card-subtitle {
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-align: center;
}

.event-card-progress-panel {
  width: 100%;
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--bg-primary);
  border: 1px solid var(--bg-menu-selected);
}
.event-card-progress-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-title);
}
.event-card-progress-bar {
  margin-top: 6px;
  height: 8px;
  background: rgba(0,0,0,0.3);
  border-radius: 4px;
  overflow: hidden;
}
.event-card-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green-light), var(--green));
}
.event-card-progress-text {
  margin-top: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.event-card-claim-btn {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: 14px;
  padding: 13px;
  border: 2px solid var(--gold-dark);
  border-radius: 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--bg-primary);
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 65%);
  cursor: pointer;
  touch-action: manipulation;
}
.event-card-claim-btn::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -15%;
  width: 55%;
  height: 220%;
  background: rgba(255,255,255,0.35);
  transform: rotate(20deg);
  pointer-events: none;
}
.event-card-claim-btn:disabled {
  background: var(--bg-menu-selected);
  border-color: var(--bg-menu-selected);
  color: var(--text-secondary);
  cursor: default;
}
.event-card-claim-btn:active:not(:disabled) { transform: scale(0.97); }

/* Piste de progression sous la carte (cf. demande "une barre qui progresse au
   fur et à mesure des missions réalisées") — un nœud par mission, relié par
   des segments qui se remplissent une fois la mission précédente récupérée.
   Taper un nœud débloqué saute directement à cette mission. */
.event-track {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 4px 6px;
}
.event-track-node {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--bg-menu-selected);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
}
.event-track-node:disabled { cursor: default; }
.event-track-node.locked { opacity: 0.6; }
.event-track-node.active,
.event-track-node.claimable {
  border-color: var(--gold-dark);
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 65%);
  color: var(--bg-primary);
}
.event-track-node.claimed {
  border-color: var(--green-light);
  background: linear-gradient(180deg, #7CE38A 0%, #3FAE55 100%);
  color: var(--bg-primary);
}
.event-track-node.current {
  width: 36px;
  height: 36px;
  box-shadow: 0 0 0 4px rgba(255,217,90,0.3);
}
.event-track-node.claimable.current {
  animation: eventTrackPulse 1.3s ease-in-out infinite;
}
@keyframes eventTrackPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255,217,90,0.3); }
  50% { box-shadow: 0 0 0 7px rgba(255,217,90,0.5); }
}
.event-track-seg {
  flex: 1 1 16px;
  max-width: 28px;
  height: 3px;
  background: var(--bg-menu-selected);
}
.event-track-seg.filled { background: var(--green); }

.leaderboard-note {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px dashed var(--bg-menu-selected);
  border-radius: 10px;
  padding: 8px 12px;
  margin: 6px 0 16px;
}

.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 2px solid var(--bg-menu-selected);
  border-radius: 12px;
  padding: 8px 12px;
}

.lb-rank {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--text-secondary);
  width: 30px;
  flex-shrink: 0;
}

.lb-name {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-title);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.leaderboard-row.is-player {
  background: linear-gradient(180deg, var(--bg-menu-selected) 0%, var(--accent) 100%);
  border-color: var(--gold);
  box-shadow: 0 3px 8px rgba(246,197,66,0.35);
}

.leaderboard-row.is-player .lb-name,
.leaderboard-row.is-player .lb-rank { color: var(--gold-light); }

/* --- Hangar : tracteurs --- */

.hangar-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px 0 6px;
}

.hangar-hero-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  position: relative;
  overflow: hidden;
  /* Réserve le geste horizontal au swipe JS (cf. setupHangarSwipe) tout en
     laissant le scroll vertical de la page passer normalement au doigt. */
  touch-action: pan-y;
}

/* Aperçu du véhicule suivant/précédent pendant le swipe (cf. retour "avoir
   l'impression d'être sur l'autre page en temps réel, pas juste voir le fond
   pendant qu'on glisse") — positionné en absolu pour ne pas perturber le flex
   des flèches, et centré sur le même point que l'image réelle : le JS lui
   ajoute juste un décalage horizontal (position de départ + suivi du doigt).
   Sélecteur composé (.hangar-hero-icon-wrap.hangar-hero-icon-wrap-ghost) —
   même spécificité qu'un sélecteur à une seule classe suffisait en théorie,
   mais l'ordre dans la feuille faisait gagner .hangar-hero-icon-wrap tout
   court (display:flex, position:relative), cassant tout le flex des flèches
   même quand [hidden] aurait dû le masquer (cf. bug "transports décalés"). */
.hangar-hero-icon-wrap.hangar-hero-icon-wrap-ghost {
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
}
.hangar-hero-icon-wrap.hangar-hero-icon-wrap-ghost[hidden] {
  display: none;
}

.hangar-nav-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--gold-dark);
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 65%);
  color: var(--bg-primary);
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  z-index: 3;
  box-shadow: 0 3px 8px rgba(0,0,0,0.4);
}
.hangar-nav-btn:active { transform: scale(0.9); }
.hangar-nav-btn:disabled { opacity: 0.25; cursor: not-allowed; }
.hangar-nav-btn[hidden] { display: none; }

.hangar-hero-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  touch-action: pan-y;
}

/* Suivi du doigt pendant le swipe (cf. retour "qu'il s'agrandisse puis parte
   vers le sens du doigt") — pas de transition pendant le drag pour un suivi
   1:1 sans latence ; le flottement automatique est mis en pause pour ne pas
   parasiter le geste. */
.hangar-hero-icon-wrap.dragging { touch-action: none; }
.hangar-hero-icon-wrap.dragging .hangar-hero-icon,
.hangar-hero-icon-wrap.dragging .hangar-hero-shadow {
  animation-play-state: paused;
}

.hangar-hero-shadow {
  position: absolute;
  bottom: 10%;
  left: 50%;
  width: 62%;
  height: 16px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 75%);
  border-radius: 50%;
  z-index: 0;
  animation: hangarShadowPulse 3s ease-in-out infinite;
}

.hangar-hero-icon {
  position: relative;
  z-index: 1;
  width: min(52vw, 220px);
  height: min(52vw, 220px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  animation: hangarHeroFloat 3s ease-in-out infinite;
}

@keyframes hangarHeroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

@keyframes hangarShadowPulse {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.6; }
  50% { transform: translateX(-50%) scale(0.8); opacity: 0.35; }
}

.hangar-hero-stage.slide-next .hangar-hero-icon-wrap {
  animation: hangarSlideInRight 0.26s ease-out;
}
.hangar-hero-stage.slide-prev .hangar-hero-icon-wrap {
  animation: hangarSlideInLeft 0.26s ease-out;
}

@keyframes hangarSlideInRight {
  0% { transform: translateX(28px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes hangarSlideInLeft {
  0% { transform: translateX(-28px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

.hangar-hero-icon.is-locked {
  filter: grayscale(0.95) brightness(0.4);
}

.hangar-hero-icon.evolve-pulse {
  animation: hangarHeroFloat 3s ease-in-out infinite, vehicleEvolvePulse 0.65s ease;
}
@keyframes vehicleEvolvePulse {
  0%   { filter: brightness(1); }
  40%  { transform: scale(1.28); filter: brightness(1.7) drop-shadow(0 0 26px var(--gold-light)); }
  100% { filter: brightness(1); }
}

.vehicle-action-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.vehicle-action-btn {
  position: relative;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 0.82rem;
  padding: 9px 18px;
  border-radius: 12px;
  border: 2px solid var(--gold-dark);
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 65%);
  color: var(--bg-primary);
  cursor: pointer;
  touch-action: manipulation;
}
.vehicle-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.vehicle-action-btn:active:not(:disabled) { transform: scale(0.96); }
.vehicle-action-btn.secondary {
  background: linear-gradient(180deg, var(--bg-menu-selected) 0%, var(--accent) 100%);
  border-color: var(--accent);
  color: var(--text-title);
}
.vehicle-action-btn.fleet { font-size: 0.74rem; padding: 7px 14px; }

/* Reflet diagonal façon bouton "glossy" (cf. demande "faire le même rendu que
   les boutons designés, en CSS") — un dégradé qui s'étire proprement à
   n'importe quelle taille, contrairement à une image qu'on aurait dû étirer. */
.sell-btn-compact::before,
.contract-bar-btn::before,
.btn-gold::before,
.btn-purple::before,
.achievement-claim-btn::before,
.vehicle-action-btn::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -15%;
  width: 55%;
  height: 220%;
  background: rgba(255,255,255,0.35);
  transform: rotate(20deg);
  pointer-events: none;
}

.vehicle-maxed-badge {
  font-family: var(--font-display);
  font-size: 0.78rem;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--bg-menu-selected);
  border-radius: 10px;
  padding: 6px 14px;
}

.hangar-hero-lock-overlay {
  position: absolute;
  z-index: 2;
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6));
}
.hangar-hero-lock-overlay[hidden] { display: none; }

.hangar-hero-active-tag {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  color: var(--bg-primary);
  background: linear-gradient(180deg, #7CE38A 0%, #3FAE55 100%);
  border-radius: 10px;
  padding: 2px 10px;
  display: inline-block;
}
.hangar-hero-active-tag[hidden] { display: none; }

.hangar-hero-level-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 0.72rem;
  color: var(--bg-primary);
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 65%);
  border: 1px solid var(--gold-dark);
  border-radius: 10px;
  padding: 2px 8px;
}
.hangar-hero-level-badge:empty { display: none; }

.hangar-hero-name {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text-title);
  text-shadow: 0 2px 0 rgba(0,0,0,0.5);
}

.hangar-hero-type {
  margin-top: 2px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}

/* Texte d'ambiance par palier (cf. retour "rendre moins vide les pages de
   transports") — remplit l'espace entre le type et le bouton d'action. */
.hangar-hero-desc {
  margin-top: 6px;
  max-width: 300px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--text-secondary);
  text-align: center;
}
.hangar-hero-desc:empty { display: none; }

/* Cartes de bonus sous le bouton d'action (cf. maquette "Bonus 1"/"Bonus 2") —
   une par axe (principal puis secondaire), plus grandes et lisibles que les
   anciens petits chips de part et d'autre de l'image. */
.vehicle-bonus-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 340px;
  margin: 14px auto 0;
}

.vehicle-bonus-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  border: 1px solid var(--bg-menu-selected);
  border-radius: 14px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}

.vehicle-bonus-icon { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }

.vehicle-bonus-body { flex: 1; min-width: 0; }

.vehicle-bonus-label {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.vehicle-bonus-bar {
  margin-top: 4px;
  height: 6px;
  background: var(--bg-primary);
  border-radius: 4px;
  overflow: hidden;
}

.vehicle-bonus-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dark) 0%, var(--gold-light) 100%);
}

.vehicle-bonus-sub {
  margin-top: 3px;
  font-size: 0.66rem;
  color: var(--text-secondary);
}

.vehicle-bonus-value {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--gold-light);
  flex-shrink: 0;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}

.tractor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.tractor-card .lock-icon { width: 60px; max-width: 45%; }

.tractor-card {
  position: relative;
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  border: 2px solid var(--bg-menu-selected);
  border-radius: 14px;
  padding: 10px 8px;
  text-align: center;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.06s ease;
}

.tractor-card:active { transform: scale(0.97); }

.tractor-card-icon { font-size: 1.8rem; line-height: 1; }

.tractor-card-portrait {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.tractor-card-name {
  margin-top: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text-title);
}

.tractor-card-desc {
  margin-top: 2px;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--text-secondary);
  line-height: 1.3;
}

.tractor-card-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
}

.tractor-card-hint {
  margin-top: 3px;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text-disabled);
}

.tractor-card.owned {
  border-color: var(--success);
  cursor: default;
}
.tractor-card.owned .tractor-card-badge.is-select {
  background: linear-gradient(180deg, var(--blue-light) 0%, var(--blue-magic) 65%);
  color: #0a3a4a;
}

.tractor-card.active {
  border-width: 3px;
  box-shadow: 0 0 0 3px rgba(87,209,99,0.4), 0 3px 8px rgba(0,0,0,0.3);
}

.tractor-card.owned .tractor-card-badge.is-active {
  background: linear-gradient(180deg, var(--green-light) 0%, var(--green) 65%);
  color: #16321a;
}

.tractor-card-active-badge {
  position: absolute;
  top: 4px;
  left: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.tractor-card.affordable .tractor-card-badge {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 65%);
  color: #4a2f0a;
}

.tractor-card.locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  cursor: not-allowed;
}
.tractor-card.locked .tractor-card-badge {
  background: var(--bg-menu-selected);
  color: var(--text-disabled);
}

.tractor-upgrade-btn {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 6px 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
  background: linear-gradient(180deg, var(--green-light) 0%, var(--green) 65%);
  box-shadow: 0 2px 0 var(--green-dark);
}
.tractor-upgrade-btn.secondary {
  background: linear-gradient(180deg, var(--rarity-epic) 0%, var(--accent) 65%);
  box-shadow: 0 2px 0 var(--bg-menu-selected);
}
.tractor-upgrade-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.tractor-upgrade-btn:disabled {
  background: var(--bg-card);
  box-shadow: 0 2px 0 var(--bg-menu-selected);
  color: var(--text-disabled);
  cursor: not-allowed;
}

/* Teintes de prestige par palier (cf. retour "pas assez attractif") : sans
   illustration distincte par tracteur, la couleur de bordure fait grandir le
   sentiment de prestige à mesure qu'on monte en gamme — même langage visuel que
   les raretés de cartes Talents. */
.tractor-card.tier-0,
.tractor-card.tier-1 { border-color: var(--rarity-commune); }
.tractor-card.tier-2,
.tractor-card.tier-3 { border-color: var(--rarity-rare); box-shadow: 0 3px 10px rgba(77,167,255,0.3); }
.tractor-card.tier-4 { border-color: var(--rarity-epic); box-shadow: 0 3px 10px rgba(176,102,255,0.32); }
.tractor-card.tier-5 {
  border-color: var(--rarity-legendary);
  box-shadow: 0 3px 14px rgba(245,200,76,0.4);
  background: linear-gradient(180deg, var(--bg-menu-selected) 0%, var(--bg-card) 100%);
}

.tractor-card.tier-fleet {
  border-color: var(--rarity-heritage-2);
  background: linear-gradient(160deg, rgba(95,231,255,0.15), rgba(140,124,255,0.15), rgba(255,217,90,0.15)), linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  grid-column: span 2;
  box-shadow: 0 0 16px rgba(140,124,255,0.5), 0 3px 10px rgba(0,0,0,0.3);
}
.tractor-card.tier-fleet .tractor-card-badge {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 65%);
  color: #4a2f0a;
}

/* --- Bouton succès + modal (cf. demande "bouton discret sur la page d'accueil,
   objectifs continuels journaliers/hebdomadaires") --- */

.achievements-fab {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--gold-dark);
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 65%);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 3px 8px rgba(0,0,0,0.35);
}
.achievements-fab:active { transform: scale(0.94); }

.achievements-fab-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.resource-info-inner {
  max-width: 300px;
  padding: 22px 20px 20px;
  text-align: left;
}

.resource-info-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text-title);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.resource-info-title .icon-inline { width: 24px; height: 24px; }

.resource-info-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.resource-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--bg-menu-selected);
  border-radius: 10px;
  padding: 10px 14px;
}

.resource-info-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.resource-info-val {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--gold-light);
}

.account-inner {
  max-width: 340px;
  max-height: 82vh;
  overflow-y: auto;
  padding: 20px 18px 18px;
  text-align: left;
}
.account-inner h3 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text-title);
  text-align: center;
}

.account-section { margin-bottom: 16px; }
.account-section-title {
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--gold-light);
  margin-bottom: 8px;
}

.account-guest-note {
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.4;
  background: var(--bg-card);
  border: 1px solid var(--bg-menu-selected);
  border-radius: 10px;
  padding: 8px 10px;
}

.account-trophy-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.account-trophy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  border: 1px solid var(--bg-menu-selected);
  border-radius: 10px;
  padding: 8px 4px;
}
.account-trophy-icon { font-size: 1.15rem; }
.account-trophy-val {
  font-family: var(--font-display);
  font-size: 0.88rem;
  color: var(--text-title);
}
.account-trophy-label {
  font-size: 0.6rem;
  color: var(--text-secondary);
  text-align: center;
}

.account-friend-code {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--bg-menu-selected);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.account-friend-code-val {
  flex: 1;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--gold-light);
}
.account-friend-copy {
  font-family: var(--font-display);
  font-size: 0.72rem;
  padding: 6px 10px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 65%);
  color: var(--bg-primary);
  cursor: pointer;
  touch-action: manipulation;
}
.account-friend-copy:active { transform: scale(0.94); }

.account-info-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-secondary);
  padding: 4px 0;
}
.account-info-row span:last-child { color: var(--text-title); font-weight: 600; }

/* Interrupteurs son/vibration (cf. demande "du sound design ainsi que des
   vibrations pour améliorer l'expérience") — laisser le joueur couper l'un ou
   l'autre indépendamment. */
.account-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-title);
  padding: 6px 0;
}
.account-toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  border: none;
  background: var(--bg-menu-selected);
  cursor: pointer;
  touch-action: manipulation;
  flex-shrink: 0;
}
.account-toggle-switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-secondary);
  transition: transform 0.15s ease, background 0.15s ease;
}
.account-toggle-switch.on {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 65%);
}
.account-toggle-switch.on::before {
  background: #4a2f0a;
  transform: translateX(20px);
}

.account-inner .reset-link { margin-top: 4px; }

.account-auth-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.account-auth-input {
  font-family: inherit;
  font-size: 0.82rem;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--bg-menu-selected);
  background: var(--bg-card);
  color: var(--text-title);
}
.account-auth-input::placeholder { color: var(--text-secondary); }
.account-auth-input:focus { outline: none; border-color: var(--gold-light); }
.account-auth-error {
  font-size: 0.74rem;
  color: #ff8686;
  background: rgba(255, 90, 90, 0.12);
  border: 1px solid rgba(255, 90, 90, 0.35);
  border-radius: 8px;
  padding: 6px 10px;
}
.account-auth-btn {
  font-family: var(--font-display);
  font-size: 0.85rem;
  padding: 10px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 65%);
  color: var(--bg-primary);
  cursor: pointer;
  touch-action: manipulation;
}
.account-auth-btn:active { transform: scale(0.97); }
.account-auth-btn-secondary {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  color: var(--text-title);
  border: 1px solid var(--bg-menu-selected);
}
.account-auth-switch {
  background: none;
  border: none;
  color: var(--gold-light);
  font-size: 0.74rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 2px;
  align-self: center;
}
.account-logged-in {
  background: var(--bg-card);
  border: 1px solid var(--bg-menu-selected);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 10px;
}
.account-logged-in-name {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--gold-light);
}
.account-logged-in-email {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.account-friend-add {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.account-friend-add .account-auth-input { flex: 1; margin: 0; }
.account-friend-add .account-auth-btn { width: auto; padding: 0 14px; }

.account-friends-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.account-friend-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--bg-menu-selected);
  border-radius: 10px;
  padding: 9px 12px;
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.account-friend-row:active { transform: scale(0.98); }
.account-friend-row-name {
  font-size: 0.82rem;
  color: var(--text-title);
}
.account-friend-row-level {
  font-family: var(--font-display);
  font-size: 0.76rem;
  color: var(--gold-light);
}

.achievements-inner {
  max-width: 340px;
  padding: 20px 18px 18px;
  text-align: left;
}
.achievements-inner h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text-title);
  text-align: center;
}

.achievements-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.achievements-tab {
  flex: 1;
  padding: 7px;
  border: 2px solid var(--bg-menu-selected);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  touch-action: manipulation;
}
.achievements-tab.active {
  background: linear-gradient(180deg, var(--bg-menu-selected) 0%, var(--accent) 100%);
  color: var(--text-title);
  border-color: var(--accent);
}

.achievements-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 50vh;
  overflow-y: auto;
}

.achievement-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 2px solid var(--bg-menu-selected);
  border-radius: 12px;
  padding: 8px 10px;
}

.achievement-row.ready {
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(246,197,66,0.4);
}

.achievement-row.claimed { opacity: 0.55; }

/* Jour 7 du cycle de connexion (cf. balance.js dailyLoginCycle "premium") : mise en
   avant façon rareté Héritage, pour marquer la fin de série. */
.achievement-row.premium-login {
  border-color: var(--rarity-heritage-2);
  background: linear-gradient(160deg, rgba(95,231,255,0.12), rgba(140,124,255,0.12), rgba(255,217,90,0.12)), var(--bg-card);
  box-shadow: 0 0 14px rgba(140,124,255,0.5);
}

.achievement-icon { font-size: 1.3rem; flex-shrink: 0; }

.achievement-body { flex: 1; min-width: 0; }

.achievement-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-title);
}

.achievement-bar {
  margin-top: 4px;
  height: 6px;
  background: rgba(0,0,0,0.3);
  border-radius: 4px;
  overflow: hidden;
}

.achievement-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green-light), var(--green));
}

.achievement-progress {
  margin-top: 2px;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.achievement-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.achievement-claim-btn {
  position: relative;
  overflow: hidden;
  padding: 7px 9px;
  border: none;
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  color: #4a2f0a;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 65%);
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
}
.achievement-claim-btn:active:not(:disabled) { transform: scale(0.94); }
.achievement-claim-btn:disabled {
  background: var(--bg-secondary);
  color: var(--text-disabled);
  cursor: not-allowed;
}

/* Rerouler une mission (cf. demande "pouvoir payer pour changer de missions") */
.achievement-reroll-btn {
  padding: 4px 6px;
  border: 1px solid var(--bg-menu-selected);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.62rem;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 2px;
}
.achievement-reroll-btn:active { transform: scale(0.95); }

/* --- Guidage discret --- */

.pulse-glow {
  animation: pulseGlow 1.8s ease-in-out infinite;
  position: relative;
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,217,90,0); }
  50%      { box-shadow: 0 0 0 4px rgba(255,217,90,0.25), 0 0 14px 2px rgba(255,217,90,0.3); }
}