/* ELLED — Componente visual da moeda LEDcoin.
 *
 * Uso:
 *   <img class="ledcoin xs"  src="/assets/img/ledcoin.png" alt="LEDcoin">
 *   <span class="ledcoin-tag"><img class="ledcoin sm" src="..."> 250</span>
 *
 * Variantes de tamanho: xs (16) | sm (22) | md (32) | lg (48) | xl (96) | hero (200)
 * Helpers:
 *   .ledcoin.spin   → animação contínua de giro 3D suave
 *   .ledcoin.float  → flutua de leve (idle hover)
 *   .ledcoin-tag    → pill dourada com saldo (inline-flex)
 *   .ledcoin-amount → texto monoespaçado dourado pra valor numérico
 */

:root {
  --ledcoin-gold-1: #ffd86b;
  --ledcoin-gold-2: #f5b800;
  --ledcoin-gold-3: #b67900;
  --ledcoin-glow: 0 0 22px rgba(245, 184, 0, 0.55);
}

.ledcoin {
  display: inline-block;
  vertical-align: middle;
  width: 28px; height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(245, 184, 0, 0.35));
  transition: transform .2s ease, filter .2s ease;
  user-select: none;
  -webkit-user-drag: none;
}
.ledcoin.xs   { width: 16px;  height: 16px; }
.ledcoin.sm   { width: 22px;  height: 22px; }
.ledcoin.md   { width: 32px;  height: 32px; }
.ledcoin.lg   { width: 48px;  height: 48px; }
.ledcoin.xl   { width: 96px;  height: 96px; }
.ledcoin.hero { width: 200px; height: 200px;
                filter: drop-shadow(0 12px 40px rgba(245, 184, 0, 0.55)); }

/* Hover sutil — leve aumento e glow. */
.ledcoin:hover {
  transform: translateY(-1px) scale(1.06);
  filter: drop-shadow(0 6px 14px rgba(245, 184, 0, 0.55));
}

/* Animações */
@keyframes ledcoin-spin {
  0%   { transform: rotateY(0deg); }
  50%  { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}
@keyframes ledcoin-float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-6px) rotate(3deg); }
}
@keyframes ledcoin-pulse-glow {
  0%, 100% { filter: drop-shadow(0 8px 20px rgba(245, 184, 0, 0.35)); }
  50%      { filter: drop-shadow(0 12px 30px rgba(245, 184, 0, 0.7)); }
}

.ledcoin.spin    { animation: ledcoin-spin 6s linear infinite; transform-style: preserve-3d; }
.ledcoin.float   { animation: ledcoin-float 4s ease-in-out infinite; }
.ledcoin.pulsing { animation: ledcoin-pulse-glow 2.6s ease-in-out infinite; }

/* Pill dourada com saldo / quantidade. Ex.: ⟪🪙 250 LEDcoin⟫ */
.ledcoin-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(245, 184, 0, 0.16), rgba(255, 216, 107, 0.06));
  border: 1px solid rgba(245, 184, 0, 0.45);
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700; font-size: .92rem;
  color: var(--ledcoin-gold-1, #ffd86b);
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.ledcoin-tag.big {
  padding: 6px 16px 6px 6px;
  font-size: 1.05rem;
}
.ledcoin-tag .ledcoin {
  width: 26px; height: 26px;
  filter: drop-shadow(0 2px 6px rgba(245, 184, 0, 0.45));
}
.ledcoin-tag.big .ledcoin { width: 34px; height: 34px; }

.ledcoin-tag.light {
  color: var(--ledcoin-gold-3, #b67900);
  background: linear-gradient(135deg, #fff8df, #fff3c2);
  border-color: #f3c84a;
}

/* Texto numérico dourado, para preço / saldo grande. */
.ledcoin-amount {
  font-family: 'Sora', 'Inter', system-ui, sans-serif;
  font-weight: 800;
  color: var(--ledcoin-gold-1, #ffd86b);
  text-shadow: 0 2px 12px rgba(245, 184, 0, 0.45);
  letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: 10px;
}
.ledcoin-amount .ledcoin { filter: drop-shadow(0 4px 12px rgba(245, 184, 0, 0.55)); }

/* Card "hero" usado na página de configuração e na página da loja. */
.ledcoin-hero-card {
  position: relative; overflow: hidden;
  display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
  padding: 22px 26px;
  background: radial-gradient(circle at 20% 20%, rgba(245,184,0,.18), transparent 55%),
              linear-gradient(135deg, #11192e 0%, #1c2750 100%);
  border: 1px solid rgba(245, 184, 0, 0.30);
  border-radius: 18px;
  color: #fff;
  box-shadow: 0 18px 50px -20px rgba(245, 184, 0, 0.30);
}
.ledcoin-hero-card::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 85% 110%, rgba(255, 216, 107, .15), transparent 50%);
  pointer-events: none;
}
.ledcoin-hero-card .ledcoin {
  flex: 0 0 auto;
}
.ledcoin-hero-card .meta { flex: 1 1 240px; min-width: 0; }
.ledcoin-hero-card .meta .label {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 216, 107, .85); font-weight: 700;
}
.ledcoin-hero-card .meta h2 {
  margin: 4px 0 6px; font-size: 1.6rem; color: #fff;
  font-family: 'Sora', sans-serif; font-weight: 800;
}
.ledcoin-hero-card .meta p { margin: 0; color: rgba(255,255,255,.78); font-size: .95rem; line-height: 1.45; }

/* Card pequeno de saldo "LEDcoin" usado nas cards da carteira. */
.ledcoin-saldo {
  position: relative;
  background: radial-gradient(circle at 0% 0%, rgba(245,184,0,.22), transparent 60%),
              linear-gradient(135deg, rgba(245,184,0,.10), rgba(20,30,60,.4));
  border: 1px solid rgba(245, 184, 0, 0.35);
  border-radius: 14px;
  padding: 18px 20px;
  overflow: hidden;
}
.ledcoin-saldo::before {
  content: ''; position: absolute; right: -30px; bottom: -30px;
  width: 140px; height: 140px;
  background: url('/assets/img/ledcoin.png') center/contain no-repeat;
  opacity: .14; transform: rotate(-15deg);
  pointer-events: none;
}
.ledcoin-saldo .label {
  font-family: 'Sora', sans-serif; font-size: .72rem; letter-spacing: .08em;
  color: var(--ledcoin-gold-1, #ffd86b); text-transform: uppercase; font-weight: 700;
  margin-bottom: 8px; display: flex; align-items: center; gap: 8px;
}
.ledcoin-saldo .label .ledcoin { width: 22px; height: 22px; }
.ledcoin-saldo .valor {
  font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: 1.8rem; color: var(--ledcoin-gold-1, #ffd86b);
  text-shadow: 0 4px 18px rgba(245, 184, 0, 0.45);
  letter-spacing: -.01em;
}
.ledcoin-saldo .sub { font-size: .8rem; color: rgba(255,255,255,.62); margin-top: 4px; }