/* =============================================================================
   Coins (docs/shop-spec.md) : la pièce pixel et le solde, partout où ils s'affichent (HUD de
   l'accueil, MON PERSO, BOUTIQUE, écran de fin de match, fin du tutoriel). L'écran BOUTIQUE
   lui-même est dans shop-arcade.css.
   ============================================================================= */

/* Deux pièces, chacune affichée à sa taille exacte (pixels entiers, jamais « à la taille du
   texte ») : une image de pixel art réduite d'un facteur non entier perd ses pixels au hasard.
   - petite, 16 × 16 (coin-16.png : la même pièce ballon, recadrée sur ses 26 px utiles et réduite
     au plus proche voisin) : prix des cartes, cadenas, lignes de texte ;
   - grande, 32 × 32 (coin.png, PixelLab, ballon en relief) : solde du HUD, porte-monnaie, bouton
     d'achat, fin de match ; 64 × 64 dans la modale d'ouverture.
   L'image de 32 a 3 px de vide autour de la pièce : la marge négative recolle le texte. */
.coin-icon {
  display: inline-block; flex: none;
  width: 16px; height: 16px; vertical-align: -3px;
  background: url('/images/coin-16.png?v=2') center / 16px 16px no-repeat;
  image-rendering: pixelated;
}
.coin-icon.is-large,
.shop-item-copy > .shop-price .coin-icon,
.arcade-hud-coins .coin-icon,
.shop-wallet .coin-icon,
.shop-buy .coin-icon,
.character-shop-balance .coin-icon,
.endgame-coins .coin-icon,
.shop-fly-coin {
  width: 32px; height: 32px; margin: -3px; vertical-align: -9px;
  background-image: url('/images/coin.png'); background-size: 32px 32px;
}
.shop-launch-gift .coin-icon {
  width: 64px; height: 64px; margin: -6px; vertical-align: middle;
  background-image: url('/images/coin.png'); background-size: 64px 64px;
}

/* HUD de l'accueil : le solde sous la jauge d'XP, calé à droite comme « NIV. 25 ». Même style qu'une
   valeur du HUD (.arcade-hud-value, account-arcade.css) : police du jeu, ombre pixel, chiffre en couleur
   d'accent, posé sur la scène sans encart. Un bouton (clic = boutique), hors de la navigation clavier
   comme le voyant manette, au-dessus du bouton Mon perso qui couvre tout le bloc. */
.arcade-hud-record .arcade-hud-coins {
  position: relative; z-index: 2; justify-self: end; align-items: center; gap: 0;
  margin: clamp(8px, 1.8cqh, 16px) 0 0; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; color: inherit; text-shadow: 0 2px #08120d; cursor: pointer;
}
.arcade-hud-coins .arcade-hud-stat { align-items: center; gap: .3em; color: var(--arc-accent); transition: filter 160ms steps(3); }
.arcade-hud-coins strong { font-weight: normal; }
.arcade-hud-coins .coin-icon { filter: drop-shadow(0 2px #08120d); }
.arcade-home-body .arcade-hud-coins:is(:hover, :focus, :focus-visible) { outline: none; background: none; box-shadow: none; }
.arcade-hud-coins:is(:hover, :focus-visible) .arcade-hud-stat { filter: brightness(1.15); }
/* Survoler le solde vise la boutique, pas Mon perso : le niveau, la jauge et la bulle d'XP restent au repos. */
.arcade-hud-record:has(.arcade-hud-coins:hover) { --hud-level-ink: var(--screen-ink); --hud-level-glow: transparent; --hud-xp-ink: var(--screen-mint); }
.arcade-hud-record[data-prestige-tier]:has(.arcade-hud-coins:hover) { --hud-level-ink: var(--pe-scene-ink); }
/* .arcade-hud-slot en plus : account-arcade.css, chargé après, montre la bulle au survol du bloc. */
.arcade-hud-slot.arcade-hud-record:has(.arcade-hud-coins:hover) .arcade-hud-xp-copy { visibility: hidden; opacity: 0; }
/* Au retour d'un match : « +15 » devant le solde, puis il s'efface (comme « +N XP » du niveau). */
.arcade-hud-coins-gain { margin-right: .4em; padding-top: .15em; color: var(--arc-mint, #93cbb9); font-size: .55em; letter-spacing: .05em; }
.arcade-hud-coins-gain:empty { display: none; }
@media (max-width: 600px) {
  .arcade-hud-record .arcade-hud-value.arcade-hud-coins { display: inline-flex; margin-top: 6px; font-size: 22px; }
}

/* Écran de fin : « +15 coins » sous la jauge d'XP, le détail au survol (ou au focus). */
.endgame-coins {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 6px; color: var(--screen-ink, #f3f0df); font: 22px/1 'Jersey 15', sans-serif; letter-spacing: .04em;
}
.endgame-coins:focus-visible { outline: 2px solid var(--screen-accent, #f6cd72); outline-offset: 3px; }
.endgame-coins-gain { color: var(--screen-prestige-gold, #f0bf2e); font-weight: normal; }
.endgame-coins-cap { color: var(--screen-muted, #a8b5ac); font-size: .8em; }
.endgame-coins-detail {
  position: absolute; top: calc(100% + 4px); left: 50%; z-index: 2; transform: translateX(-50%);
  padding: 3px 8px; white-space: nowrap;
  background: var(--screen-panel, #182320); color: var(--screen-muted, #a8b5ac);
  border: 1px solid var(--screen-line, #34483f); font-size: .75em;
  visibility: hidden; opacity: 0; transition: opacity 140ms ease-out;
}
.endgame-coins:is(:hover, :focus-visible) .endgame-coins-detail { visibility: visible; opacity: 1; }
.endgame-coins.is-missed .endgame-coins-gain { color: var(--screen-muted, #a8b5ac); text-decoration: line-through; }
.endgame-coins.is-missed .coin-icon { filter: grayscale(1); opacity: .6; }
.endgame-xp-unlock-price { display: inline-flex; align-items: center; gap: 5px; color: var(--screen-prestige-gold, #f0bf2e); font: 18px/1 'Jersey 15', sans-serif; }

/* Fin du tutoriel : la récompense, une seule fois par compte. */
.training-tutorial-finish-coins { margin: 0; color: var(--screen-prestige-gold, #f0bf2e); font: 24px/1 'Jersey 15', sans-serif; letter-spacing: .06em; text-align: center; }