/* item sprites (js/ui/sprites.js): one frameless image per item filling its shape. The rarity is a glow that follows
   the image's alpha (drop-shadow), never a stroke, fill or rectangle; common items get a soft dark shadow only. */
.piece.item.has-sprite .frame { display: none; }
.piece.item.has-sprite .cell { border-radius: 4px; }
.piece.item.has-sprite {
  --glow: drop-shadow(0 0 2px var(--qc)) drop-shadow(0 0 6px color-mix(in srgb, var(--qc) 55%, transparent));
  --glow-hi: drop-shadow(0 0 3px var(--qc)) drop-shadow(0 0 10px color-mix(in srgb, var(--qc) 75%, transparent));
  --ground: drop-shadow(0 0 3px rgba(0,0,0,.7)); }
.piece.item.has-sprite.q-common {
  --glow: drop-shadow(0 0 2px rgba(0,0,0,.85)) drop-shadow(0 0 5px rgba(0,0,0,.45));
  --glow-hi: drop-shadow(0 0 2px rgba(255,255,255,.55)) drop-shadow(0 0 7px rgba(255,255,255,.22)); }
.piece.item.has-sprite .sprite-holder { position: absolute; pointer-events: none; z-index: 1; line-height: 0; }
.piece.item.has-sprite .sprite { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none;
  filter: var(--ground) var(--glow); }
@media (hover: hover) { .piece.item.has-sprite:hover .sprite { filter: var(--ground) var(--glow-hi) brightness(1.1); } }
.piece.item.has-sprite.selected .sprite { filter: var(--ground) drop-shadow(0 0 2px var(--gold)) drop-shadow(0 0 9px color-mix(in srgb, var(--gold) 70%, transparent)); }
.piece.item.has-sprite.selected .cell { box-shadow: none; }
.piece.item.has-sprite.flash .sprite-holder { animation: flash .32s ease-out; }
.piece.item.has-sprite.dragging .sprite { filter: drop-shadow(0 0 10px rgba(0,0,0,.6)) var(--glow-hi); }
.piece.item.has-sprite:active .sprite { filter: var(--ground) var(--glow) brightness(.92); }
@media (pointer: coarse) {
  .piece.item.has-sprite { --glow: drop-shadow(0 0 4px var(--qc)); --glow-hi: drop-shadow(0 0 6px var(--qc)); }
  .piece.item.has-sprite.q-common { --glow: drop-shadow(0 0 3px rgba(0,0,0,.8)); --glow-hi: drop-shadow(0 0 3px rgba(255,255,255,.5)); }
}
