/* Stickers stuck on a player's game (src/Stickers.php): the game's top bar,
   the leaderboard and the Sticker Book's slots. */
.lsx-stuck { display: inline-flex; align-items: center; gap: 0.15rem; padding-left: 0.5rem; }
.lsx-stuck__s {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 3px solid var(--frame, #94a3b8);
  border-radius: 50%;
  outline: 3px solid #fff;
  background: #fff;
  color: var(--ink, #0b1026);
  font-size: 1.35rem;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.15s;
}
.lsx-stuck__s:hover { transform: rotate(0deg) scale(1.15); }
.lsx-stuck__s.is-mutated { animation: lsx-stuck-glow 1.6s ease-in-out infinite; }
@keyframes lsx-stuck-glow { 50% { box-shadow: 0 0 12px 4px var(--glow, #ffd700); } }
.lsx-stuck--small { padding-left: 0.4rem; vertical-align: middle; }
.lsx-stuck--small .lsx-stuck__s { width: 1.6rem; height: 1.6rem; border-width: 2px; outline-width: 2px; font-size: 0.9rem; box-shadow: none; }
.lsx-stuck--big { width: 4rem; height: 4rem; border-width: 4px; outline-width: 4px; font-size: 2.3rem; }
@media (prefers-reduced-motion: reduce) {
  .lsx-stuck__s { transition: none; }
  .lsx-stuck__s.is-mutated { animation: none; box-shadow: 0 0 8px 2px var(--glow, #ffd700); }
}

/* Sticker Book: the slots, and the Stick on buttons. */
.lsx-stuck-slots { padding: 1rem; border-radius: 16px; background: var(--lsx-navy, #0b1026); color: #fff; }
.lsx-stuck-slots .text-muted { color: #a5acd6 !important; }
.lsx-stuck-slots__row { display: flex; flex-wrap: wrap; gap: 1rem; }
.lsx-stuck-slot { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; width: 7.5rem; text-align: center; }
.lsx-stuck-slot small { min-height: 2.4em; line-height: 1.2; }
.lsx-stuck-slot__empty { display: grid; place-items: center; width: 4rem; height: 4rem; border: 3px dashed #2a3263; border-radius: 50%; color: #2a3263; font-size: 1.4rem; }
.lsx-sticker__stick { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.5rem; }
.lsx-sticker__stick .btn { padding: 0.15rem 0.4rem; font-size: 0.75rem; }
