/* Ikonknapperne i HUD'en og på berøringsskærmen: bog, kort og taske i stedet for tekst (se ikoner.js) */
.hud-btn.hud-ikon, .hud-chip.hud-ikon { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 3px 5px; line-height: 0; min-width: 40px; min-height: 40px; }
.hud-ikon .ik { display: block; line-height: 0; transition: transform .12s steps(3); }
.hud-ikon:hover .ik, .hud-ikon:focus-visible .ik { transform: translateY(-2px) scale(1.08); }
.hud-ikon:active .ik { transform: translateY(1px) scale(.95); }
.hud-ikon .ik svg { display: block; filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)); }
.hud-ikon .badge { position: absolute; right: -5px; top: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--gold, #ffcc4d); color: #1a1420; border: 2px solid #1a1420; font-size: .72em; font-weight: 700; line-height: 14px; text-align: center; box-sizing: border-box; }
.hud-ikon .badge:empty, .hud-ikon .badge[data-n="0"] { display: none; }
.hud-ikon.hop .ik { animation: ik-hop .5s steps(6); }
@keyframes ik-hop { 0% { transform: translateY(0) scale(1); } 30% { transform: translateY(-6px) scale(1.18) rotate(-8deg); } 60% { transform: translateY(0) scale(.9) rotate(6deg); } 100% { transform: translateY(0) scale(1); } }

/* berøringsknapperne */
#tbtns .t-ikon { display: flex; align-items: center; justify-content: center; padding: 0; line-height: 0; }
#tbtns .t-ikon .ik svg { display: block; filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)); }

/* en ting, der flyver ind i tasken (taske.js) */
.taske-flyver { position: fixed; z-index: 400; pointer-events: none; line-height: 0; filter: drop-shadow(0 4px 0 rgba(0,0,0,.45)); }
.taske-flyver .glimt { position: absolute; inset: -10px; background: radial-gradient(circle, rgba(255,240,170,.9) 0 18%, rgba(255,240,170,0) 62%); animation: glimt .5s steps(5) infinite alternate; }
@keyframes glimt { from { opacity: .3; transform: scale(.8); } to { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .hud-ikon .ik { transition: none; } .hud-ikon.hop .ik { animation: none; } .taske-flyver .glimt { animation: none; } }