/* ==========================================================================
   Dimensión Marta — Sistema de escala compartido para juegos
   --------------------------------------------------------------------------
   Variables únicas para dimensionar stickers, personajes y premios en todos
   los juegos, de forma coherente entre pantallas y dispositivos.

   - board:     fichas/tokens dentro del tablero
   - card:      arte dentro de tarjetas de selección o listas
   - character: personaje principal visible durante la partida
   - reward:    sticker premio en pantallas de victoria/resultado
   - hero:      protagonista de la pantalla de inicio
   - La variante "is-loose" es para stickers con mucho margen transparente
     alrededor del personaje (serie sphynx_premio_*, hamster_premio_turbo):
     compensa el lienzo con más anchura y márgenes negativos.
   ========================================================================== */
:root {
  --dm-sticker-board: clamp(46px, 9vw, 76px);
  --dm-sticker-card: clamp(88px, 18vw, 132px);
  --dm-sticker-character: clamp(140px, 32vw, 300px);
  --dm-sticker-reward: clamp(150px, 42vw, 230px);
  --dm-sticker-reward-loose: clamp(220px, 62vw, 340px);
  --dm-sticker-hero: clamp(190px, 55vw, 330px);
}

.dm-sticker {
  display: block;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.dm-sticker-reward {
  width: var(--dm-sticker-reward);
  margin: 0 auto 10px;
  filter: drop-shadow(0 12px 22px rgba(20, 10, 30, 0.35));
}

/* Stickers con gran lienzo transparente: más anchura nominal y recorte
   óptico vertical para que el personaje se vea al mismo tamaño real. */
.dm-sticker-reward.is-loose {
  width: var(--dm-sticker-reward-loose);
  margin: calc(var(--dm-sticker-reward-loose) * -0.13) auto calc(var(--dm-sticker-reward-loose) * -0.1);
}

.dm-sticker-card { width: var(--dm-sticker-card); }
.dm-sticker-board { width: var(--dm-sticker-board); }
.dm-sticker-character { width: var(--dm-sticker-character); }
.dm-sticker-hero { width: var(--dm-sticker-hero); }

@media (prefers-reduced-motion: reduce) {
  .dm-sticker { transition: none !important; animation: none !important; }
}