.patch-deal-choice{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(2,9,11,.5)}.patch-deal-choice legend{grid-column:1/-1;width:100%;margin-bottom:4px;color:#f4f9f8;font-size:.78rem}.patch-deal-choice label{display:block}.patch-deal-choice input{position:absolute;opacity:0;pointer-events:none}.patch-deal-choice span{display:grid;place-items:center;min-height:42px;border:1px solid rgba(239,189,50,.35);border-radius:10px;background:rgba(239,189,50,.06);color:#d9cfaf;font-weight:900;cursor:pointer}.patch-deal-choice input:checked+span{border-color:#efbd32;background:#efbd32;color:#142126;box-shadow:0 0 0 2px rgba(239,189,50,.18)}.patch-deal-choice input:focus-visible+span{outline:2px solid #55e0ec;outline-offset:2px}

/* Technischer Mischpult-Fader fuer Patchs 0-bis-10-Bewertungen. */
.patch-mixer-fader{position:relative;min-height:56px;padding:10px 12px;border-color:rgba(84,226,234,.22);background:linear-gradient(180deg,rgba(13,31,35,.96),rgba(3,12,15,.96));box-shadow:inset 0 1px rgba(255,255,255,.05),inset 0 -8px 18px rgba(0,0,0,.22)}
.patch-fader-channel{position:relative;display:grid;align-items:center;min-width:0;height:34px;padding:0 4px}.patch-fader-channel::before{position:absolute;inset:4px 8px;background:repeating-linear-gradient(90deg,rgba(144,182,184,.34) 0 1px,transparent 1px 10%);content:"";mask:linear-gradient(#000 0 6px,transparent 6px 22px,#000 22px);pointer-events:none}.patch-fader-channel i{position:absolute;right:8px;left:8px;height:6px;border:1px solid rgba(0,0,0,.8);border-radius:999px;background:linear-gradient(180deg,#020607,#15272b 48%,#020607);box-shadow:inset 0 1px 2px #000,0 1px rgba(255,255,255,.08);pointer-events:none}
.patch-mixer-fader input[type="range"]{position:relative;z-index:1;width:100%;height:34px;margin:0;background:transparent;accent-color:transparent;-webkit-appearance:none;appearance:none}.patch-mixer-fader input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:transparent}.patch-mixer-fader input[type="range"]::-webkit-slider-thumb{width:26px;height:32px;margin-top:-13px;border:1px solid #86eaf0;border-radius:5px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.36) 0 2px,transparent 2px 5px),linear-gradient(180deg,#a7f1f2 0,#3ab9c7 44%,#0d5965 48%,#2d9eaa 58%,#071c21 100%);box-shadow:0 0 0 2px #031014,0 5px 10px rgba(0,0,0,.62),0 0 10px rgba(75,224,232,.18);-webkit-appearance:none;appearance:none}.patch-mixer-fader input[type="range"]::-moz-range-track{height:6px;border-radius:999px;background:transparent}.patch-mixer-fader input[type="range"]::-moz-range-thumb{width:26px;height:32px;border:1px solid #86eaf0;border-radius:5px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.36) 0 2px,transparent 2px 5px),linear-gradient(180deg,#a7f1f2 0,#3ab9c7 44%,#0d5965 48%,#2d9eaa 58%,#071c21 100%);box-shadow:0 0 0 2px #031014,0 5px 10px rgba(0,0,0,.62),0 0 10px rgba(75,224,232,.18)}.patch-mixer-fader input[type="range"]:focus-visible{outline:none}.patch-mixer-fader input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px #031014,0 0 0 4px #f0c94d,0 5px 10px rgba(0,0,0,.62)}.patch-mixer-fader output{padding:6px 7px;border:1px solid rgba(239,189,50,.28);border-radius:7px;background:#020708;color:#f1ce62;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Patchs Belohnung ist ein weicher, zugeschnuerter Lootbeutel – keine Urne. */
.patch-deal-bag-visual {
  width: 104px;
  height: 92px;
}

.patch-deal-bag-visual b {
  right: 10px;
  bottom: 0;
  left: 10px;
  height: 63px;
  border: 1.5px solid rgba(255, 221, 106, .82);
  border-radius: 42% 42% 48% 48% / 25% 25% 38% 38%;
  background:
    radial-gradient(circle at 31% 25%, rgba(255, 247, 184, .38), transparent 31%),
    linear-gradient(145deg, rgba(240, 196, 65, .82) 0%, rgba(196, 128, 18, .76) 62%, rgba(105, 61, 5, .72) 100%);
  clip-path: none;
  box-shadow: inset 9px 3px 15px rgba(255, 246, 174, .18), inset -9px -7px 16px rgba(61, 32, 0, .22), 0 9px 18px rgba(0, 0, 0, .32);
  backdrop-filter: blur(1.5px);
}

.patch-deal-bag-visual b::before {
  top: -12px;
  right: 29px;
  left: 29px;
  height: 23px;
  border: 0;
  border-radius: 45% 45% 38% 38% / 28% 28% 55% 55%;
  background: linear-gradient(90deg, rgba(128, 77, 8, .78), rgba(224, 164, 38, .82) 48%, rgba(116, 67, 5, .76));
  clip-path: none;
}

.patch-deal-bag-visual b::after {
  position: absolute;
  z-index: 3;
  top: 2px;
  left: 50%;
  width: 52px;
  height: 20px;
  border-top: 3px solid rgba(82, 47, 4, .88);
  border-right: 2px solid rgba(82, 47, 4, .88);
  border-left: 2px solid rgba(82, 47, 4, .88);
  border-radius: 50%;
  content: "";
  filter: drop-shadow(0 2px 0 rgba(255, 218, 98, .38));
  transform: translateX(-50%) rotate(-2deg);
}

/* Finales Beutel-Asset: organische Stoffform statt CSS-Konstruktion. */
.patch-deal-bag-visual {
  width: 104px;
  height: 96px;
  background: url("assets/patch-loot-bag-v2.png") center / contain no-repeat;
  opacity: .9;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .34));
}

.patch-deal-bag-visual b {
  display: none;
}

.patch-deal-bag-visual i {
  z-index: 2;
}

/* Antwortanimation: Muenzen fallen nacheinander hinein, der Stoff federt nach. */
.patch-deal-bag[data-step] .patch-deal-bag-visual {
  background: none;
  opacity: 1;
  filter: none;
  transform: none;
  animation: none;
}

.patch-deal-bag-visual::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: url("assets/patch-loot-bag-v2.png") center / contain no-repeat;
  content: "";
  opacity: .9;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .34));
  transform-origin: 50% 82%;
}

.patch-deal-bag .patch-deal-bag-visual i {
  z-index: 1;
  top: 3px;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -54px) scale(.5) rotate(0deg);
  transition: none;
}

.patch-deal-bag[data-step="1"] .patch-deal-bag-visual::after { animation: patch-bag-soft-bounce-1 .7s cubic-bezier(.2,.8,.25,1); }
.patch-deal-bag[data-step="2"] .patch-deal-bag-visual::after { animation: patch-bag-soft-bounce-2 .7s cubic-bezier(.2,.8,.25,1); }
.patch-deal-bag[data-step="3"] .patch-deal-bag-visual::after { animation: patch-bag-ready .95s cubic-bezier(.2,.8,.25,1) both; }

.patch-deal-bag[data-step="1"] i:nth-of-type(1),
.patch-deal-bag[data-step="2"] i:nth-of-type(1),
.patch-deal-bag[data-step="3"] i:nth-of-type(1) { animation: patch-coin-drop-left .62s cubic-bezier(.2,.75,.25,1.15) .02s both; }
.patch-deal-bag[data-step="1"] i:nth-of-type(2),
.patch-deal-bag[data-step="2"] i:nth-of-type(2),
.patch-deal-bag[data-step="3"] i:nth-of-type(2) { animation: patch-coin-drop-right .66s cubic-bezier(.2,.75,.25,1.15) .13s both; }
.patch-deal-bag[data-step="2"] i:nth-of-type(3),
.patch-deal-bag[data-step="3"] i:nth-of-type(3) { animation: patch-coin-drop-left-high .64s cubic-bezier(.2,.75,.25,1.15) .02s both; }
.patch-deal-bag[data-step="2"] i:nth-of-type(4),
.patch-deal-bag[data-step="3"] i:nth-of-type(4) { animation: patch-coin-drop-right-high .68s cubic-bezier(.2,.75,.25,1.15) .13s both; }
.patch-deal-bag[data-step="3"] i:nth-of-type(5) { animation: patch-coin-drop-center .66s cubic-bezier(.2,.75,.25,1.15) .02s both; }
.patch-deal-bag[data-step="3"] i:nth-of-type(6) { animation: patch-coin-drop-crown .72s cubic-bezier(.2,.75,.25,1.15) .14s both; }

@keyframes patch-coin-drop-left {
  0% { opacity: 0; transform: translate(-50%, -58px) scale(.48) rotate(-45deg); }
  72% { opacity: 1; transform: translate(-33px, 3px) scale(1.08) rotate(-16deg); }
  100% { opacity: 1; transform: translate(-31px, 0) scale(1) rotate(-13deg); }
}
@keyframes patch-coin-drop-right {
  0% { opacity: 0; transform: translate(-50%, -66px) scale(.48) rotate(55deg); }
  72% { opacity: 1; transform: translate(8px, 5px) scale(1.08) rotate(18deg); }
  100% { opacity: 1; transform: translate(7px, 2px) scale(1) rotate(15deg); }
}
@keyframes patch-coin-drop-left-high {
  0% { opacity: 0; transform: translate(-50%, -64px) scale(.48) rotate(35deg); }
  72% { opacity: 1; transform: translate(-42px, -17px) scale(1.08) rotate(9deg); }
  100% { opacity: 1; transform: translate(-40px, -19px) scale(1) rotate(7deg); }
}
@keyframes patch-coin-drop-right-high {
  0% { opacity: 0; transform: translate(-50%, -70px) scale(.48) rotate(-40deg); }
  72% { opacity: 1; transform: translate(17px, -16px) scale(1.08) rotate(-11deg); }
  100% { opacity: 1; transform: translate(15px, -19px) scale(1) rotate(-9deg); }
}
@keyframes patch-coin-drop-center {
  0% { opacity: 0; transform: translate(-50%, -76px) scale(.48) rotate(-30deg); }
  72% { opacity: 1; transform: translate(-17px, -32px) scale(1.08) rotate(-5deg); }
  100% { opacity: 1; transform: translate(-16px, -34px) scale(1) rotate(-4deg); }
}
@keyframes patch-coin-drop-crown {
  0% { opacity: 0; transform: translate(-50%, -82px) scale(.48) rotate(48deg); }
  72% { opacity: 1; transform: translate(5px, -38px) scale(1.08) rotate(13deg); }
  100% { opacity: 1; transform: translate(4px, -40px) scale(1) rotate(11deg); }
}
@keyframes patch-bag-soft-bounce-1 {
  0%,100% { transform: translateY(0) scale(1); }
  42% { transform: translateY(3px) scale(1.04,.96); }
  68% { transform: translateY(-2px) scale(.985,1.025); }
}
@keyframes patch-bag-soft-bounce-2 {
  0%,100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(4px) scale(1.055,.945); }
  68% { transform: translateY(-3px) scale(.98,1.035); }
}
@keyframes patch-bag-ready {
  0% { transform: scale(1); filter: drop-shadow(0 8px 10px rgba(0,0,0,.34)); }
  38% { transform: translateY(4px) scale(1.07,.94); filter: drop-shadow(0 0 15px rgba(255,207,66,.62)); }
  64% { transform: translateY(-3px) scale(.98,1.04); }
  100% { transform: scale(1.035); filter: drop-shadow(0 0 11px rgba(255,207,66,.42)); }
}

@media (prefers-reduced-motion: reduce) {
  .patch-deal-bag .patch-deal-bag-visual::after,
  .patch-deal-bag .patch-deal-bag-visual i { animation-duration: 1ms !important; animation-delay: 0ms !important; }
}