/**
 * PlayAwale — La mise d'une partie en ligne (section 72)
 * -----------------------------------------------------------------------------
 * Trois morceaux :
 *   · au salon, le choix de l'enjeu sous « Créer une partie » — le même
 *     interrupteur que « publique / privée », et des pastilles de montant ;
 *   · dans la partie, la CARTE où l'on négocie, en haut, sous la ligne d'état,
 *     puis le RAPPEL discret de la mise acceptée, en bas ;
 *   · dans l'écran de fin, le pot remporté, la mise perdue ou rendue.
 * Les couleurs sont celles du site : le sable, l'ambre, et l'or des Cauris.
 *
 * @package   PlayAwale
 * @version   2.0
 * @author    Nicolas Lion — Développeur web — https://nlion.fr
 * @copyright 2026 Nicolas Lion
 */

/* =============================================================================
   AU SALON
   ========================================================================== */

.net-stake-choice {
  margin: var(--space-sm) 0 0;
  padding: var(--space-sm) 0 0;
  border: none;
  border-top: 1px solid var(--color-sand-300);
}

.net-stake-choice__legend {
  float: left;
  width: 100%;
  margin: 0 0 var(--space-xs);
  padding: 0;

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text-muted);
}

.net-stake-choice .net-visibility__switch {
  clear: both;
}

.net-stake-choice .net-visibility__input:disabled + .net-visibility__label {
  opacity: 0.45;
  cursor: not-allowed;
}

.coin-icon.net-stake-choice__coin {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  margin-right: 0.3em;
  vertical-align: -0.2em;
}

.net-stake-choice__amounts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.net-stake-choice__amounts:not([hidden]) {
  animation: net-stake-pop var(--duration-base) ease-out;
}

.net-stake-choice__balance,
.net-stake-choice__account {
  margin: var(--space-xs) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* --- Sans compte : la vitrine ------------------------------------------------
   Les Cauris et leurs montants se voient, fermés ; l'invitation à créer un
   compte, juste dessous, est ce qui doit attirer l'œil. */
.net-stake-choice--guest .net-stake-choice__locked {
  cursor: not-allowed;
}

.net-stake-choice--guest .net-stake-choice__locked .net-visibility__input {
  pointer-events: none;
}

.net-stake-choice--guest .net-stake-choice__locked .net-visibility__label {
  opacity: 0.7;
}

.net-stake-choice__badge {
  display: inline-block;
  margin-left: 0.35em;
  padding: 0.05em 0.5em;

  font-size: 0.72em;
  font-weight: 700;
  vertical-align: 0.1em;
  color: var(--color-brand-dark);

  background-color: var(--color-sand-200);
  border-radius: var(--radius-full);
}

.net-stake-chip.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

.net-stake-choice__guest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);

  background-color: rgba(242, 181, 28, 0.16);
  border: 1px solid var(--color-brand-amber-light);
  border-radius: var(--radius-md);
}

.net-stake-choice__guest-text {
  flex: 1 1 14em;
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

.net-stake-choice__guest-btn {
  flex: none;
  padding: var(--space-2xs) var(--space-md);
  font-size: var(--font-size-sm);
  text-decoration: none;
}

/* Un geste vers les Cauris fermés : l'invitation fait signe. */
.net-stake-choice__guest.is-nudged {
  animation: net-stake-nudge 0.6s cubic-bezier(.3, 1.6, .5, 1);
}

@keyframes net-stake-nudge {
  0%, 100% { transform: none; }
  30%      { transform: scale(1.04); box-shadow: 0 0 0 4px rgba(242, 181, 28, 0.35); }
}

/* Une pastille de montant : un petit trou de sable, qui devient d'ambre. */
.net-stake-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-height: 2.5rem;
  padding: var(--space-2xs) var(--space-sm);

  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-text);

  background-color: var(--color-sand-100);
  border: none;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-hollow);
  cursor: pointer;
  transition: transform var(--duration-fast), background var(--duration-fast);
}

.net-stake-chip:hover:not(:disabled) {
  transform: translateY(-1px);
}

.net-stake-chip[aria-pressed="true"] {
  background-image: var(--gradient-amber-raised);
  box-shadow: var(--shadow-raised-amber);
}

.net-stake-chip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.net-stake-chip:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.coin-icon.net-stake-chip__coin {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
}


/* =============================================================================
   DANS LA PARTIE — LA CARTE
   -----------------------------------------------------------------------------
   En haut, sous la ligne d'état, au-dessus du plateau : on la voit sans qu'elle
   cache ses propres trous. Elle arrive en rebondissant, la pièce se balance.
   ========================================================================== */

.net-stake {
  position: fixed;
  top: calc(var(--space-xs) + 2.6rem);
  left: 50%;
  z-index: var(--z-overlay);
  transform: translateX(-50%);

  width: min(92vw, 25rem);
  padding: var(--space-sm) var(--space-md) var(--space-md);

  font-family: var(--font-body);
  color: var(--color-text);

  background-color: var(--color-surface);
  background-image: var(--gradient-surface-raised);
  border: 2px solid var(--color-brand-amber-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised), 0 0 0 4px rgba(242, 181, 28, 0.18);

  animation: net-stake-arrive 0.45s cubic-bezier(.2, 1.4, .4, 1);
}

/* PENDANT L'ATTENTE DE L'ADVERSAIRE, l'écran du code occupe le haut : la
   carte descend en bas, sous les boutons de partage. */
.net-waiting:not([hidden]) ~ .net-stake {
  top: auto;
  bottom: calc(var(--space-md) + 3rem);
}

/* Celui qui attend : la carte se fait plus discrète. */
.net-stake.is-waiting {
  border-color: var(--color-sand-300);
  box-shadow: var(--shadow-raised);
}

.net-stake__body {
  min-width: 0;
  text-align: left;
}

.net-stake__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.net-stake__coin-img {
  flex: none;
  width: 1.2em;
  height: 1.2em;
  object-fit: contain;
}

.net-stake__coin-img--big {
  width: 3rem;
  height: 3rem;
  filter: drop-shadow(0 3px 4px rgba(90, 52, 10, 0.35));
  animation: net-stake-sway 2.8s ease-in-out infinite;
}

.net-stake__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-tight);
}

.net-stake__text {
  margin: 0.15em 0 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-tight);
}

.net-stake__hint {
  margin: var(--space-xs) 0 0;
  padding: var(--space-2xs) var(--space-sm);

  font-size: var(--font-size-sm);
  font-weight: 700;
  text-align: center;
  color: var(--color-brand-dark);

  background-color: rgba(242, 181, 28, 0.2);
  border-radius: var(--radius-full);
}

.net-stake__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.net-stake__actions .btn {
  padding: var(--space-2xs) var(--space-md);
  font-size: var(--font-size-sm);
}


/* --- La contre-proposition : moins, le montant, plus ------------------------ */

.net-stake__stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.net-stake__step {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  font-size: 1.4rem;
  line-height: 1;
  border-radius: var(--radius-full);
}

.net-stake__amount {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-width: 5.5rem;
  justify-content: center;

  font-family: var(--font-display);
  font-size: 1.8rem;
}

.net-stake__amount .net-stake__coin-img {
  width: 1.6rem;
  height: 1.6rem;
}

.net-stake__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xs);
  margin-top: var(--space-xs);
}

.net-stake__chips .net-stake-chip {
  min-height: 2.25rem;
  font-size: var(--font-size-sm);
}

.net-stake__balance {
  margin: var(--space-xs) 0 0;
  font-size: var(--font-size-sm);
  text-align: center;
  color: var(--color-text-muted);
}

.net-stake__error {
  margin: var(--space-xs) 0 0;
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-align: center;
  color: var(--color-danger);
}

/* =============================================================================
   DANS LA PARTIE — LE RAPPEL
   ========================================================================== */

.net-stake-pill {
  position: fixed;
  bottom: calc(var(--space-sm) + 3.25rem);
  left: 50%;
  z-index: var(--z-overlay);
  transform: translateX(-50%);

  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  max-width: calc(100vw - 2 * var(--space-md));
  margin: 0;
  padding: var(--space-2xs) var(--space-md) var(--space-2xs) var(--space-xs);

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-brand-dark);

  background-image: var(--gradient-amber-raised);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-raised-amber);

  animation: net-stake-arrive 0.45s cubic-bezier(.2, 1.4, .4, 1);
}

.net-stake-pill .net-stake__coin-img {
  width: 1.4em;
  height: 1.4em;
}


/* =============================================================================
   L'ÉCRAN DE FIN
   ========================================================================== */

.net-stake-end {
  margin: var(--space-sm) auto 0;
  padding: var(--space-sm) var(--space-md);
  max-width: 22rem;

  text-align: center;
  border-radius: var(--radius-md);
  background-color: var(--color-sand-100);
  box-shadow: var(--shadow-hollow);

  opacity: 0;
  transform: scale(0.92);
  transition: opacity var(--duration-base), transform 0.4s cubic-bezier(.2, 1.4, .4, 1);
}

.net-stake-end.is-in {
  opacity: 1;
  transform: none;
}

.net-stake-end--won {
  background-image: var(--gradient-amber-raised);
  box-shadow: var(--shadow-raised-amber);
}

.net-stake-end__line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  margin: 0;

  font-weight: 700;
}

.net-stake-end--won .net-stake-end__text {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
}

.net-stake-end--lost .net-stake-end__text {
  color: var(--color-text-muted);
}

.net-stake-end__delta {
  padding: 0.05em 0.5em;
  font-weight: 700;
  color: var(--color-danger);
  background: var(--color-danger-surface);
  border-radius: var(--radius-full);
}

/* Le compte du pot : le bloc des Cauris du solo, sans sa propre marge. */
.net-stake-end__count .cauris-gain {
  margin: var(--space-xs) auto 0;
}

.net-stake-end__balance {
  margin: 0.2em 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.net-stake-end--won .net-stake-end__balance {
  color: var(--color-brand-dark);
}


/* =============================================================================
   L'ELO QUI N'A PAS BOUGÉ — ou la première note (net.js, noterElo())
   ========================================================================== */

.elo-gain--note .elo-gain__note {
  margin: 0.25em 0 0;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

.elo-gain--note.elo-gain--up .elo-gain__note {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
}


/* =============================================================================
   LES MOUVEMENTS
   ========================================================================== */

@keyframes net-stake-arrive {
  0%   { opacity: 0; transform: translate(-50%, -12px) scale(0.9); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes net-stake-pop {
  0%   { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: none; }
}

@keyframes net-stake-sway {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg) translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .net-stake,
  .net-stake-pill,
  .net-stake__coin-img--big,
  .net-stake-choice__amounts:not([hidden]),
  .net-stake-choice__guest.is-nudged {
    animation: none;
  }

  .net-stake-end {
    transition: none;
  }
}

/* Téléphone en portrait : la carte prend toute la largeur, tout en haut. La
   ligne d'état, qui s'y adosse à droite sur trois lignes, se tait le temps de
   la négociation : la carte dit déjà ce qui se passe. */
@media (max-width: 34rem) and (orientation: portrait) {
  .net-stake {
    top: var(--space-xs);
    width: calc(100vw - 2 * var(--space-xs));
  }

  .has-net-stake .net-status {
    visibility: hidden;
  }
}

/* La partie avec mise refusée à un visiteur sans compte (section 77) : l'encadré
   de l'invitation au compte, posé au-dessus des deux cartes du salon — un peu
   d'air entre eux, sans quoi il s'y colle. */
.net-stake-refused {
  margin-bottom: var(--space-md);
}