/* ===============================
   PAGE PLAY – Battle of Dice
   =============================== */

/* -------- Layout global -------- */

.play-page {
  align-items: flex-start;
  justify-content: center;
}

.play-card {
  max-width: 620px;
  margin-top: -50px;
  display: flex;
  flex-direction: column;
  gap: 2px;  /* ESPACE ENTRE : titre / bannière / tabs / contenu */
}


/* ===============================
   1) TOP NAV : Home + Titre centré
   =============================== */

.play-top-nav {
  position: relative;              /* pour positionner Home en absolu */
  display: flex;
  align-items: center;
  justify-content: center;         /* centre le titre */
  margin-bottom: -4;                /* PAS de marge sous le titre */
}

/* Bouton Home (style "chip" bleu nuit + bord doré) */
.nav-back {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 999px;
  border: 2px solid var(--gold);
  background: linear-gradient(to bottom, #071c33, #020814);
  color: var(--gold);
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 0 #00000080;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nav-back:hover {
  transform: translateY(calc(-50% + 1px));
  box-shadow: 0 2px 0 #00000080;
}

/* Conteneur du titre (logo) */
.nav-title {
  display: flex;
  justify-content: center;
}

/* Image titre */
.play-title-logo {
  height: 170px;           /* ajuste cette valeur si tu veux plus petit / plus grand */
  max-width: 80%;
  object-fit: contain;
}


/* ===============================
   2) BANNIÈRE JOUEUR
   (avatar au-dessus du pseudo, boutons verticaux)
   =============================== */

.wallet-section {
  margin-top: 0;           /* colle la bannière au titre (le gap vient de .play-card) */
  margin-bottom: 18px;
  padding: 10px 14px;
  border-radius: 18px;
  background: radial-gradient(circle at 0 0, #ffffff11, #020816);
  box-shadow: 0 8px 18px #000000aa;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
}

/* Bloc avatar + pseudo/wallet */
.player-block {
  display: flex;
  flex-direction: column;      /* avatar AU-DESSUS du nom */
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.player-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

.player-name {
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  max-width: 110px;           /* tronque le wallet si trop long */
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* Bloc boutons Connect / Jackpot / Quests / Shop */
.wallet-actions {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
}

.wallet-right{
  display: flex;
  align-items: center;
  gap: 10px;
}


/* Boutons style HOME, verticaux (icône au-dessus du texte) */
.wallet-btn {
  border-radius: 999px;
  border: 2px solid var(--gold);
  padding: 9px 16px;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(to bottom, #071c33, #020814);
  color: var(--gold);
  box-shadow: 0 3px 0 #000000aa;
  display: inline-flex;
  flex-direction: column;     /* icône AU-DESSUS du label */
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 70px;            /* ajuste ici (+ padding) pour la largeur des boutons */
  white-space: nowrap;
}

.wallet-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #000000aa;
}

/* État connecté du bouton wallet */
.wallet-btn.wallet-btn-connected {
  /* même style que normal, juste un peu plus lumineux si tu veux */
  filter: brightness(1.05);
}

/* icône + texte à l’intérieur des boutons */
.wallet-icon {
  font-size: 0.95rem;
  line-height: 1;
}

.wallet-label {
  line-height: 1;
}


/* Gems pill à droite */
.gems-banner {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.35);
}

.currency-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.currency-label {
  opacity: 0.9;
}

/* ===============================
   3) TABS : Battle Bot / PVP
   =============================== */

.play-mode-tabs {
  display: flex;
  gap: 60px;
  margin-top: -5px;
  justify-content: center; /* centre les deux onglets */
}

/* Bouton onglet = image + texte par-dessus */
.mode-tab {
  position: relative;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;

  width: 230px;   /* 👈 largeur onglet PC */
  height: 50px;   /* 👈 hauteur onglet PC */

  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: #f2f2f2;
}

/* image de fond (la “pill” graphique) */
.mode-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

/* texte au-dessus de l'image */
.mode-tab-label {
  position: relative;
  z-index: 1;
}

/* Image pour Battle Bot */
#tab-bot::before {
  background-image: url("../assets/img/boutonbattlebot.png");
}

/* Image pour PVP (soon) */
#tab-pvp::before {
  background-image: url("../assets/img/bouttonpvp.png");
}

/* état actif : on peut juste laisser l’image faire le job,
   ou ajouter un petit effet de glow si tu veux */
.mode-tab.active {
  /* exemple : léger zoom */
  transform: translateY(-2px);
}

/* état désactivé PVP */
.mode-tab.disabled {
  cursor: default;
  filter: grayscale(0.7);
  opacity: 0.7;
}

/* ------- Sélecteur de niveau de Bot ------- */

.bot-level-selector {
  margin-top: 3px;
  margin-bottom: 7px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #f9fafb;
}

.bot-level-selector label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Style du <select> dans le thème */
#bot-level-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  border-radius: 999px;
  border: 2px solid var(--gold);
  background: linear-gradient(to bottom, #071c33, #020814);
  color: var(--gold);

  padding: 6px 28px 6px 12px; /* espace pour la flèche à droite */
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;

  box-shadow: 0 3px 0 #000000aa;
}

/* petite flèche dorée custom */
.bot-level-selector {
  position: relative;
}

.bot-level-selector::after {
  content: "▾";
  position: absolute;
  right: 335px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 0.7rem;
  color: var(--gold);
}


/* ===============================
   4) ZONE DE JEU (table Bot / Joueur)
   =============================== */

.play-main {
  margin-top: 0px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Plateau de jeu */
.arena {
  position: relative;

  /* image de plateau */
  background: url("../assets/img/tablegameplay.png") center no-repeat;
  background-size: 100% 100%;

  border-radius: 24px;

  /* taille du plateau */
  width: 100%;
  max-width: 900px;
  height: 300px;           /* 👈 hauteur du board (ajuste si besoin) */

  margin: 0 auto;
  padding: 30px 40px;      /* 👈 décale le texte plus haut / plus bas */

  display: grid;
  grid-template-rows: auto auto auto;  /* Bot / ligne / Player */
  gap: -0px;
}

/* Bloc Bot & Player : plus de fond jaune, on laisse voir la table */
.arena-side {
  background: transparent;
  border-radius: 18px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Ligne BOT / PLAYER / HP */
.arena-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fef9c3;                     /* doré clair */
  text-shadow: 0 1px 0 #000000;       /* petit relief */
}

.side-title {
  letter-spacing: 0.06em;
}

.side-subtitle {
  font-size: 1rem;
  margin-top: -80px;
  margin-left: -40px;
  align-items: center;
  color: #facc15;                     /* Lvl 1 / Rolls */
}

.side-hp {
  color: #facc15;                     /* HP: 50 orange */
  font-size: 1.6rem;
  margin-top: -80px;
  font-weight: 800;
  display: inline-flex;
  gap: 7px;          /* espace entre le cœur et le nombre */
}

/* icône de cœur HP */
.hp-heart-icon {
  margin-top: 6px;
  width: 28px;       /* ajuste la taille ici */
  height: 28px;
  display: inline-block;
}




/* Texte "Résultats Bot" / "Résultats Joueur" */
.side-result-label {
  margin-top: px;
  font-size: 0.8rem;
  color: #e5e7eb;
  text-shadow: 0 1px 0 #000000;
}

/* Séparateur entre Bot et Player :
   l'image a déjà une ligne, donc juste un peu d'espace */
.arena-divider {
  height: 40px;
  background: transparent;
}

/* Avatars dans le header de la table */

.side-title {
  display: inline-flex;
  align-items: center;
}

/* base commune */
.side-avatar {
  width: 100px;     /* taille de base */
  height: 100px;
  object-fit: contain;
  display: block;
}

/* BOT uniquement */
.arena-bot .side-avatar-bot {
  margin-left: 10px;  /* pousse plus vers la gauche */
  margin-top: -10px;    /* remonte / descend le bot */
}

/* PLAYER uniquement */
.arena-player .side-avatar-player {
  margin-left: 10px;  /* même chose, tu peux mettre une autre valeur */
  margin-top: 0px;
}

/* ===============================
   DÉS BOT / PLAYER (faux 3D)
   =============================== */

.dice-display {
  width: 60px;          /* 👉 taille du dé sur PC */
  height: 60px;
  border-radius: 18px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: px;
}

/* image de dé “faux 3D” */
/* texte caché (accessibilité / debug) */
.dice-face {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Conteneur du dé */
.dice-display {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: -70px;
 

  /* 👇 donne de la profondeur pour le faux 3D */
  perspective: 500px;
}

/* image du dé */
.dice-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: none;

  /* 👇 nécessaire pour les rotations 3D */
  transform-style: preserve-3d;
  transform-origin: center;
}

/* nouvelle anim “roll 3D” */
.dice-display.rolling .dice-img {
  animation: dice-roll-3d 0.1s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes dice-roll-3d {
  0% {
    transform: translateY(0) rotateX(0deg) rotateZ(0deg) scale(1);
  }
  15% {
    transform: translateY(-8px) rotateX(180deg) rotateZ(12deg) scale(1.05);
  }
  35% {
    transform: translateY(0) rotateX(360deg) rotateZ(-10deg) scale(1.02);
  }
  55% {
    transform: translateY(-6px) rotateX(540deg) rotateZ(8deg) scale(1.06);
  }
  75% {
    transform: translateY(0) rotateX(720deg) rotateZ(-4deg) scale(1.03);
  }
  100% {
    transform: translateY(0) rotateX(720deg) rotateZ(0deg) scale(1);
  }
}

/* ===============================
   5) COMBAT LOG
   =============================== */

.combat-log {
  background: rgba(3, 10, 24, 0.9);
  border-radius: 14px;
  padding: 8px 10px;
  font-size: 0.78rem;
  color: #e8f0ff;
}

.combat-log-title {
  font-weight: 700;
  margin-bottom: 4px;
}

.combat-log-body {
  max-height: 4em;   /* ≈ 2 lignes avec line-height: 1.4 */
  overflow-y: auto;    /* le reste en scroll */
  line-height: 1.4;
}



/* ===============================
   6) BARRE DU BAS
   =============================== */

.play-bottom-bar {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}

/* Bouton bas : taille contrôlée ici */
.bottom-btn {
  position: relative;
  border: none;
  padding: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;

  width: 110px;        /* 👈 largeur PC */
  height: 100px;       /* 👈 hauteur PC */
  margin: 0 auto;     /* centre le bouton dans sa colonne */

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-dark);
}

/* Image de fond du bouton (tes PNG carrés / ronds) */
.bottom-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;   /* l’image remplit le bouton */
  pointer-events: none;
}

/* contenu (icône + texte) au-dessus de l'image */
.bottom-btn span,
.bottom-btn .chest-button-wrapper {
  position: relative;
  z-index: 1;
}

/* Image de fond pour chaque bouton du bas */

/* Boosts */
#btn-boost-cards::before {
  background-image: url("../assets/img/buttonsquare.png");
}

/* Boost actif */
#btn-active-boost::before {
  background-image: url("../assets/img/buttonsquare.png");
}

/* Roll (bouton rond) */
#btn-roll-dice::before {
  background-image: url("../assets/img/buttoncircle.png");
}

/* Profil */
#btn-player-profile::before {
  background-image: url("../assets/img/buttonsquare.png");
}

/* Coffres */
#btn-open-chests::before {
  background-image: url("../assets/img/buttonsquare.png");
}

/* Coffres : icône + badge */
.chest-button-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottom-chest-icon {
  position: relative;
  right: -10px;
  width: 70px;
  height: auto;
  display: block;
}

.chest-count-badge {
  position: absolute;
  bottom: -20px;
  right: 4px;
  min-width: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #111827;
  color: #f9fafb;
  font-size: 0.65rem;
  font-weight: 700;
  border: 1px solid #fbbf24;
  text-align: center;
}

/* Icônes dans les boutons UI du bas */
.bottom-icon,
.roll-dice-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Taille par défaut des icônes carré (Cards / Boost / Profil / Coffres) */
.bottom-icon-img,
.bottom-chest-icon {
  width: 64px;   /* 👈 règle la taille ici */
  height: 64px;
  object-fit: contain;
}

/* Inventaire de cartes (btn Cards) */
#btn-boost-cards .bottom-icon-img {
  width: 40px;   /* 👈 mets la taille que tu veux */
  height: 40px;
}
/* Inventaire de cartes (btn Cards) */
#btn-boost-cards .bottom-icon-img {
  width: 70px;   /* 👈 mets la taille que tu veux */
  height: 70px;
}
/* Boost actif (btn Boost actif) */
#btn-active-boost .bottom-icon-img {
  width: 60px;   /* tu peux mettre plus ou moins */
  height: 60px;
}



/* Icône Roll (un peu plus grosse si tu veux) */
.roll-icon-img {
  width: 70px;   /* 👈 taille du dé */
  height: 70px;
  object-fit: contain;
}


/* --- Version mobile --- */
@media (max-width: 480px) {
  .play-bottom-bar {
    gap: 4px;
  }

  .bottom-btn {
    width: 64px;    /* 👈 largeur mobile */
    height: 64px;   /* 👈 hauteur mobile */
    font-size: 0.7rem;

  }
}



/* ===============================
   POPUP RÉCOMPENSE COMBAT
   =============================== */

.reward-popup {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.reward-popup.visible { display: flex; }

.reward-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.reward-popup-card {
  position: relative;
  z-index: 1;
  width: min(520px, 92vw);
}

.reward-popup-skin {
  position: relative;
  width: 100%;
}

.reward-popup-bg {
  width: 100%;
  height: auto;
  display: block;
}

.reward-popup-layer {
  position: absolute;
  inset: 0;
  padding: 26px 34px 26px; /* ajuste si besoin */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

.reward-popup-title {
  font-size: 1.05rem;
  font-weight: 900;
  color: #facc15;
  text-shadow: 0 2px 0 #000000aa;
}

.reward-popup-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 92%;
}

.reward-popup-chest {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6));
}

.reward-popup-text {
  font-size: 0.9rem;
  font-weight: 800;
  color: #facc15;
  line-height: 1.2rem;

}

.reward-popup-btn {
  border: none;
  border-radius: 999px;
  padding: 8px 22px;
  font-size: 0.85rem;
  font-weight: 900;
  cursor: pointer;
  background: linear-gradient(to bottom, #f8d477, #f5b34c);
  color: #2a1a08;
  box-shadow: 0 4px 0 #b37b26;
}

.reward-popup-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #b37b26;
}

/* ===============================
   POPUP INVENTAIRE COFFRES
   =============================== */

.chest-popup {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 110;
}

.chest-popup.visible {
  display: flex;
}

.chest-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.chest-popup-card {
  position: relative;
  z-index: 1;
  width: 600px;
  max-width: 90%;
  aspect-ratio: 4 / 3;
  background: url("../assets/img/popuplarge.png") center / contain no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 80px 20px;
}

/* rangée des 3 coffres */
.chest-popup-inner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.chest-slot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transform: translateY(4px);
  transition: transform 0.1s ease, filter 0.1s ease;
}

.chest-slot:hover {
  filter: brightness(1.05);
}

.chest-slot.selected {
  transform: translateY(0);
  filter: drop-shadow(0 0 8px #34d399);
}

.chest-img {
  width: 80px;
  max-width: 100%;
}

.chest-count {
  font-size: 0.8rem;
  font-weight: 700;
  color: #111827;
  text-shadow: 0 1px 0 #fef3c7;
}

/* zone texte + boutons en bas */
.chest-popup-footer {
  width: 100%;
  text-align: center;
  margin-top: 4px;
}

.chest-popup-status {
  font-size: 0.83rem;
  color: #111827;
  font-weight: 700;
  margin-bottom: 8px;
  text-shadow: 0 1px 0 #fef3c7;
}

.chest-popup-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.chest-popup-btn {
  border: none;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(to bottom, #f8d477, #f5b34c);
  color: #2a1a08;
  box-shadow: 0 4px 0 #b37b26;
}

.chest-popup-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #b37b26;
}

.chest-popup-btn-close {
  background: linear-gradient(to bottom, #f87171, #dc2626);
  color: #fee2e2;
  box-shadow: 0 4px 0 #7f1d1d;
}

/* ===============================
   POPUP LOOT DE COFFRE
   =============================== */

.chest-loot-popup {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 120;
}

.chest-loot-popup.visible {
  display: flex;
}

.chest-loot-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.chest-loot-card {
  position: relative;
  z-index: 1;
  width: 550px;
  max-width: 90%;
  aspect-ratio: 4 / 3;
  background: url("../assets/img/popupsmall.png") center / contain no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;        /* ✅ centre verticalement le contenu */
  padding: 32px 24px 28px;        /* un peu plus d’air autour */
}

.chest-loot-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;                       /* ✅ espace propre entre icône et texte */
  margin-top: 40px;              /* remonte légèrement le bloc dans la zone beige */
  margin-bottom: 10px;            /* espace avec le bouton OK */
}

.chest-loot-image-wrapper {
  width: 70px;                   /* ✅ icône un peu grande mais pas énorme */
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chest-loot-img {
  max-width: 100%;
  max-height: 100%;
}

.chest-loot-text {
  font-size: 0.9rem;              /* texte un poil plus gros */
  text-align: center;
  color: #111827;
  font-weight: 700;
  text-shadow: 0 1px 0 #fef3c7;
}

/* ===== Chest Skip Popup (Open now) ===== */
.chest-skip-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.chest-skip-popup.visible {
  display: flex;
}

.chest-skip-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
}

.chest-skip-card{
  position: relative;
  z-index: 1;
  width: min(520px, 92vw);
  aspect-ratio: 1 / 1;
  
  background: url("../assets/img/popupsmall.png") center/contain no-repeat;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

  padding: clamp(90px, 14vw, 125px) clamp(28px, 6vw, 70px) clamp(55px, 10vw, 75px);
  text-align: center;
}

.chest-skip-title{
  position: flex;
   margin-bottom: 20px;
  top: clamp(16px, 3vw, 28px);
  left: 0;
  right: 0;
  font-weight: 900;
  font-size: clamp(18px, 4.6vw, 32px);
  color: #f5c451;
  text-shadow: 0 2px 0 rgba(0,0,0,0.55);
}

.chest-skip-text{
  width: 100%;
  
  font-size: clamp(10px, 3.2vw, 18px);
  font-weight: 800;
  color: #b45309;
  line-height: 1.25;
  white-space: pre-line; /* pour afficher les \n */
  margin-bottom: clamp(40px, 2vw, 16px);
}

.chest-skip-actions{
  display: flex;
  margin-bottom:40px;
  gap: 12px;
}

.chest-skip-cancel{
  opacity: 0.9;
  filter: grayscale(0.25);
}


/* ===============================
   POPUP INVENTAIRE DE CARTES
   =============================== */

.cards-popup {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 130;
}

.cards-popup.visible {
  display: flex;
}

.cards-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.cards-popup-card {
  position: relative;
  z-index: 1;
  width: 545px;
  height: 300px;
  max-width: 80%;
  aspect-ratio: 4 / 3;
  background: url("../assets/img/popuplarge.png") center / contain no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 28px 20px;
}

.cards-popup-header {     /*Titre  */
  font-weight: 700;           
  font-size: 1rem;
  margin-bottom: 40px;
  color: #000000;
  
}

/* Le corps : 2 colonnes côte à côte + scroll si beaucoup de cartes */
.cards-popup-body {
  flex: 1;
  width: 100%;
  margin-top: 4px;
  margin-bottom: 10px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-start;
  overflow-y: auto;        /* 🔥 scroll vertical si nécessaire */
  padding: 4px 4px 0;
}

/* Chaque colonne (Attack / HP) */
.cards-popup-section {
  flex: 1;
  min-width: -4;           /* évite les débordements de flex */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cards-popup-section-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 4px;
}

/* Grille de cartes dans chaque colonne */
.cards-grid {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

/* Carte mini (icône + texte) */
.card-mini {
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.7rem;
}

.card-mini img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin-bottom: 2px;
}

.card-mini-label {
  text-align: center;
}

/* message quand aucune carte dans la colonne */
.cards-grid-empty {
  font-size: 0.75rem;
  color: #111827;
  text-align: center;
  margin-top: 8px;
}

.card-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(248, 250, 252, 0.06);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

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

.card-mini-label {
  font-size: 0.78rem;
  text-align: center;
  color: #111827;
}

/* ✅ carte active (sélectionnée) */
.card-mini-active {
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.8);
  border: 2px solid #facc15;
  transform: scale(1.05);
}

.active-boost-body {
  display: flex;
  gap: 0px;
  justify-content: center;
  align-items: flex-start;
}

.active-boost-slot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: -2px;
}

.active-boost-slot .card-mini {
  margin-top: -10px;
}

.chest-timer {
  margin-top: 4px;
  font-size: 0.75rem;
  color: #f9fafb;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  min-height: 1em; /* pour éviter que ça “saute” */
}

/* ===============================
   BATTLE LOG + FREE ROLLS TIMER
   =============================== */

.combat-log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
  margin-bottom: 6px;
}

.combat-log-title {
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.free-roll-timer {
  font-size: 0.75rem;
  color: #e5e7eb;      /* gris clair */
  opacity: 0.9;
  text-align: right;
}

/* ===============================
   PLAYER PROFILE & RENAME POPUPS
   =============================== */

#profile-overlay,
#rename-overlay {
  position: fixed;
  inset: 0;
  display: none;              /* caché par défaut */
  align-items: center;
  justify-content: center;
  z-index: 140;
}

#profile-overlay.visible,
#rename-overlay.visible {
  display: flex;              /* affiché quand on ajoute .visible */
}

#profile-overlay .popup-backdrop,
#rename-overlay .popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

/* -------- Carte de profil (même style que cartes/boosts) -------- */

.profile-popup-card {
  position: relative;
  z-index: 1;
  width: 545px;
  max-width: 95%;
  aspect-ratio: 4 / 3;
  background: url("../assets/img/popuplarge.png") center / contain no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 40px 20px;
}

/* Bouton de fermeture commun */
.popup-close-btn {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: none;
  background: #1f2937;
  color: #f9fafb;
  font-size: 18px;
  cursor: pointer;
}

/* Haut de la popup : avatar + nom + wallet + bouton rename */
.profile-header {
  width: 80%;
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 80px;
  margin-bottom: 18px;
}

.profile-avatar-circle {
  width: 100px;
  height: 100px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-left: -8px; /* petit décalage pour coller au cadre */
}

.profile-avatar-circle img {
  width: 110%;
  height: auto;
}

.profile-name-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-nickname {
  font-size: 1.25rem;
  font-weight: 800;
  color: #111827;
}

.profile-wallet {
  font-size: 0.8rem;
  color: #4b5563;
}

.profile-rename-btn {
  margin-top: 6px;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  border: none;
  background: #10b981;
  color: #f9fafb;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

/* Ligne de stats comme la popup Active boosts */

.profile-stats-row{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.profile-stat{
  flex: 1 0 45%;
  text-align: center;
}


.profile-stat-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #4b5563;
}

.profile-stat-value {
  margin-top: 4px;
  font-size: 1.2rem;
  font-weight: 800;
  color: #111827;
}

/* =========================
   Mailbox (mini button + popup)
   ========================= */

.profile-name-row{
  display: flex;
  align-items: center;
  gap: 10px;
}

.mailbox-mini-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 900;
  color: #111827;
  opacity: 0.95;
}

.mailbox-mini-btn:hover{
  background: rgba(0,0,0,0.06);
}

.mailbox-mini-icon{
  font-size: 16px;
  line-height: 1;
}

.mailbox-mini-text{
  font-size: 13px;
}

.mailbox-mini-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(245, 197, 81, 0.95);
  color: #111827;
}

.mailbox-mini-badge.hidden{
  display: none;
}

/* Popup card (use popuplarge.png) */
.mailbox-popup-card{
  position: relative;
  z-index: 1;
  width: 650px;
  max-width: 92%;
  aspect-ratio: 4 / 3;
  background: url("../assets/img/popuplarge.png") center / contain no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 26px 18px;
  box-sizing: border-box;
}

.mailbox-popup-title{
  width: 100%;
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 900;
}

.mailbox-popup-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 26px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(17,24,39,0.12);
  font-weight: 900;
}

.mailbox-refresh-btn{
  border: none;
  border-radius: 10px;
  padding: 6px 10px;
  font-weight: 900;
  cursor: pointer;
}

.mailbox-popup-list{
  width: 100%;
  margin-top: 12px;
  padding: 0 10px;
  box-sizing: border-box;
  max-height: 525px;
  overflow: auto;
}

/* Message item */
.mail-item{
  background: rgba(255,255,255,0.70);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 8px;
  color: #111827;
}

.mail-item.is-new{
  outline: 2px solid rgba(245, 197, 81, 0.95);
}

.mail-top{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  align-items:flex-start;
}

.mail-title{
  font-weight: 900;
}

.mail-badges{
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.mail-badge{
  font-size: 12px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(17,24,39,0.12);
}

.mail-body{
  margin-top: 6px;
  white-space: pre-wrap;
  font-size: 13px;
  opacity: 0.95;
}

.mail-rewards{
  margin-top: 8px;
  font-size: 13px;
  font-weight: 900;
}

.mail-actions{
  margin-top: 8px;
  display:flex;
  gap: 8px;
}

.mail-btn{
  border: none;
  border-radius: 10px;
  padding: 6px 10px;
  font-weight: 900;
  cursor:pointer;
}

.mail-btn[disabled]{
  opacity: 0.5;
  cursor:not-allowed;
}



/* -------- Popup Rename (petite, même style que loot chest) -------- */

.rename-popup-card {
  position: relative;
  z-index: 1;
  width: 550px;
  max-width: 90%;
  aspect-ratio: 4 / 3;
  background: url("../assets/img/popupsmall.png") center / contain no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 32px 20px;
}

.rename-title {
  font-size: 1.6rem;
  font-weight: 800;
  text-align: center;
  margin-top: 100px;
  color: #10b981;
}

.rename-cost {
  font-size: 0.85rem;
  text-align: center;
  margin-top: 4px;
  color: #f97316;
}

.rename-input-row {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

#rename-input {
  width: 70%;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #b33a3af1;
  font-size: 0.95rem;
  text-align: center;
}

.rename-error {
  margin-top: 8px;
  font-size: 0.8rem;
  text-align: center;
  color: #b91c1c;
  display: none;
}

.rename-confirm-btn {
  margin-top: 16px;
  align-self: center;
  padding: 6px 18px;
  border-radius: 999px;
  border: none;
  background: #10b981;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
}

/* Bouton de fermeture générique pour toutes les popups */
.popup-close-btn {
  position: absolute;
  top: 15px;
  right: 0px;
  width: 70px;
  height: 70px;
  border: none;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

/* l'image à l'intérieur du bouton */
.popup-close-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* ===============================
   WALLET CHOOSER POPUP
   =============================== */

#wallet-chooser-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9500;
}

#wallet-chooser-overlay.active {
  display: flex;
}

.wallet-chooser-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
}

.wallet-chooser-card {
  position: relative;
  z-index: 1;
  width: 520px;
  max-width: 95%;
  background: radial-gradient(circle at 0 0, #0b1220, #020617);
  border-radius: 20px;
  border: 2px solid rgba(245, 196, 81, 0.85);
  box-shadow: 0 18px 40px #000000dd;
  padding: 22px 18px 16px;
  text-align: center;
}

.wallet-chooser-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.wallet-chooser-close img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wallet-chooser-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: #facc15;
  margin-top: 6px;
  margin-bottom: 6px;
}

.wallet-chooser-text {
  font-size: 0.86rem;
  color: #e5e7eb;
  line-height: 1.25rem;
  margin: 0 auto 14px;
  max-width: 420px;
}

.wallet-chooser-url-block {
  background: rgba(15, 23, 42, 0.85);
  border-radius: 14px;
  padding: 10px 10px;
  margin: 0 8px 14px;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.wallet-chooser-url-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9ca3af;
  margin-bottom: 6px;
}

.wallet-chooser-url-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.wallet-chooser-url {
  font-size: 0.82rem;
  font-weight: 700;
  color: #e5e7eb;
  word-break: break-all;
  flex: 1;
}

.wallet-chooser-copy {
  border: 2px solid rgba(245, 196, 81, 0.95);
  background: linear-gradient(to bottom, #f8d477, #f5b34c);
  color: #2a1a08;
  font-weight: 900;
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 0 #b37b26;
}
.wallet-chooser-copy:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 #b37b26;
}

.wallet-chooser-url-help {
  margin-top: 6px;
  font-size: 0.72rem;
  color: #9ca3af;
}

.wallet-chooser-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 0 10px;
}

.wallet-chooser-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 2px solid rgba(245, 196, 81, 0.55);
  border-radius: 16px;
  padding: 10px 12px;
  cursor: pointer;
  background: linear-gradient(to bottom, #071c33, #020814);
  color: #f5c451;
  box-shadow: 0 4px 0 #000000aa;
}

.wallet-chooser-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 #000000aa;
}

.wallet-chooser-logo {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 42px;
}

.wallet-chooser-logo img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.wallet-emoji {
  font-size: 1.2rem;
}

.wallet-chooser-label {
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.wallet-chooser-tip {
  margin: 14px 10px 0;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-align: left;
  color: #e5e7eb;
}

.wallet-chooser-tip-title {
  font-weight: 900;
  color: #facc15;
  margin-bottom: 6px;
}

.wallet-chooser-tip-steps {
  margin: 0;
  padding-left: 18px;
  font-size: 0.82rem;
  line-height: 1.2rem;
}

.wallet-chooser-footnote {
  margin-top: 12px;
  font-size: 0.72rem;
  color: #9ca3af;
}

/* ===============================
   Cards popup (popuplong) - clean layout
   =============================== */

#cards-popup .cards-popup-card{
  /* Taille stable (mobile + PC) */
  width: min(560px, 92vw);
  height: min(860px, 88vh);

  /* Important: ne pas forcer aspect-ratio 4/3 */
  aspect-ratio: auto;

  background: url("../assets/img/popuplong.png") center / contain no-repeat;

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* zone “blanche” */
  padding: 130px 34px 95px; /* top / sides / bottom */
  overflow: hidden;
}

/* ✅ Titre mieux placé */
#cards-popup .cards-popup-header{
  position: absolute;
  top: 70px;           /* ajuste +/- 10px si tu veux */
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;

  font-weight: 900;
  font-size: 1.05rem;
  color: #111827;
}


/* ✅ Le scroll: on le met sur le body et on laisse flex gérer la hauteur */
#cards-popup .cards-popup-body{
  width: 87%;
  flex: 1;                /* prend tout l’espace restant */
  overflow-y: auto;        /* scroll propre */
  overflow-x: hidden;

  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  gap: 26px;               /* ✅ ESPACE ENTRE COLONNES */
  padding: 4px 6px 0;
}

/* colonnes */
#cards-popup .cards-popup-section{
  flex: 1;
  min-width: 0-4;            /* ✅ au lieu de -4 */
}

/* titres Attack / HP */
#cards-popup .cards-popup-section-title{
  margin: 0 0 10px;
  font-weight: 900;
  font-size: 0.85rem;
}

/* grille un peu plus aérée */
#cards-popup .cards-grid{
  gap: 0px;
}

/* Close button ONLY for Cards popup */
#cards-popup .popup-close-btn{
  position: absolute;
  top: 30px;
  right: 2px;
  width: 64px;
  height: 64px;
  z-index: 5;
}

/* ===============================
   ACTIVE BOOST POPUP (independent)
   =============================== */

#active-boost-popup .cards-popup-card{
  width: min(520px, 92vw);     /* taille PC */
  height: min(520px, 86vh);
  aspect-ratio: auto;
  background: url("../assets/img/popupsmall.png") center / contain no-repeat; /* ou popuplarge */
  padding: 110px 40px 80px;    /* top / sides / bottom */
}
#active-boost-popup .cards-popup-header{
  position: absolute;
  top: 66px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-weight: 900;
  font-size: 1.5rem;
  color: #111827;
}
#active-boost-popup .active-boost-body{
  margin-top: 50px;
  display: flex;
  gap: 0px;          /* espace entre colonnes */
  justify-content: center;
  align-items: flex-start;
  
}

/* ✅ TITRES COLONNES Attack / HP */
#active-boost-popup .cards-section-title{
  font-size: 0.95rem;     /* taille */
  font-weight: 900;
  color: #111827;         /* couleur */
  margin-bottom: 25px;    /* espace sous le titre */
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Taille des cartes (slots) dans la popup Boost */
#active-boost-popup .active-boost-slot{
  width: 190px;   /* ⬅️ augmente = carte plus large */
}

/* Taille du “cadre” card-mini (le bloc) */
#active-boost-popup .card-mini{
  width: 120px;   /* ⬅️ augmente = carte plus grosse */
  padding: 12px;
}

/* Taille de l’icône (épée/coeur) */
#active-boost-popup .card-mini img{
  width: 70px;    /* ⬅️ augmente = icône plus grosse */
  height: 70px;
}

/* Texte sous l’icône (base damage/HP) */
#active-boost-popup .card-mini div{
  font-size: 0.9rem; /* ⬅️ augmente = texte plus gros */
}


/* Button close Boost Pop up*/

#active-boost-popup .popup-close-btn{ top: 30px; right:-27px; }





/* --- Potions UI (minimal) --- */
.boost-potions-row{
  display:flex;
  gap:18px;
  justify-content:center;
  margin-top: 10px;
}

.boost-potion-item{
  position:relative;
  width: 36px;
  height: 36px;
}

.boost-potion-icon{
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.player-potions{
  display:flex;
  gap:14px;
  margin-top: -60px;
  justify-content: flex-end;
  width: 100%;
}

.player-potion{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 6px;
}

.potion-use-icon{
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.potion-use-btn{
  padding: 1px 8px;
  border-radius: 8px;
  border: 2px solid #fbbf24;
  background: #0b1220;
  color: #fbbf24;
  font-weight: 800s;
  cursor: pointer;
  font-size: 0.9rem;
}

.potion-use-btn:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

.potion-count-badge{
  position:absolute;
  top: 20px;
  right:-2px;
  min-width: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background:#111827;
  color:#f9fafb;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid #fbbf24;
  text-align:center;
}

/* reward loot*/
.loot-potion{
  margin-top: 6px;
  font-weight: 900;
}

/* Put potions at the bottom of Boost popup */
#active-boost-popup .boost-potions-row{
  position: absolute;
  left: 0;
  right: 0;

  /* ajuste la hauteur : plus petit = plus bas */
  bottom: 110px;

  display: flex;
  justify-content: center;
  gap: 170px;
  margin: 0;
  padding: 0;
}

/* un peu plus gros + joli */
#active-boost-popup .boost-potion-item{
  width: 50px;
  height: 50px;
}

#active-boost-popup .boost-potion-icon{
  width: 62px;
  height: 62px;
}

#active-boost-popup .potion-count-badge{
  top: -6px;
  right: -6px;
}

/* Déplacer uniquement la 2e potion (heal) */
#active-boost-popup .boost-potions-row {
  margin-left: -10px; /* mets -8, -12, -16 ... */
}
/* Déplacer uniquement la 2e potion (heal) */
#active-boost-popup .boost-potion-item {
  margin-left: 0px; /* mets -8, -12, -16 ... */
}

/* =======================
   PAID ROLL CONFIRM POPUP
   (max 4 paid rolls/day)
   ======================= */

.paid-roll-popup{
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 14px;

  /* THEME (edit here) */
  --paid-title-color: #f7c948;
  --paid-title-shadow: 0 3px 0 rgba(0,0,0,0.35);
  --paid-main1-color: #9a1212;
  --paid-main-color: #9a3e12;
  --paid-main-shadow: 0 1px 0 rgba(255,255,255,0.35);
  --paid-main3-color: #000000;

  --paid-sub-color: #9a3e12;
  --paid-sub-shadow: 0 1px 0 rgba(255,255,255,0.35);

  --paid-title-size: 22px;
  --paid-main-size: 18px;
  --paid-sub-size: 16px;
  --paid-label-size: 15px;
}

.paid-roll-popup.hidden{ display: none; }

.paid-roll-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}

.paid-roll-card{
  position: relative;
  z-index: 2;

  width: min(520px, 95vw);
  height: min(520px, 80vh);

  background-image: url("../assets/img/popupsmall.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;

  padding: 60px 54px 150px 54px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.45);

  display: flex;
  flex-direction: column;
  align-items: center;
}

.paid-roll-title{
  font-size: var(--paid-title-size);
  font-weight: 1000;
  letter-spacing: 1px;
  color: var(--paid-title-color);
  text-shadow: var(--paid-title-shadow);
  margin-bottom: 110px;
}

.paid-roll-body{
  text-align: center;
  width: 100%;
}

.paid-roll-text{
  font-size: var(--paid-main-size);
  font-weight: 1000;
  color: var(--paid-main1-color);
  text-shadow: var(--paid-main-shadow);
  margin-bottom: 12px;
}

.paid-roll-text2{
  font-size: var(--paid-sub-size);
  font-weight: 900;
  color: var(--paid-sub-color);
  text-shadow: var(--paid-sub-shadow);
  line-height: 1.25;
}
.paid-roll-text2 b{ font-weight: 1000; }

.paid-roll-label{
  margin-top: 25px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;

  font-size: var(--paid-label-size);
  font-weight: 1000;
  color: var(--paid-main3-color);
  text-shadow: var(--paid-main-shadow);
}
.paid-roll-label input[type="checkbox"]{ transform: scale(1.05); }

.paid-roll-actions{
  position: absolute;
  bottom: 110px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 22px;
}

.paid-roll-btn{
  min-width: 150px;
  height: 42px;
  border-radius: 14px;
  border: none;
  cursor: pointer;

  background: linear-gradient(#f7d28a, #d29a3a);
  color: #2b1a08;
  font-size: 15px;
  font-weight: 1000;

  box-shadow: 0 6px 0 rgba(0,0,0,0.18);
  transition: transform .06s ease;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.paid-roll-btn:active{ transform: translateY(1px); }

.paid-roll-btn:disabled{
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.bodcoin-icon{
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: inline-block;
  transform: translateY(1px);
}


/* =======================
   COOLDOWN ROLL BUTTON (overlay)
   ======================= */
#btn-roll-dice.is-cooldown,
#btn-roll-dice:disabled {
  opacity: 0.7;
  filter: grayscale(1);
  cursor: not-allowed;
  position: relative;
}

/* On garde l'image, mais on la "dimm" un peu */
#btn-roll-dice.is-cooldown > * {
  opacity: 0.35;
}

/* Texte overlay au-dessus (sans supprimer l'image) */
#btn-roll-dice.is-cooldown::after {
  content: "Wait " attr(data-cooldown) "s";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  pointer-events: none;
}



/* ===============================
   WHITELIST LOCK (Play)
   - hides the whole page
   - keeps title + top banner visible
   =============================== */

.wl-screen.hidden { display: none; }

.wl-screen{
  position: fixed;
  inset: 0;
  z-index: 99999;
}

.wl-screen-bg{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.82);
}

/* keep top visible above the lock */
body.whitelist-locked .play-top-nav,
body.whitelist-locked .wallet-actions,
body.device-locked .play-top-nav,
body.device-locked .wallet-actions{
  position: relative;
  z-index: 99999;
}


/* popup card style (same vibe as game popups) */
.wl-screen-card{
  position: absolute;
  left: 50%;
  top: 52%;
  max-width: 200%;
  aspect-ratio: 4 / 3;
  transform: translate(-50%, -50%);
  z-index: 100000;

  width: min(340px, 92vw);
  padding: 90px 70px 55px;
  text-align: center;

  background: url("../assets/img/popuplong.png") center / contain no-repeat;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,0.55));
}

.wl-close{
  position: absolute;
  top: 5px;
  right: -4px;
  width: 68px;
  height: 68px;
  border: none;
  background: transparent;
  cursor: pointer;
}
.wl-close img{ width:100%; height:100%; object-fit:contain; }

.wl-title{
  font-size: 1.5rem;
  font-weight: 900;
  color: #facc15;
  text-shadow: 0 2px 0 rgba(0,0,0,0.65);
  -webkit-text-stroke: #000000 0.7px;
  margin-bottom: 40px;
  margin-top: -63px;
}

.wl-text{
  font-size: 1.2rem;
  font-weight: 800;
  color: #facc15;
  line-height: 1.25rem;
  text-shadow: 0 2px 0 rgba(0,0,0,0.55);
  -webkit-text-stroke: #000000 0.5px;
  margin-bottom: 25px;
}

.wl-cta{
  display: inline-block;
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 0.9rem;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(to bottom, #f8d477, #f5b34c);
  color: #2a1a08;
  box-shadow: 0 4px 0 #b37b26;
}

.wl-footnote{
  margin-top: 18px;
  font-size: 0.6rem;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.9);

 
}

/* DEVICE LOCK (multi-device) */
body.device-locked .bod-card.play-card{
  pointer-events: none;
  filter: blur(1px);
}
body.device-locked #dl-screen{
  pointer-events: auto; /* l’overlay reste cliquable */
}
button.wl-cta{
  border: none;
}


/* =========================================================
   FIX DESKTOP: Reward popup skin (same as mobile)
   (copie du responsive mais appliquée à toutes tailles)
   ========================================================= */

.reward-popup {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.reward-popup.visible { display: flex; }

.reward-popup-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.70);
  z-index: 0;
}

.reward-popup-card{
  position: relative;
  z-index: 1;
  width: min(400px, 92vw);
  aspect-ratio: 3/4;
  background: url("../assets/img/popupsmall.png") center/contain no-repeat;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

  /* padding “comme mobile” pour tomber dans le parchemin */
  padding: clamp(90px, 10vw, 125px)
           clamp(70px, 5vw, 80px)
           clamp(155px, 8vw, 75px);
  text-align: center;
}

.reward-popup-title{
  position: absolute;
  top: clamp(42px, 6vw, 70px);
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(20px, 2.2vw, 22px);
  font-weight: 900;
  color: #facc15;
  text-shadow: 0 2px 0 #000000aa;
  width: 80%;
  margin-top: 70px;
}

.reward-popup-content{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vw, 18px);
  margin-bottom: clamp(10px, 2vw, 16px);
}

.reward-popup-image-wrapper{
  width: clamp(62px, 14vw, 96px);
  height: clamp(62px, 14vw, 96px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.reward-popup-img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
}

.reward-popup-text{
  font-size: clamp(14px, 2.2vw, 18px);
  font-weight: 800;
  color: #b45309;
  line-height: 1.2;
}

/* OK button toujours au-dessus */
#reward-popup-close{
  position: relative;
  z-index: 2;
}

/**************************************
 * MAILBOX V1 (UI PRO) - popuplong.png
 * Fichier: play.css + pvp.css
 *
 * Où modifier :
 *  - Taille popup : .mailbox-popup-card (width / height)
 *  - Position header : .mailbox-topbar (top / left / right)
 *  - Position contenu : .mailbox-content (top margin)
 *  - Hauteur liste : #mailbox-list (max-height)
 **************************************/

/** Overlay */
#mailbox-overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
#mailbox-overlay.visible{ display:flex; }

#mailbox-overlay-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.60);
}

/** Card */
.mailbox-popup-card{
  position:relative;
  z-index:1;

  /** ✅ Taille popup (MODIF ICI) */
  width: min(560px, 92vw);
  height: min(860px, 90vh);

  background: url("../assets/img/popuplong.png") center / 100% 100% no-repeat;

  /** ✅ Padding général (MODIF ICI) */
  padding: 86px 34px 48px 34px;

  box-sizing:border-box;
}

/** Close */
#mailbox-close-btn{
  position:absolute;
  top: 30px;
  right: -22px;
  width:64px;
  height:64px;
  border:none;
  background:transparent;
  cursor:pointer;
  z-index:5;
}
#mailbox-close-btn img{ width:100%; height:100%; }

/* =========================================================
   TOP HEADER (comme ton exemple)
   -> placé en ABSOLUTE pour coller au cadre / bouclier
   ========================================================= */

/** ✅ Position header (MODIF ICI si besoin) */
.mailbox-topbar{
  position:absolute;
  top: 62px;      /* <-- monte/descend le header */
  left: 44px;     /* <-- marge gauche */
  right: 44px;    /* <-- marge droite */

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  pointer-events: none; /* le conteneur ne capte pas les clics */
  z-index:4;
}

/** Left: enveloppe + compteur */
.mailbox-top-left{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top: 60px;  /* <-- remonte le bouton un peu */
  margin-left: 35px; /* <-- décale le bouton un peu à droite */

  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0);

  pointer-events: none;
}
.mailbox-mail-icon{
  font-size:18px;
}
.mailbox-mail-count{
  font-weight:1000;
  font-size:16px;
  color:#2b1a08;
}

/** Title center (sur le bouclier) */
.mailbox-top-title{
  font-weight:1000;
  font-size: 26px;
  letter-spacing: 0.6px;
  color: #f4b11a;                 /* or */
  text-shadow: 0 2px 0 rgba(0,0,0,0.55);
  transform: translateY(-36px);     /* <-- monte le titre sur le bouclier */
  margin-left: 32px;            /* <-- ajuste la position horizontale */
  pointer-events: none;
}

/** Refresh right */
.mailbox-top-refresh{
  pointer-events: auto;            /* ✅ le bouton reste cliquable */
  border:none;
  cursor:pointer;
  border-radius: 12px;

  padding: 8px 8px;
  font-weight: 1000;
  font-size: 14px;

  background: rgba(255,255,255,0.32);
  color:#2b1a08;
  display:flex;
  align-items:center;
  gap:10px;
  margin-top: 60px;  /* <-- remonte le bouton un peu */
  margin-right: 25px; /* <-- décale le bouton un peu à droite */
  
}
.mailbox-top-refresh:hover{
  background: rgba(255,255,255,0.42);
}
.mailbox-refresh-icon{
  font-size:22px;
  line-height: 1;
}

/* =========================================================
   CONTENT AREA (tabs + list)
   ========================================================= */

/** ✅ Décale le contenu pour laisser la place au header */
.mailbox-content{
  position:absolute;
  top: 180px;       /* <-- MODIF ICI : espace sous le header */
  left: 70px;
  right: 80px;
  bottom: 48px;

  display:flex;
  flex-direction:column;
  gap:10px;
}

/** Tabs */
.mailbox-tabs{
  display:flex;
  justify-content:center;
  gap:10px;
  align-items:center;
  padding: 0 12px;
}
.mailbox-tab{
  border:none;
  cursor:pointer;
  border-radius:999px;
  padding:8px 12px;
  font-weight:1000;
  background: rgba(0,0,0,0.08);
  color:#2b1a08;
}
.mailbox-tab.active{
  background: rgba(245,196,81,0.35);
  outline: 2px solid rgba(245,196,81,0.45);
}
.mailbox-tab-count{
  margin-left:6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background: rgba(0,0,0,0.14);
  font-size:12px;
  font-weight:1000;
}

/** Empty */
#mailbox-empty{
  text-align:center;
  font-weight:900;
  color: rgba(43,26,8,0.75);
  padding:14px 8px;
}
#mailbox-empty.hidden{ display:none !important; }

/** List */
#mailbox-list{
  flex:1;
  overflow:auto;
  overflow-x:hidden;
  padding:10px;
  margin: 0 8px;
  border-radius:16px;

  background: rgba(0, 0, 0, 0);
  border: 1px solid rgba(0, 0, 0, 0);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0);

  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}

/** Scrollbar (webkits) */
#mailbox-list::-webkit-scrollbar{ width: 6px; height: 6px; }
#mailbox-list::-webkit-scrollbar-track{ background: transparent; }
#mailbox-list::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.16);
  border-radius: 999px;
}
#mailbox-list:hover::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.26);
}

/** Mail item */
.mail-item{
  max-width: 96%;
  margin: 0 auto 10px auto;

  display:grid;
  grid-template-columns: 40px 1fr auto;
  grid-template-areas:
    "icon top actions"
    "icon body actions"
    "icon rewards actions";
  gap: 6px 12px;

  padding:12px;
  border-radius:14px;

  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(0,0,0,0.10);
  cursor:pointer;
}
.mail-item:hover{ background: rgba(255,255,255,0.96); }

.mail-item::before{
  content:"✉️";
  grid-area: icon;
  font-size:20px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:2px;
}

/** Top row */
.mail-top{
  grid-area: top;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.mail-title{
  font-weight:1000;
  color:#2b1a08;
  font-size:14px;
  overflow-wrap:anywhere;
}
.mail-date{
  font-size:12px;
  font-weight:900;
  opacity:0.65;
  color:#2b1a08;
  white-space:nowrap;
}

/** Body clamp */
.mail-body{
  grid-area: body;
  font-size: 13px;
  font-weight: 700;
  color: #2b1a08;
  opacity: 0.92;
  white-space: pre-wrap;

  line-height: 1.3em;
  max-height: 3.9em;  /* ~ 3 lines */
  overflow: hidden;

  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Mailbox rewards as real images */
.mail-rewards{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.mail-reward-item{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 999px;
  padding: 4px 8px;
}

.mail-reward-icon{
  width: 18px;   /* même vibe que tes labels leaderboard */
  height: 18px;
  object-fit: contain;
  display: block;
}

.mail-reward-qty{
  font-weight: 1000;
  font-size: 12px;
  color: #2b1a08;
  line-height: 1;
}


/** Actions */
.mail-actions{
  grid-area: actions;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-end;
  justify-content:flex-start;
  min-width:84px;
}
.mail-btn{
  border:none;
  cursor:pointer;
  border-radius:10px;
  padding:7px 9px;
  font-weight:1000;
  width:84px;
  font-size:12px;
  background: rgba(0,0,0,0.10);
  color:#2b1a08;
}
.mail-btn:hover{ background: rgba(0,0,0,0.16); }
.mail-btn-claim{
  background: rgba(40,160,90,0.20);
  color:#114225;
}
.mail-btn-delete{
  background: rgba(216,30,30,0.10);
  color:#5a0e0e;
}

/** Expand */
.mail-item.expanded{
  background:#fff !important;
  border-color: rgba(0,0,0,0.14);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
.mail-item.expanded .mail-body{
  max-height:none;
  overflow:visible;
}

/* Mailbox badge on bottom Profile button */


/* Profile : wrapper + badge mailbox (same logic as chests) */
.profile-button-wrapper{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 10px;
}

/* Badge mailbox : calé comme chest-count-badge */
.mail-count-badge{
  position: absolute;
  bottom: -20px;
  right: 15px;

  min-width: 18px;
  padding: 0 4px;
  border-radius: 999px;

  background: #db2020d5;
  color: #f9fafb;
  font-size: 0.65rem;
  font-weight: 700;
  border: 1px solid #fbbf24;
  text-align: center;
}

.mail-count-badge.hidden{ display:none !important; }


/**************************************
 * MAILBOX - Rewards (icons + spacing)
 * Cible: <div class="mail-rewards"> + <span class="mb-reward-item">
 *
 * Où modifier :
 *  - taille icône : --mbRewardIcon
 *  - taille texte : --mbRewardFont
 *  - espaces : --mbRewardGap / --mbRewardItemGap
 **************************************/
.mail-rewards{
  /* ✅ réglages rapides */
  --mbRewardIcon: 18px;      /* 👈 taille des icônes */
  --mbRewardFont: 13px;      /* 👈 taille du texte */
  --mbRewardGap: 10px;       /* 👈 espace entre items */
  --mbRewardItemGap: 6px;    /* 👈 espace icône -> texte */

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mbRewardGap);

  margin-top: 6px;
  padding-top: 2px;

  font-size: var(--mbRewardFont);
  font-weight: 900;
  line-height: 1.15;
}

/* Un item reward = icône + texte */
.mb-reward-item{
  display: inline-flex;
  align-items: center;
  gap: var(--mbRewardItemGap);

  padding: 2px 6px;         /* petit “chip” */
  border-radius: 10px;
  background: rgba(0,0,0,0.04); /* discret */
  white-space: nowrap;
}

/* Icônes */
.mb-reward-item img{
  width: var(--mbRewardIcon);
  height: var(--mbRewardIcon);
  object-fit: contain;

  /* ✅ aide à l’alignement vertical */
  display: block;
}

/* option: si tu veux que le texte soit un poil plus “compact” */
.mb-reward-item{
  letter-spacing: 0.1px;
}

/* Mobile: un peu plus petit pour pas casser la carte */
@media (max-width: 520px){
  .mail-rewards{
    --mbRewardIcon: 16px;
    --mbRewardFont: 12px;
    --mbRewardGap: 8px;
    --mbRewardItemGap: 5px;
  }
  .mb-reward-item{
    padding: 2px 5px;
  }
}


/* =======================
   SHOP POPUP (popuplong)
======================= */
.shop-popup{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.shop-popup.visible{ display:flex; }

.shop-popup-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.65);
}

.shop-popup-card{
  position:relative;
  z-index:1;

  width: min(560px, 92vw);
  height: min(860px, 90vh);

  background: url("../assets/img/popuplong.png") center / 100% 100% no-repeat;
  padding: 86px 34px 100px 34px;
  box-sizing: border-box;

  display:flex;
  flex-direction: column;
  align-items:center;
}

.shop-popup-header{
  font-size: 36px;
  font-weight: 1000;
  margin-top: -30px;
  margin-bottom: 65px;
  color: #f4b11a;
  text-shadow: 0 2px 0 rgba(0,0,0,0.55);
}

.shop-toggle{
  display:flex;
  gap:10px;
  margin-bottom: 14px;
}

.shop-tab{
  border: 2px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.70);
  border-radius: 12px;
  padding: 8px 12px;
  font-weight: 1000;
  cursor: pointer;
}
.shop-tab.active{
  background: rgba(255,255,255,.95);
  border-color: rgba(0,0,0,.40);
}

.shop-popup-body{
  width: 400px;
  flex: 1;
  overflow: auto;
  padding: 8px 10px;
}

.shop-panel{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.shop-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 6px;
  border-radius: 10px;
  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(0,0,0,0.10);
}

.shop-item-left{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width: 0;
}

.shop-item-title{
  font-weight: 1000;
  font-size: 14px;
  color:#2b1a08;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-item-sub{
  font-size: 10px;
  font-weight: 800;
  opacity: .72;
  color:#2b1a08;
 
}

.shop-buy{
  border:none;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 1000;
  cursor:pointer;
  background: #fbbf24;
  color:#2b1a08;
}
.shop-buy:hover{ background: rgba(0,0,0,0.16); }
.shop-buy[disabled]{ opacity: .55; cursor:not-allowed; }

.shop-note{
  margin-top: 12px;
  text-align:center;
  font-size: 12px;
  opacity: .75;
}

.popup-close-btn{
  position:absolute;
  top: 30px;
  right: -22px;
  width:64px;
  height:64px;
  border:none;
  background:transparent;
  cursor:pointer;
}
/* ===== SHOP TX BOX ===== */
.shop-txbox{
  width: 100%;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.12);
}

.shop-txbox.hidden{ display:none; }

.shop-txline{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0;
}

.shop-txstatus{
  font-weight: 1000;
  color: #2b1a08;
}

.shop-txhashrow{
  justify-content: flex-start;
}

.shop-txhash{
  font-size: 12px;
  font-weight: 900;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(0,0,0,0.06);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

.shop-txcopy{
  border: none;
  border-radius: 10px;
  padding: 7px 10px;
  font-weight: 1000;
  cursor: pointer;
  background: rgba(0,0,0,0.10);
}
.shop-txcopy:hover{ background: rgba(0,0,0,0.16); }

.shop-txexplorer{
  font-size: 12px;
  font-weight: 900;
  opacity: .85;
}

/* =======================
   BOD NOTIFY (popupsmall)
======================= */
.bod-notify-overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items:center;
  justify-content:center;
  z-index: 10050; /* au-dessus du shop */
}
.bod-notify-overlay.visible{ display:flex; }

.bod-notify-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.55);
}

.bod-notify-card{
  position: relative;
  z-index: 1;

  width: min(420px, 92vw);
  height: min(420px, 40vh);

  background: url("../assets/img/popupsmall.png") center / 100% 100% no-repeat;
  padding: 44px 60px 80px 60px;
  box-sizing: border-box;

  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.bod-notify-close{
  position:absolute;
  top: 20px;
  right: -20px;
  width: 64px;
  height: 64px;
  border: none;
  background: transparent;
  cursor:pointer;
}
.bod-notify-close img{ width:100%; height:100%; }

.bod-notify-title{
  font-size: 24px;
  font-weight: 1000;
  color: #f4b11a;
  text-shadow: 0 2px 0 rgba(0,0,0,0.55);
  margin-top: -5px;
}

.bod-notify-text{
  margin-top: 100px;
  font-size: 13px;
  font-weight: 900;
  color: #2b1a08;
  line-height: 1.25em;

  /* ✅ évite les dépassements */
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.bod-notify-actions{
  margin-top: auto;
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:center;
}

.bod-notify-ok,
.bod-notify-copy{
  border:none;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 1000;
  cursor:pointer;
  background: #fbbf24;
  color:#2b1a08;
}
.bod-notify-ok:hover,
.bod-notify-copy:hover{
  background: rgba(0,0,0,0.18);
}
.bod-notify-link{
  margin-top: 10px;
  font-size: 12px;
  font-weight: 1000;
  color: #1d4ed8;
  text-decoration: underline;
}




/* =========================================================================
                  
                7) RESPONSIVE MOBILE

   ======================================================================== */

@media (max-width: 480px) {
  .wallet-section {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }

  .wallet-actions {
    flex-wrap: wrap;
    justify-content: center;
  }

  .wallet-btn {
    flex: 1 1 45%;
    text-align: center;
  }

  .arena {
    padding: 10px;
  }

    /* Dés plus petits sur mobile */
  .dice-display {
    width: 50px;   /* 👉 taille mobile */
    height: 50px;
  }


 .mode-tab {
    width: 130px;  /* un peu plus petit sur mobile */
    height: 40px;
    font-size: 0.75rem;
  }
  /* Conteneur des icônes */
.bottom-icon,
.roll-dice-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Taille par défaut des icônes carrées (Cards / Boost / Profil / Coffre) */
.bottom-icon-img,
.bottom-chest-icon {
  width: 40px;   /* 👈 TAILLE PC */
  height: 40px;
  object-fit: contain;
}

/* Icône du dé au centre (Roll) */
.roll-icon-img {
  width: 40px;   /* 👈 TAILLE PC */
  height: 40px;
  object-fit: contain;
}

/* Exemples de tailles différentes par bouton (optionnel) */
#btn-boost-cards .bottom-icon-img {
  width: 44px;
  height: 44px;
}

#btn-active-boost .bottom-icon-img {
  width: 36px;
  height: 36px;
}

.chest-count-badge {
  position: absolute;
  bottom: -10px;
  right: 4px;
  min-width: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #111827;
  color: #f9fafb;
  font-size: 0.5rem;
  font-weight: 700;
  border: 1px solid #fbbf24;
  text-align: center;
}

/* Plateau de jeu */
.arena {
  position: relative;

  /* image de plateau */
  background: url("../assets/img/tablegameplay.png") center no-repeat;
  background-size: 100% 100%;

  border-radius: 24px;

  /* taille du plateau */
  width: 100%;
  max-width: 360px;
  height: 200px;           /* 👈 hauteur du board (ajuste si besoin) */

  margin: 0 auto;
  padding: 30px 40px;      /* 👈 décale le texte plus haut / plus bas */

  display: grid;
  grid-template-rows: auto auto auto;  /* Bot / ligne / Player */
  gap: -0px;
}

/* Bloc Bot & Player : plus de fond jaune, on laisse voir la table */
.arena-side {
  background: transparent;
  border-radius: 18px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Ligne BOT / PLAYER / HP */
.arena-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fef9c3;                     /* doré clair */
  text-shadow: 0 1px 0 #000000;       /* petit relief */
}

.side-title {
  letter-spacing: 0.06em;
}

.side-subtitle {
  font-size: 0.7rem;
  margin-top: -77px;
  margin-left: -25px;
  align-items: center;
  color: #facc15;                     /* Lvl 1 / Rolls */
}

.side-hp {
  color: #facc15;                     /* HP: 50 orange */
  font-size: 1.2rem;
  margin-top: -70px;
  font-weight: 800;
  display: inline-flex;
  margin-right: -40px;

}

/* icône de cœur HP */
.hp-heart-icon {
  margin-top: 6px;
  width: 18px;       /* ajuste la taille ici */
  height: 18px;
  display: inline-block;
  margin-right: -4px;
}




/* Texte "Résultats Bot" / "Résultats Joueur" */
.side-result-label {
  margin-top: px;
  font-size: 0.8rem;
  color: #e5e7eb;
  text-shadow: 0 1px 0 #000000;
}

/* Séparateur entre Bot et Player :
   l'image a déjà une ligne, donc juste un peu d'espace */
.arena-divider {
  height: 40px;
  background: transparent;
}

/* Avatars dans le header de la table */

.side-title {
  display: inline-flex;
  align-items: center;
}

/* base commune */
.side-avatar {
  width: 64px;     /* taille de base */
  height: 64px;
  object-fit: contain;
  display: block;
}

/* BOT uniquement */
.arena-bot .side-avatar-bot {
  margin-left: -30px;  /* pousse plus vers la gauche */
  margin-top: -10px;    /* remonte / descend le bot */
}

/* PLAYER uniquement */
.arena-player .side-avatar-player {
  margin-left: -30px;  /* même chose, tu peux mettre une autre valeur */
  margin-top: 0px;
}
/* Conteneur du dé */
.dice-display {
  width: 50px;
  height: 50px;
  border-radius: 18px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: -65px;
}
/* Bouton Home (style "chip" bleu nuit + bord doré) */
.nav-back {
  position: absolute;
  left: 0;
  top: 25%;
  transform: translateY(-50%);
  border-radius: 999px;
  border: 2px solid var(--gold);
  background: linear-gradient(to bottom, #071c33, #020814);
  color: var(--gold);
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 0 #00000080;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* ============ OVERRIDES POPUPS (coins + responsive) ============ */

/* Reward popup uses popupsmall.png */
.reward-popup-card{
  position: relative;
  z-index: 1;
  width: min(560px, 92vw);
  aspect-ratio: 1 / 1;
  background: url("../assets/img/popupsmall.png") center/contain no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: clamp(90px, 14vw, 125px) clamp(34px, 6vw, 80px) clamp(55px, 10vw, 75px);
  text-align: center;
}

.reward-popup-title{
  position: absolute;
  top: clamp(16px, 3vw, 28px);
  left: 0;
  right: 0;
  font-weight: 900;
  font-size: clamp(20px, 4.8vw, 34px);
  color: #f5c451;
  text-shadow: 0 2px 0 rgba(0,0,0,0.55);
}

.reward-popup-content{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vw, 18px);
  margin-bottom: clamp(10px, 2vw, 16px);
}

.reward-popup-image-wrapper{
  width: clamp(62px, 14vw, 96px);
  height: clamp(62px, 14vw, 96px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.reward-popup-img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
}

.reward-popup-text{
  font-size: clamp(14px, 3.2vw, 18px);
  font-weight: 800;
  color: #b45309;
  line-height: 1.2;
}

/* Chest loot title + text layout */
.chest-loot-card{
  position: relative;
  width: 100%;
}


.chest-loot-title{
  position: absolute;
  margin-top: 20px;
  top: clamp(16px, 3vw, 28px);
  left: 0;
  right: 0;
  text-align: center;
  font-weight: 900;
  font-size: clamp(20px, 4.8vw, 34px);
  color: #f5c451;
  text-shadow: 0 2px 0 rgba(0,0,0,0.55);
}

.chest-loot-image-wrapper {
  margin-top: 40px;
  width: 50px;                   /* ✅ icône un peu grande mais pas énorme */
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chest-loot-text{
  margin-top: 10px;
  text-align: center;
  width: 80%;
  line-height: 1.22;
}

.chest-loot-text .loot-subtitle{
  font-weight: 800;
  font-size: clamp(13px, 3vw, 16px);
  opacity: 0.95;
}

.chest-loot-text .loot-coins{
  margin-top: 6px;
  font-weight: 900;
  font-size: clamp(14px, 3.2vw, 18px);
  color: #b45309;
}

.chest-loot-text .loot-extra{
  margin-top: 6px;
  font-weight: 800;
  font-size: clamp(12px, 2.8vw, 14px);
  opacity: 0.95;
}


/*Chest Skip pop up*/

.chest-skip-title{
  position: flex;
   margin-bottom: 10px;
  top: clamp(16px, 3vw, 28px);
  left: 0;
  right: 0;
  font-weight: 900;
  font-size: clamp(18px, 4.6vw, 32px);
  color: #f5c451;
  text-shadow: 0 2px 0 rgba(0,0,0,0.55);
}

.chest-skip-text{
  width: 100%;
  
  font-size: clamp(10px, 3.2vw, 18px);
  font-weight: 800;
  color: #b45309;
  line-height: 1.25;
  white-space: pre-line; /* pour afficher les \n */
  margin-bottom: clamp(20px, 2vw, 16px);
}

.chest-skip-actions{
  display: flex;
  margin-bottom:40px;
  gap: 12px;
}

.chest-skip-cancel{
  opacity: 0.9;
  filter: grayscale(0.25);
}


/* Chest-popup */
.chest-popup-card {
  position: relative;
  z-index: 1;
  width: 600px;
  max-width: 110%;
  aspect-ratio: 4 / 3;
  background: url("../assets/img/popuplarge.png") center / contain no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 80px 20px;
}

/* rangée des 3 coffres */
.chest-popup-inner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 0px;
}

.chest-slot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transform: translateY(4px);
  transition: transform 0.1s ease, filter 0.1s ease;
}

.chest-img {
  width: 60px;
  max-width: 100%;
}

/* zone texte + boutons en bas */
.chest-popup-footer {
  width: 100%;
  text-align: center;
  margin-top: 10px;
}

/* Bouton de fermeture générique pour toutes les popups */
.popup-close-btn {
  position: absolute;
  top: 7px;
  right: -8px;
  width: 70px;
  height: 70px;
  border: none;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

/* Haut de la popup : avatar + nom + wallet + bouton rename */
.profile-header {
  width: 80%;
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 60px;
  margin-bottom: 8px;
}

.profile-avatar-circle {
  width: 80px;
  height: 80px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-left: -8px; /* petit décalage pour coller au cadre */
}

.profile-nickname {
  font-size: 1.25rem;
  font-weight: 800;
  color: #111827;
  margin-left: 15px;
}

.profile-wallet {
  font-size: 0.8rem;
  color: #4b5563;
  margin-left: 15px;
}

.profile-rename-btn {
  margin-top: 6px;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  border: none;
  background: #10b981;
  color: #f9fafb;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  margin-left: 7px;
}

/* POP UP CARDS */

/* Mobile: colonnes un peu plus proches + titre un peu plus haut */
  #cards-popup .cards-popup-card{
    width: min(480px, 92vw);
    height: min(520px, 88vh);
    padding: 85px 45px 88px;
  }

  #cards-popup .cards-popup-header{
    top: 32px;
  }

  #cards-popup .cards-popup-body{
    gap: 16px;
    padding: 2px 2px 0;
  }
  /* Close button ONLY for Cards popup */
#cards-popup .popup-close-btn{
  position: absolute;
  top: 10px;
  right: -15px;
  width: 56px;
  height: 56px;
  z-index: 5;
}
/* Texte sous l’icône (base damage/HP) */
#cards-popup .card-mini div{
  font-size: 0.75rem; /* ⬅️ augmente = texte plus gros */
  font-weight: 600;
}

/* Pop up Boost */

#active-boost-popup .cards-popup-card{
    width: min(480px, 92vw);
    height: min(500px, 86vh);
    padding: -80px 22px 75px;
  }

  #active-boost-popup .cards-popup-header{
    top: 125px;
    font-size: 0.95rem;
  }

  #active-boost-popup .active-boost-body{
    gap: 16px;
  }

  #active-boost-popup .popup-close-btn{
    top: 110px;
    right: -20px;
    width: 60px;
    height: 60px;
  }

  /* ✅ TITRES COLONNES Attack / HP */
#active-boost-popup .cards-section-title{
  font-size: 0.7rem;     /* taille */
  font-weight: 900;
  color: #111827;         /* couleur */
  margin-top: 15px;
  margin-bottom: 20px;    /* espace sous le titre */
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Taille des cartes (slots) dans la popup Boost */
#active-boost-popup .active-boost-slot{
  width: 190px;   /* ⬅️ augmente = carte plus large */
}

/* Taille du “cadre” card-mini (le bloc) */
#active-boost-popup .card-mini{
  width: 75px;   /* ⬅️ augmente = carte plus grosse */
  padding: 5px;
}

/* Taille de l’icône (épée/coeur) */
#active-boost-popup .card-mini img{
  width: 50px;    /* ⬅️ augmente = icône plus grosse */
  height: 50px;
}

/* Texte sous l’icône (base damage/HP) */
#active-boost-popup .card-mini div{
  font-size: 0.5rem; /* ⬅️ augmente = texte plus gros */
  font-weight: 600;
}

/* --- Potions UI (minimal) --- */
.boost-potions-row{
  display:flex;
  gap:18px;
  justify-content:center;
  margin-top: 10px;
}

.boost-potion-item{
  position:relative;
  width: 10px;
  height: 10px;
}

.boost-potion-icon{
  width: 10px;
  height: 10px;
  object-fit: contain;
}

.player-potions{
  display:flex;
  gap:6px;
  margin-top: -50px;
  justify-content: flex-end;
  width: 130%;
}

.player-potion{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 6px;
}

.potion-use-icon{
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.potion-use-btn{
  padding: 1px 8px;
  border-radius: 8px;
  border: 2px solid #fbbf24;
  background: #0b1220;
  color: #fbbf24;
  font-weight: 800s;
  cursor: pointer;
  font-size: 0.6rem;
}

.potion-use-btn:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

.potion-count-badge{
  position:absolute;
  top: 16px;
  right: 2px;
  min-width: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background:#111827;
  color:#f9fafb;
  font-size: 0.5rem;
  font-weight: 400;
  border: 1px solid #fbbf24;
  text-align:center;
}

/* Potions Boost popup */
#active-boost-popup .boost-potions-row{
  position: absolute;
  left: 0;
  right: 0;

  /* ajuste la hauteur : plus petit = plus bas */
  bottom: 180px;

  display: flex;
  justify-content: center;
  gap: 0px;
  margin: 0;
  padding: 0;
}
/* Déplacer uniquement la 2e potion (heal) */
#active-boost-popup .boost-potions-row {
  margin-left: -110px; /* mets -8, -12, -16 ... */
}
/* Déplacer uniquement la 2e potion (heal) */
#active-boost-popup .boost-potion-item {
  margin-left: 90px; /* mets -8, -12, -16 ... */
}
/* un peu plus gros + joli */
#active-boost-popup .boost-potion-item{
  width: 20px;
  height: 20px;
}

#active-boost-popup .boost-potion-icon{
  width: 40px;
  height: 40px;
}

#active-boost-popup .potion-count-badge{
  top: 0px;
  right: -22px;
}

/* Popup Pay Roll +10 */

.paid-roll-title{
  position: absolute;
  top: clamp(40px, 6vw, 28px);
  left: 0; right: 0;
  font-weight: 800;
  font-size: clamp(6px, 4.6vw, 15px);
  color: #f5c451;
  text-shadow: 0 2px 0 rgba(0,0,0,0.55);
}

.paid-roll-text{
  width: 100%;
  font-size: clamp(16px, 3.2vw, 18px);
  font-weight: 800;
  color: #b45309;
  line-height: 1.25;
  white-space: pre-line;
  margin-bottom: 25px;
}

.paid-roll-check{
  display: flex;
  align-items: center;
  gap: 0px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 20px;
  user-select: none;
}

.paid-roll-actions{
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.bot-level-selector::after {
  content: "▾";
  position: absolute;
  right: 120px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 0.7rem;
  color: var(--gold);
}

/* ==========================================
 popup card style (same vibe as game popups) 
 ============================================*/
.wl-screen-card{
  position: absolute;
  left: 50%;
  top: 52%;
  max-width: 200%;
  aspect-ratio: 4 / 3;
  transform: translate(-50%, -50%);
  z-index: 100000;

  width: min(300px, 92vw);
  padding: 90px 70px 55px;
  text-align: center;

/* Whitelist lock mobile adjustments */
.wl-close{
  position: absolute;
  top: 0px;
  right: -15px;
  width: 68px;
  height: 68px;
  border: none;
  background: transparent;
  cursor: pointer;
}
.wl-close img{ width:100%; height:100%; object-fit:contain; }

.wl-title{
  font-size: 1.2rem;
  font-weight: 900;
  color: #facc15;
  text-shadow: 0 2px 0 rgba(0,0,0,0.65);
  -webkit-text-stroke: #000000 0.7px;
  margin-bottom: 40px;
  margin-top: -60px;
}

.wl-text{
  font-size: 1rem;
  font-weight: 900;
  color: #facc15;
  line-height: 1.25rem;
  text-shadow: 0 2px 0 rgba(0,0,0,0.55);
  -webkit-text-stroke: #000000 0.25px;
  margin-bottom: 10px;
}

.wl-cta{
  margin-top: 5px;
  display: inline-block;
  border-radius: 999px;
  padding: 7px 17px;
  font-size: 0.8rem;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(to bottom, #f8d477, #f5b34c);
  color: #2a1a08;
  box-shadow: 0 4px 0 #b37b26;
}

.wl-footnote{
  margin-top: 7px;
  font-size: 0.4rem;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.9);
}

}

/* =========================
   MOBILE: HEADER COMPACT + MAQUETTE
   ========================= */


  /* évite que tout soit “géant” en haut */
  .play-card{
    margin-top: -25px;
  }

  .play-top-nav{
    margin-bottom: -10px;
  }

  /* bouton HOME */
  .nav-back{
    top: 25% !important;
    padding: 5px 12px;
    font-size: 0.6rem;
  }
  /* logo titre */
  .play-title-logo{
    height: clamp(100px, 22vw, 120px) !important;
    max-width: 100%;
    margin-bottom: 15px;
    margin-top: 20px;
  }

  /* ✅ MAQUETTE: wallet à gauche, coins à droite, boutons dessous */
  .wallet-section{
    margin-bottom: 15px;
    padding: 8px 10px;
    gap: 8px;

    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "player gems"
      "actions actions";
    align-items: center;
  }

  /* Le wrapper devient "transparent" en mobile pour placer actions + gems où on veut */
  .wallet-right{
    display: contents;
  }

  /* Ligne 1 gauche : avatar + nom */
  .player-block{
    grid-area: player;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }

  .player-avatar{
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }

  .player-name{
    font-size: 0.75rem;
    max-width: 140px;
    text-align: left;
  }

  /* Ligne 1 droite : coins */
  .gems-banner{
    grid-area: gems;
    justify-self: end;

    margin-top: 0;              /* ✅ plus de “ligne à part” */
    flex: unset;                 /* ✅ annule ton ancien flex 0 0 100% */
    justify-content: center;     /* garde ton style */
    font-size: 0.72rem;
    padding: 5px 10px;
    white-space: nowrap;
  }

  /* Ligne 2 : boutons en 2x2 */
  .wallet-actions{
    grid-area: actions;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* ✅ on garde tes réglages (padding, font-size), juste “fit” en grid */
  .wallet-btn{
    width: 100%;
    min-width: 0;
    padding: 4px 10px;
    font-size: 0.65rem;
  }

  .wallet-icon{
    font-size: 0.85rem;
  }

  /* Admin en pleine largeur si affiché */
  #btn-admin-panel{
    grid-column: 1 / -1;
  }

  /**************************************
 * MAILBOX V1 (UI PRO) - popuplong.png
 * Fichier: play.css + pvp.css
 *
 * Où modifier :
 *  - Taille popup : .mailbox-popup-card (width / height)
 *  - Position header : .mailbox-topbar (top / left / right)
 *  - Position contenu : .mailbox-content (top margin)
 *  - Hauteur liste : #mailbox-list (max-height)
 **************************************/

/** Overlay */
#mailbox-overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
#mailbox-overlay.visible{ display:flex; }

#mailbox-overlay-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.60);
}

/** Card */
.mailbox-popup-card{
  position:relative;
  z-index:1;

  /** ✅ Taille popup (MODIF ICI) */
  width: min(560px, 92vw);
  height: min(860px, 90vh);

  background: url("../assets/img/popuplong.png") center / 100% 100% no-repeat;

  /** ✅ Padding général (MODIF ICI) */
  padding: 86px 34px 48px 34px;

  box-sizing:border-box;
}

/** Close */
#mailbox-close-btn{
  position:absolute;
  top: 10px;
  right: -27px;
  width:64px;
  height:64px;
  border:none;
  background:transparent;
  cursor:pointer;
  z-index:5;
}
#mailbox-close-btn img{ width:100%; height:100%; }

/* =========================================================
   TOP HEADER (comme ton exemple)
   -> placé en ABSOLUTE pour coller au cadre / bouclier
   ========================================================= */

/** ✅ Position header (MODIF ICI si besoin) */
.mailbox-topbar{
  position:absolute;
  top: 45px;      /* <-- monte/descend le header */
  left: 10px;     /* <-- marge gauche */
  right: 44px;    /* <-- marge droite */

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  pointer-events: none; /* le conteneur ne capte pas les clics */
  z-index:4;
}

/** Left: enveloppe + compteur */
.mailbox-top-left{
  display:flex;
  align-items:center;
  gap:20px;
  margin-top: 45px;  /* <-- remonte le bouton un peu */
  margin-left: 35px; /* <-- décale le bouton un peu à droite */

  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0);

  pointer-events: none;
}
.mailbox-mail-icon{
  font-size:18px;
}
.mailbox-mail-count{
  font-weight:1000;
  font-size:16px;
  color:#2b1a08;
}

/** Title center (sur le bouclier) */
.mailbox-top-title{
  font-weight:1000;
  font-size: 22px;
  letter-spacing: 0.6px;
  color: #f4b11a;                 /* or */
  text-shadow: 0 2px 0 rgba(0,0,0,0.55);
  transform: translateY(-37px);     /* <-- monte le titre sur le bouclier */
  margin-left: -5px;            /* <-- ajuste la position horizontale */
  pointer-events: none;
}

/** Refresh right */
.mailbox-top-refresh{
  pointer-events: auto;            /* ✅ le bouton reste cliquable */
  border:none;
  cursor:pointer;
  border-radius: 8px;

  padding: 8px 8px;
  font-weight: 1000;
  font-size: 12px;

  background: rgba(255,255,255,0.32);
  color:#2b1a08;
  display:flex;
  align-items:center;
  gap:4px;
  margin-top: 45px;  /* <-- remonte le bouton un peu */
  margin-right: 25px; /* <-- décale le bouton un peu à droite */
  
}
.mailbox-top-refresh:hover{
  background: rgba(255,255,255,0.42);
}
.mailbox-refresh-icon{
  font-size:14px;
  line-height: 1;
}

/* =========================================================
   CONTENT AREA (tabs + list)
   ========================================================= */

/** ✅ Décale le contenu pour laisser la place au header */
.mailbox-content{
  position:absolute;
  top: 150px;       /* <-- MODIF ICI : espace sous le header */
  left: 30px;
  right: 30px;
  bottom: 20px;

  display:flex;
  flex-direction:column;
  gap:10px;
}

/** Tabs */
.mailbox-tabs{
  display:flex;
  justify-content:center;
  gap:8px;
  align-items:center;
  padding: 0 12px;
}
.mailbox-tab{
  border:none;
  cursor:pointer;
  border-radius:999px;
  padding:4px 4px;
  font-weight:1000;
  background: rgba(0,0,0,0.08);
  color:#2b1a08;
}
.mailbox-tab.active{
  background: rgba(245,196,81,0.35);
  outline: 2px solid rgba(245,196,81,0.45);
}
.mailbox-tab-count{
  margin-left:6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background: rgba(0,0,0,0.14);
  font-size:12px;
  font-weight:1000;
}

/** Empty */
#mailbox-empty{
  text-align:center;
  font-weight:900;
  color: rgba(43,26,8,0.75);
  padding:14px 8px;
}
#mailbox-empty.hidden{ display:none !important; }

/** List */
#mailbox-list{
  flex:1;
  overflow:auto;
  overflow-x:hidden;
  padding:10px;
  margin: 0 8px;
  border-radius:16px;

  background: rgba(0, 0, 0, 0);
  border: 1px solid rgba(0, 0, 0, 0);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0);

  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}

/** Scrollbar (webkits) */
#mailbox-list::-webkit-scrollbar{ width: 6px; height: 6px; }
#mailbox-list::-webkit-scrollbar-track{ background: transparent; }
#mailbox-list::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.16);
  border-radius: 999px;
}
#mailbox-list:hover::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.26);
}

/** Mail item */
.mail-item{
  max-width: 80%;
  
  margin: 0 auto 10px auto;

  display:grid;
  grid-template-columns: 40px 1fr auto;
  grid-template-areas:
    "icon top actions"
    "icon body actions"
    "icon rewards actions";
  gap: 6px 12px;

  padding:12px;
  border-radius:14px;

  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(0,0,0,0.10);
  cursor:pointer;
}
.mail-item:hover{ background: rgba(255,255,255,0.96); }

.mail-item::before{
  content:"✉️";
  grid-area: icon;
  font-size:20px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:2px;
}

/** Top row */
.mail-top{
  grid-area: top;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.mail-title{
  font-weight:1000;
  color:#2b1a08;
  font-size:14px;
  overflow-wrap:anywhere;
}
.mail-date{
  font-size:12px;
  font-weight:900;
  opacity:0.65;
  color:#2b1a08;
  white-space:nowrap;
}

/** Body clamp */
.mail-body{
  grid-area: body;
  font-size: 13px;
  font-weight: 700;
  color: #2b1a08;
  opacity: 0.92;
  white-space: pre-wrap;

  line-height: 1.3em;
  max-height: 3.9em;  /* ~ 3 lines */
  overflow: hidden;

  word-break: break-word;
  overflow-wrap: anywhere;
}

/** Rewards */
.mail-rewards{
  grid-area: rewards;
  font-size:12.5px;
  font-weight:1000;
  color:#2b1a08;
  opacity:0.92;
}

/** Actions */
.mail-actions{
  grid-area: actions;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-end;
  justify-content:flex-start;
  min-width:84px;
}
.mail-btn{
  border:none;
  cursor:pointer;
  border-radius:10px;
  padding:7px 9px;
  font-weight:1000;
  width:84px;
  font-size:12px;
  background: rgba(0,0,0,0.10);
  color:#2b1a08;
}
.mail-btn:hover{ background: rgba(0,0,0,0.16); }
.mail-btn-claim{
  background: rgba(40,160,90,0.20);
  color:#114225;
}
.mail-btn-delete{
  background: rgba(216,30,30,0.10);
  color:#5a0e0e;
}

/** Expand */
.mail-item.expanded{
  background:#fff !important;
  border-color: rgba(0,0,0,0.14);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
.mail-item.expanded .mail-body{
  max-height:none;
  overflow:visible;
}


/* Mailbox badge on bottom Profile button */


/* Profile : wrapper + badge mailbox (same logic as chests) */
.profile-button-wrapper{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 10px;
}

/* Badge mailbox : calé comme chest-count-badge */
.mail-count-badge{
  position: absolute;
  bottom: -20px;
  right: 15px;

  min-width: 18px;
  padding: 0 4px;
  border-radius: 999px;

  background: #db2020d5;
  color: #f9fafb;
  font-size: 0.65rem;
  font-weight: 700;
  border: 1px solid #fbbf24;
  text-align: center;
}

.mail-count-badge.hidden{ display:none !important; }

/**************************************
 * MAILBOX - Rewards (icons + spacing)
 * Cible: <div class="mail-rewards"> + <span class="mb-reward-item">
 *
 * Où modifier :
 *  - taille icône : --mbRewardIcon
 *  - taille texte : --mbRewardFont
 *  - espaces : --mbRewardGap / --mbRewardItemGap
 **************************************/
.mail-rewards{
  /* ✅ réglages rapides */
  --mbRewardIcon: 11px;      /* 👈 taille des icônes */
  --mbRewardFont: 11px;      /* 👈 taille du texte */
  --mbRewardGap: 2px;       /* 👈 espace entre items */
  --mbRewardItemGap: 0px;    /* 👈 espace icône -> texte */

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mbRewardGap);

  margin-top: 6px;
  padding-top: 2px;

  font-size: var(--mbRewardFont);
  font-weight: 900;
  line-height: 1.15;
}

/* Un item reward = icône + texte */
.mb-reward-item{
  display: inline-flex;
  align-items: center;
  gap: var(--mbRewardItemGap);

  padding: 2px 6px;         /* petit “chip” */
  border-radius: 10px;
  background: rgba(0,0,0,0.04); /* discret */
  white-space: nowrap;
}

/* Icônes */
.mb-reward-item img{
  width: var(--mbRewardIcon);
  height: var(--mbRewardIcon);
  object-fit: contain;

  /* ✅ aide à l’alignement vertical */
  display: block;
}

/* option: si tu veux que le texte soit un poil plus “compact” */
.mb-reward-item{
  letter-spacing: 0.1px;
}


/* =======================
   MAILBOX mobile layout
======================= */


  /* la popup respire mieux */
  .mailbox-popup-card{
    width: min(520px, 94vw);
    height: min(860px, 92vh);
    padding: 40px 22px 44px 22px;
  }

  /* contenu un peu plus large */
  .mailbox-content{
    left: 30px;
    right: 35px;
    top: 150px;
    bottom: 18px;
  }

  #mailbox-list{
    padding: 8px;
    margin: 0 4px;
  }

  /* ✅ la carte prend 100% de la largeur -> plus de colonne trop étroite */
  .mail-item{
    max-width: 100%;
    width: 100%;
    
    margin: 0 0 10px 0;

    /* ✅ layout 2 colonnes + actions en bas */
    grid-template-columns: 32px 1fr;
    grid-template-areas:
      "icon top"
      "icon body"
      "icon rewards"
      "actions actions";

    gap: 6px 10px;
    padding: 10px;
  }

  .mail-item::before{
    font-size: 18px;
  }

  /* ✅ top : date sous le titre */
  .mail-top{
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .mail-date{
    white-space: normal; /* au lieu de nowrap */
    font-size: 11px;
    opacity: .65;
  }

  /* ✅ boutons en bas, en ligne */
  .mail-actions{
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
  }
  .mail-btn{
    width: auto;
    padding: 6px 8px;
    font-size: 11px;
  }




  



/* =======================
   SHOP POPUP (popuplong)
======================= */
.shop-popup{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.shop-popup.visible{ display:flex; }

.shop-popup-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.65);
}

.shop-popup-card{
  position:relative;
  z-index:1;

  width: min(560px, 92vw);
  height: min(860px, 90vh);

  background: url("../assets/img/popuplong.png") center / 100% 100% no-repeat;
  padding: 60px 34px 100px 34px;
  box-sizing: border-box;

  display:flex;
  flex-direction: column;
  align-items:center;
}

.shop-popup-header{
  font-size: 28px;
  font-weight: 1000;
  margin-top: -25px;
  margin-bottom: 50px;
  color: #f4b11a;
  text-shadow: 0 2px 0 rgba(0,0,0,0.55);
}

.shop-toggle{
  display:flex;
  gap:10px;
  margin-bottom: 14px;
}

.shop-tab{
  border: 2px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.70);
  border-radius: 12px;
  padding: 8px 12px;
  font-weight: 1000;
  cursor: pointer;
}
.shop-tab.active{
  background: rgba(255,255,255,.95);
  border-color: rgba(0,0,0,.40);
}

.shop-popup-body{
  width: 275px;
  flex: 1;
  overflow: auto;
  padding: 8px 10px;
}

.shop-panel{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.shop-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding: 6px;
  border-radius: 8px;
  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(0,0,0,0.10);
}

.shop-item-left{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width: 0;
}

.shop-item-title{
  font-weight: 1000;
  font-size: 12px;
  color:#2b1a08;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-item-sub{
  font-size: 10px;
  font-weight: 800;
  opacity: .72;
  color:#2b1a08;
 
}

.shop-buy{
  border:none;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 10px;
  font-weight: 1000;
  cursor:pointer;
  background: #fbbf24;
  color:#2b1a08;
}
.shop-buy:hover{ background: rgba(0,0,0,0.16); }
.shop-buy[disabled]{ opacity: .55; cursor:not-allowed; }

.shop-note{
  margin-top: 12px;
  text-align:center;
  font-size: 12px;
  opacity: .75;
  color: #000000;
}

.popup-close-btn{
  position:absolute;
  top: 15px;
  right: -26px;
  width:64px;
  height:64px;
  border:none;
  background:transparent;
  cursor:pointer;
}
/* ===== SHOP TX BOX ===== */
.shop-txbox{
  width: 100%;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.12);
}

.shop-txbox.hidden{ display:none; }

.shop-txline{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0;
}

.shop-txstatus{
  font-weight: 1000;
  color: #2b1a08;
}

.shop-txhashrow{
  justify-content: flex-start;
}

.shop-txhash{
  font-size: 12px;
  font-weight: 900;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(0,0,0,0.06);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

.shop-txcopy{
  border: none;
  border-radius: 10px;
  padding: 7px 10px;
  font-weight: 1000;
  cursor: pointer;
  background: rgba(0,0,0,0.10);
}
.shop-txcopy:hover{ background: rgba(0,0,0,0.16); }

.shop-txexplorer{
  font-size: 12px;
  font-weight: 900;
  opacity: .85;
}

/* =======================
   BOD NOTIFY (popupsmall)
======================= */
.bod-notify-overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items:center;
  justify-content:center;
  z-index: 10050; /* au-dessus du shop */
}
.bod-notify-overlay.visible{ display:flex; }

.bod-notify-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.55);
}

.bod-notify-card{
  position: relative;
  z-index: 1;

  width: min(420px, 92vw);
  height: min(420px, 40vh);

  background: url("../assets/img/popupsmall.png") center / 100% 100% no-repeat;
  padding: 44px 60px 80px 60px;
  box-sizing: border-box;

  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.bod-notify-close{
  position:absolute;
  top: 5px;
  right: -25px;
  width: 64px;
  height: 64px;
  border: none;
  background: transparent;
  cursor:pointer;
}
.bod-notify-close img{ width:100%; height:100%; }

.bod-notify-title{
  font-size: 20px;
  font-weight: 1000;
  color: #f4b11a;
  text-shadow: 0 2px 0 rgba(0,0,0,0.55);
  margin-top: -20px;
}

.bod-notify-text{
  margin-top: 45px;
  font-size: 13px;
  font-weight: 900;
  color: #2b1a08;
  line-height: 1.25em;

  /* ✅ évite les dépassements */
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.bod-notify-actions{
  margin-top: auto;
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:center;
}

.bod-notify-ok,
.bod-notify-copy{
  border:none;
  margin-top: 20px;
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 1000;
  cursor:pointer;
  background: #fbbf24;
  color:#2b1a08;
}
.bod-notify-ok:hover,
.bod-notify-copy:hover{
  background: rgba(0,0,0,0.18);
}
.bod-notify-link{
  margin-top: 10px;
  font-size: 12px;
  font-weight: 1000;
  color: #1d4ed8;
  text-decoration: underline;
}

/* =========================================================
   FIX DESKTOP: Reward popup skin (same as mobile)
   (copie du responsive mais appliquée à toutes tailles)
   ========================================================= */

.reward-popup {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.reward-popup.visible { display: flex; }

.reward-popup-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.70);
  z-index: 0;
}

.reward-popup-card{
  position: relative;
  z-index: 1;
  width: min(300px, 92vw);
  aspect-ratio: 3/4;
  background: url("../assets/img/popupsmall.png") center/contain no-repeat;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

  /* padding “comme mobile” pour tomber dans le parchemin */
  padding: clamp(90px, 10vw, 125px)
           clamp(50px, 5vw, 80px)
           clamp(120px, 8vw, 75px);
  text-align: center;
}

.reward-popup-title{
  position: absolute;
  top: clamp(42px, 6vw, 70px);
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(17px, 2.2vw, 22px);
  font-weight: 900;
  color: #facc15;
  text-shadow: 0 2px 0 #000000aa;
  width: 80%;
  margin-top: 40px;
}

.reward-popup-content{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vw, 18px);
  margin-bottom: clamp(20px, 2vw, 16px);
}

.reward-popup-image-wrapper{
  width: clamp(62px, 14vw, 96px);
  height: clamp(62px, 14vw, 96px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.reward-popup-img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
}

.reward-popup-text{
  font-size: clamp(14px, 2.2vw, 18px);
  font-weight: 800;
  color: #b45309;
  line-height: 1.2;
}

/* OK button toujours au-dessus */
#reward-popup-close{
  position: relative;
  z-index: 2;
}


}