/**
 * PlayAwale — Les Cauris, la monnaie du jeu
 * -----------------------------------------------------------------------------
 * Tout ce qui montre des Cauris, sauf le jeton du haut (components/
 * player-space.css, chargé partout) :
 *
 *   1. l'image du cauris, et le cinquième chiffre de l'accueil de l'espace ;
 *   2. la carte « Mes Cauris » (inc/partials/cauris.php) ;
 *   3. la bourse et la confirmation d'achat dans l'atelier de l'avatar ;
 *   4. les Cauris gagnés en fin de partie (assets/js/game/cauris-gain.js).
 *
 * LES COULEURS DU SITE : l'ambre des badges et de l'Elo, le vert des gains. Le
 * cauris est doré : il s'accorde sans rien ajouter. Voir la section 70.
 *
 * @package   PlayAwale
 * @version   2.0
 * @author    Nicolas Lion — Développeur web — https://nlion.fr
 * @copyright 2026 Nicolas Lion
 */

/* =============================================================================
   1. L'IMAGE DU CAURIS
   ========================================================================== */

.coin-icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.18em;
  object-fit: contain;
}

/* Le cinquième chiffre de l'accueil : le cauris devant le solde. */
.dash-figure__coin {
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.15em;
  vertical-align: -0.05em;
}


/* =============================================================================
   2. « MES CAURIS »
   ========================================================================== */
/*  « La présentation n'est pas jolie » (12/10/2026) : des listes de texte. La
    carte se lit maintenant d'un coup d'œil — un bandeau doré, une frise de
    sept jours, trois tuiles, une échelle des niveaux, le journal. */

.cauris-card {
  --cauris-gold: #f6d48a;
  --cauris-gold-deep: #c98d2e;
}

/* --- 1. LE BANDEAU ------------------------------------------------------- */
.cauris-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: 0 0 var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  overflow: hidden;

  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, 0.7), transparent 55%),
    linear-gradient(135deg, #ffe7b0 0%, var(--cauris-gold) 55%, #e9b85c 100%);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px rgba(201, 141, 46, 0.45), 0 6px 18px rgba(201, 141, 46, 0.25);
}

/* Un grand cauris en filigrane, à droite. */
.cauris-hero::after {
  content: "";
  position: absolute;
  right: -1.5rem;
  bottom: -2.5rem;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.35), transparent);
  pointer-events: none;
}

.cauris-hero__shell {
  width: 5.5rem;
  height: 5.5rem;
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(90, 55, 10, 0.35));
  transform: rotate(-12deg);
}

.cauris-hero__body {
  min-width: 0;
}

.cauris-hero__balance {
  margin: 0;
  line-height: 1;
}

.cauris-hero__value {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 3.4rem);
  font-variant-numeric: tabular-nums;
  color: var(--color-brand-dark);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.cauris-hero__coin {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: rgba(60, 39, 35, 0.75);
}

.cauris-hero__tagline {
  margin: var(--space-2xs) 0 0;
  font-size: var(--font-size-sm);
  color: rgba(60, 39, 35, 0.8);
}

.cauris-hero__bonus {
  display: inline-block;
  margin: var(--space-xs) 0 0;
  padding: 0.25em 0.8em;

  font-size: var(--font-size-sm);
  font-weight: 800;
  color: #fff;

  background: linear-gradient(180deg, #5fb764, var(--color-online));
  border-radius: var(--radius-full);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);

  animation: cauris-confirm-in 0.5s cubic-bezier(.2, 1.6, .4, 1) 0.3s both;
}

/* --- Les sections -------------------------------------------------------- */
.cauris-section {
  margin: 0 0 var(--space-lg);
}

.cauris-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-md);
}

.cauris-section__title {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.cauris-section__aside {
  margin: 0 0 var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.cauris-section__aside strong {
  color: var(--color-text);
}

/* --- 2. LA SÉRIE : une frise de sept jours ------------------------------- */
.cauris-days {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Le fil qui relie les jours, derrière les cauris. */
.cauris-days::before {
  content: "";
  position: absolute;
  top: 1.35rem;
  left: 7%;
  right: 7%;
  height: 3px;
  background: rgba(60, 39, 35, 0.12);
  border-radius: 2px;
}

.cauris-days__day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}

.cauris-days__shell {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;

  background: var(--color-sand-100);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(60, 39, 35, 0.1);
}

.cauris-days__shell .coin-icon {
  width: 1.5rem;
  height: 1.5rem;
  filter: grayscale(1) opacity(0.35);
}

.cauris-days__amount {
  font-size: 0.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.cauris-days__label {
  font-size: 0.68rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.cauris-days__day.is-on .cauris-days__shell {
  background: linear-gradient(180deg, #fff1cf, var(--cauris-gold));
  box-shadow: inset 0 0 0 2px var(--cauris-gold-deep);
}

.cauris-days__day.is-on .coin-icon {
  filter: none;
}

.cauris-days__day.is-on .cauris-days__amount {
  color: var(--color-text);
}

.cauris-days__day.is-today .cauris-days__shell {
  transform: scale(1.12);
  box-shadow: inset 0 0 0 2px var(--cauris-gold-deep), 0 0 0 4px rgba(246, 212, 138, 0.55);
}

.cauris-days__day.is-today .cauris-days__label {
  font-weight: 800;
  color: var(--color-text);
}

/* --- 3. COMMENT EN GAGNER : trois tuiles --------------------------------- */
.cauris-ways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cauris-ways__item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  column-gap: var(--space-sm);
  align-items: start;
  /* Les tuiles d'une rangée ont la même hauteur : le contenu reste en haut. */
  align-content: start;
  padding: var(--space-sm) var(--space-md);

  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hollow);
}

.cauris-ways__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  color: var(--cauris-gold-deep);
  background: rgba(246, 212, 138, 0.4);
  border-radius: 50%;
}

.cauris-ways__icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

.cauris-ways__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
}

.cauris-ways__text {
  font-size: var(--font-size-sm);
  line-height: 1.4;
  color: var(--color-text-muted);
}

/* Le plafond du solo, et où l'on en est aujourd'hui (13/10/2026). */
.cauris-ways__cap {
  display: block;
  /* Une troisième ligne, sous le texte, dans la colonne du texte : sans cela
     la grille de la tuile (pictogramme, titre, texte) la rangeait ailleurs. */
  grid-column: 2;
  grid-row: 3;
  margin-top: var(--space-xs);
}

.cauris-ways__gauge {
  display: block;
  width: 100%;
  height: 6px;
}

.cauris-ways__gauge-track {
  fill: rgba(60, 39, 35, 0.1);
}

.cauris-ways__gauge-fill {
  fill: var(--cauris-gold-deep);
}

.cauris-ways__cap-text {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--color-text);
}

/* --- 4 et 5, côte à côte sur grand écran --------------------------------- */
.cauris-card__columns {
  display: grid;
  /* « min(18rem, 100%) » : sous 18rem de large (un téléphone de 320 px), la
     colonne prend toute la place au lieu d'en exiger plus qu'il n'y en a. */
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: 0 var(--space-xl);
}

/* --- 4. L'ÉCHELLE DES NIVEAUX, par Elo ---------------------------------- */
.cauris-ladder {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cauris-ladder__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.2rem 5rem 2.4rem;
  align-items: center;
  gap: var(--space-xs);
  padding: 5px 0;
  font-size: var(--font-size-sm);
}

.cauris-ladder__item + .cauris-ladder__item {
  border-top: 1px solid rgba(60, 39, 35, 0.07);
}

.cauris-ladder__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cauris-ladder__elo {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--color-text-muted);
}

.cauris-ladder__bar {
  display: block;
  width: 100%;
  height: 8px;
}

.cauris-ladder__track {
  fill: rgba(60, 39, 35, 0.08);
}

.cauris-ladder__fill {
  fill: var(--cauris-gold-deep);
}

.cauris-ladder__gain {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--color-online);
}

/* --- 5. LES DERNIERS MOUVEMENTS ----------------------------------------- */
.cauris-history {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-sm);
}

.cauris-history__item {
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xs);
  padding: 5px 0;
}

.cauris-history__item + .cauris-history__item {
  border-top: 1px solid rgba(60, 39, 35, 0.07);
}

.cauris-history__icon {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  color: var(--color-text-muted);
  background: rgba(60, 39, 35, 0.06);
  border-radius: 50%;
}

.cauris-history__icon svg {
  width: 1rem;
  height: 1rem;
}

.cauris-history__amount {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-online);
}

/* Une dépense en brun, pas en rouge : ce n'est pas une perte, c'est un achat. */
.cauris-history__amount.is-spent {
  color: var(--color-text-muted);
}

/* --- TÉLÉPHONE ----------------------------------------------------------- */
@media (max-width: 34rem) {

  .cauris-hero {
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
  }

  .cauris-hero__shell {
    width: 4rem;
    height: 4rem;
  }

  .cauris-days__shell {
    width: 2.2rem;
    height: 2.2rem;
  }

  .cauris-days::before {
    top: 1.1rem;
  }

  .cauris-days__shell .coin-icon {
    width: 1.2rem;
    height: 1.2rem;
  }

  .cauris-days__label {
    font-size: 0.6rem;
  }

  .cauris-ladder__item {
    grid-template-columns: minmax(0, 1fr) 3.8rem 3rem 2.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cauris-hero__bonus {
    animation: none;
  }
}


/* =============================================================================
   3. DANS L'ATELIER DE L'AVATAR
   ========================================================================== */

.avatar-shop__wallet {
  display: flex;
  align-items: center;
  gap: 0.35em;
  margin: var(--space-sm) 0 var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.avatar-shop__wallet strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.avatar-shop__coin {
  width: 1.3em;
  height: 1.3em;
}

/* LA CONFIRMATION : un encadré dans l'atelier, pas une fenêtre par-dessus — on
   garde le portrait sous les yeux en confirmant. */
.avatar-shop__confirm {
  margin: 0 0 var(--space-sm);
  padding: var(--space-sm) var(--space-md);

  background: linear-gradient(180deg, rgba(255, 219, 153, 0.35), rgba(240, 225, 209, 0.6));
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px rgba(216, 164, 78, 0.5);

  animation: cauris-confirm-in 0.3s cubic-bezier(.2, 1.4, .4, 1);
}

.avatar-shop__confirm[hidden] {
  display: none;
}

.avatar-shop__confirm-title {
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.avatar-shop__items {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-sm);
}

.avatar-shop__items li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 2px 0;
}

.avatar-shop__item-price {
  font-weight: 700;
  white-space: nowrap;
}

.avatar-shop__total {
  margin: var(--space-2xs) 0 var(--space-xs);
  padding-top: var(--space-2xs);
  font-size: var(--font-size-sm);
  font-weight: 700;
  border-top: 1px solid rgba(60, 39, 35, 0.15);
}

.avatar-shop__confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
}

.avatar-shop__confirm-actions .coin-icon {
  margin-right: 0.3em;
}

@keyframes cauris-confirm-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}


/* =============================================================================
   4. LES CAURIS GAGNÉS EN FIN DE PARTIE
   ========================================================================== */
/*  Le même gabarit que le bloc de l'Elo (components/elo-gain.css), juste
    dessous : on lit l'un puis l'autre. */

.cauris-gain {
  position: relative;
  margin: 0 auto var(--space-md);
  padding: var(--space-xs) var(--space-md);
  max-width: 19rem;

  text-align: center;

  background: linear-gradient(180deg, rgba(255, 237, 196, 0.5), rgba(240, 225, 209, 0.5));
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px rgba(216, 164, 78, 0.35);

  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(.2, .9, .3, 1.2);
}

.cauris-gain.is-in,
.cauris-gain.is-done {
  opacity: 1;
  transform: none;
}

.cauris-gain--flat {
  background: rgba(240, 225, 209, 0.5);
  box-shadow: inset 0 0 0 1px rgba(60, 39, 35, 0.1);
}

.cauris-gain__label {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.cauris-gain__main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  margin: 0.1em 0 0.2em;
}

.cauris-gain__shell {
  width: 2.6rem;
  height: 2.6rem;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(60, 39, 35, 0.3));
}

.cauris-gain__shell.is-pop {
  animation: cauris-pop 0.7s cubic-bezier(.2, 1.8, .4, 1);
}

.cauris-gain__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 2.6rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-online);
}

.cauris-gain--flat .cauris-gain__value {
  color: var(--color-text-muted);
}

.cauris-gain__value.is-landed {
  animation: cauris-land 0.45s cubic-bezier(.3, 1.6, .5, 1);
}

.cauris-gain__purse {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin: 0;
  padding: 0.2em 0.7em;

  font-size: var(--font-size-sm);
  color: var(--color-text-muted);

  background: rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-full);
}

.cauris-gain__purse-icon {
  width: 1.2em;
  height: 1.2em;
  object-fit: contain;
}

.cauris-gain__purse-amount {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.cauris-gain__purse.is-filling {
  box-shadow: 0 0 0 2px rgba(255, 201, 102, 0.8), 0 0 14px rgba(255, 201, 102, 0.8);
  transition: box-shadow 0.2s ease;
}

.cauris-gain__purse.is-landed .cauris-gain__purse-icon {
  animation: cauris-land 0.45s cubic-bezier(.3, 1.6, .5, 1);
}

.cauris-gain__note {
  margin: var(--space-2xs) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* LES CAURIS QUI S'ENVOLENT vers la bourse — posés par le script, chacun avec
   son trajet : un petit bond, puis la bourse. */
.cauris-gain__flyer {
  position: absolute;
  z-index: 2;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  pointer-events: none;
  opacity: 0;
  animation: cauris-fly 0.95s cubic-bezier(.45, .05, .55, .95) var(--delai, 0ms) forwards;
}

@keyframes cauris-pop {
  0%   { transform: scale(0.3) rotate(-40deg); }
  60%  { transform: scale(1.3) rotate(12deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes cauris-land {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes cauris-fly {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(0); }
  10%  { opacity: 1; }
  35%  { transform: translate(var(--hx), var(--hy)) scale(1.1) rotate(calc(var(--rot) / 2)); }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.55) rotate(var(--rot)); }
}

/* Un écran bas : le bloc se resserre, comme celui de l'Elo. */
@media (max-height: 700px) {

  .cauris-gain {
    margin-bottom: var(--space-sm);
    padding: var(--space-2xs) var(--space-sm);
  }

  .cauris-gain__shell {
    width: 2rem;
    height: 2rem;
  }

  .cauris-gain__value {
    font-size: clamp(1.6rem, 6vw, 2rem);
  }
}

/* La fenêtre de fin qui porte les Cauris défile au lieu d'être coupée — comme
   celle qui porte l'Elo (69.48). */
.modal:has(.cauris-gain) {
  overflow-y: auto;
  align-items: safe center;
}

@media (prefers-reduced-motion: reduce) {

  .cauris-gain,
  .avatar-shop__confirm {
    transition: none;
    animation: none;
  }

  .cauris-gain *,
  .cauris-gain__flyer {
    animation: none !important;
  }
}