/* fallout.css: alles wat achter de lijst vandaan valt. potlood: niet weggooien, misschien nog nodig */

.hang { z-index: 1; }

.stage.shaken { animation: shaken .6s ease-in-out; }
@keyframes shaken {
  10% { translate: -10px 2px; rotate: -2deg; }
  30% { translate: 9px -1px; rotate: 2deg; }
  50% { translate: -7px 1px; rotate: -1.5deg; }
  70% { translate: 5px 0; rotate: 1deg; }
  90% { translate: -2px 0; rotate: 0deg; }
}

.fallen {
  position: absolute;
  padding: 0;
  border: 0;
  pointer-events: auto;
  cursor: pointer;
  transition: transform .3s;
}
.fallen:focus-visible { outline: 2px dashed var(--pencil); outline-offset: 4px; }

/* ---------- kassabon ---------- */

.fallen.receipt {
  width: 92px;
  padding: 10px 8px 16px;
  background: #fdfcf7;
  color: #3a3a3a;
  font: 400 8px/1.45 var(--f-type);
  text-align: left;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
  clip-path: polygon(0 0, 100% 0, 100% 96%, 92% 100%, 83% 96%, 75% 100%, 66% 96%, 58% 100%,
    50% 96%, 42% 100%, 33% 96%, 25% 100%, 17% 96%, 8% 100%, 0 96%);
}
.fallen.receipt small { color: #888; }
.fallen.receipt.big { transform: scale(2.1) rotate(0) !important; z-index: 10; }

/* ---------- twee euro ---------- */

.fallen.coin {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle, #e6e9ec 0 52%, #b0b6bb 58%, #e5c766 60%, #b8902f 85%, #8a6a1e);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(120, 90, 20, .5);
  color: #6d7378;
  font: 800 18px/42px var(--f-sans);
  text-align: center;
}
.fallen.coin.flip { animation: coinflip .9s ease-out; }
@keyframes coinflip {
  0% { transform: translateY(0) rotateX(0); }
  40% { transform: translateY(-60px) rotateX(900deg); }
  100% { transform: translateY(0) rotateX(1800deg); }
}

/* ---------- usb-stick ---------- */

.fallen.usb {
  width: 118px;
  height: 30px;
  border-radius: 4px 7px 7px 4px;
  background: linear-gradient(180deg, #e8473a, #a8261c);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .35);
}
.usb-plug {
  position: absolute;
  left: -20px;
  top: 6px;
  width: 22px;
  height: 18px;
  border-radius: 2px 0 0 2px;
  background:
    linear-gradient(90deg, transparent 30%, #444 30% 45%, transparent 45% 60%, #444 60% 75%, transparent 75%) 0 30% / 100% 30% no-repeat,
    linear-gradient(#eef0f2, #a7adb3);
}
.usb-label {
  position: absolute;
  inset: 5px 6px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #222;
  font: 400 7.5px/1 var(--f-type);
  white-space: nowrap;
  overflow: hidden;
}

/* ---------- de spin ---------- */

.fallen.spider-fallen {
  width: 26px;
  height: 26px;
  background: none;
}
.fallen.spider-fallen .spider {
  left: 50%;
  top: 0;
  width: 16px;
  height: 19px;
  margin-left: -8px;
  animation: none;
}
.fallen.spider-fallen.running .spider { animation: scuttle .12s linear infinite alternate; }
@keyframes scuttle {
  from { transform: rotate(var(--face, -90deg)) translateY(-1px); }
  to { transform: rotate(var(--face, -90deg)) translateY(1px); }
}