/* ============================================================
   components.css — Buttons, Karten, Toast, Slider, Loader …
   ============================================================ */

/* ---------------- Button ---------------- */
.btn {
  position: relative;
  min-height: 58px;
  padding: 16px 26px;
  border-radius: var(--r-btn);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
  transition:
    transform 0.42s var(--ease-pop),
    box-shadow 0.42s var(--ease-out),
    filter 0.3s var(--ease-out);
}
.btn--block { display: block; width: 100%; }

.btn--primary {
  color: #fff;
  background: linear-gradient(135deg, #ff7cbb 0%, var(--pink-500) 46%, #a874ff 100%);
  background-size: 160% 160%;
  background-position: 0% 50%;
  box-shadow: var(--sh-btn);
  transition:
    transform 0.42s var(--ease-pop),
    box-shadow 0.42s var(--ease-out),
    background-position 0.6s var(--ease-out);
}

/* Glanz-Sweep */
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.42) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease-out);
}
.btn__label { position: relative; display: inline-block; }

@media (hover: hover) {
  .btn--primary:hover {
    transform: translateY(-3px) scale(1.025);
    box-shadow: 0 18px 38px rgba(244, 80, 143, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    background-position: 100% 50%;
  }
  .btn--primary:hover::before { transform: translateX(120%); }
}

.btn--ghost {
  color: var(--violet-700);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  box-shadow: var(--sh-card);
  font-size: 15.5px;
}
@media (hover: hover) {
  .btn--ghost:hover {
    transform: translateY(-3px) scale(1.02);
    background: var(--glass-bg-strong);
    box-shadow: var(--sh-card-hi);
  }
}

.btn:active { transform: scale(0.955); transition-duration: 0.12s; }

/* Pop beim Erscheinen */
.btn.pop-in { animation: pop-in 0.5s var(--ease-pop) both; }
@keyframes pop-in {
  0%   { transform: scale(0.86) translateY(10px); opacity: 0; }
  60%  { transform: scale(1.04) translateY(0); opacity: 1; }
  100% { transform: scale(1); }
}

/* ---------------- Karten ---------------- */
.card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px;
  margin: 0 -2px;
}

.card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 66px;
  padding: 14px 18px;
  border-radius: var(--r-card);
  text-align: left;
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  box-shadow: var(--sh-card);
  transform: translateZ(0);
  transition:
    transform 0.4s var(--ease-pop),
    box-shadow 0.4s var(--ease-out),
    background-color 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out),
    opacity 0.3s linear;
}

.card__emoji {
  font-size: 27px;
  line-height: 1;
  flex: 0 0 auto;
  transition: transform 0.45s var(--ease-pop);
}
.card__label {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  flex: 1 1 auto;
}

.card__check {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, #4ade80, #16a34a);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.42);
  transform: scale(0) rotate(-45deg);
  opacity: 0;
  transition: transform 0.5s var(--ease-pop), opacity 0.2s linear;
}

@media (hover: hover) {
  .card:hover {
    transform: translateY(-3px) scale(1.015);
    background: var(--glass-bg-strong);
    box-shadow: var(--sh-card-hi);
  }
  .card:hover .card__emoji { transform: scale(1.16) rotate(-7deg); }
}

.card:active { transform: scale(0.97); transition-duration: 0.11s; }

.card.is-locked { pointer-events: none; }

/* Abdunkeln über filter, nicht über opacity: die stagger-in-Animation hält
   per `forwards` ein opacity:1 fest und würde jede opacity-Regel schlagen. */
.card.is-dimmed {
  filter: opacity(0.42) saturate(0.55);
  transition: filter 0.45s var(--ease-out);
}

/* korrekt gewählt */
.card.is-correct {
  background: rgba(232, 255, 240, 0.72);
  border-color: rgba(74, 222, 128, 0.75);
  box-shadow: 0 10px 30px rgba(22, 163, 74, 0.28);
  animation: card-yes 0.6s var(--ease-pop);
}
.card.is-correct .card__check { transform: scale(1) rotate(0); opacity: 1; }
@keyframes card-yes {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.045); }
  100% { transform: scale(1); }
}

/* falsch gewählt: wackeln + rot */
.card.is-wrong {
  background: rgba(255, 214, 219, 0.85);
  border-color: rgba(244, 63, 94, 0.8);
  color: #9f1239;
  box-shadow: 0 10px 30px rgba(244, 63, 94, 0.35);
  animation: card-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes card-shake {
  10%, 90% { transform: translateX(-3px) rotate(-1deg); }
  20%, 80% { transform: translateX(5px) rotate(1.4deg); }
  30%, 50%, 70% { transform: translateX(-8px) rotate(-2deg); }
  40%, 60% { transform: translateX(8px) rotate(2deg); }
}

/* Rausfliegen + Platz schließen laufen als EINE Animationsliste.
   Zwei getrennte Regeln würden sich gegenseitig überschreiben, weil beide
   Klassen gleichzeitig gesetzt werden und `animation` keine Shorthand-Merge kennt. */
.card.is-ejected {
  pointer-events: none;
  animation:
    card-eject 0.72s cubic-bezier(0.5, -0.35, 0.75, 0.2) forwards,
    card-collapse 0.4s var(--ease-out) 0.42s forwards;
}
@keyframes card-eject {
  0%   { transform: translate3d(0, 0, 0) rotate(0) scale(1); opacity: 1; }
  30%  { transform: translate3d(-14px, 8px, 0) rotate(-5deg) scale(0.96); opacity: 1; }
  100% { transform: translate3d(130vw, -34vh, 0) rotate(38deg) scale(0.72); opacity: 0; }
}
/* kein opacity hier — das macht card-eject; sonst gewinnt die letzte Animation der Liste */
@keyframes card-collapse {
  to { min-height: 0; height: 0; padding-block: 0; margin-top: -10px; }
}

/* Rauchwolke */
.puff {
  position: fixed;
  z-index: 55;
  pointer-events: none;
  font-size: 34px;
  line-height: 1;
  opacity: 0;
  will-change: transform, opacity;
  animation: puff 0.95s var(--ease-out) forwards;
}
@keyframes puff {
  0%   { transform: translate(-50%, -50%) scale(0.4) rotate(0); opacity: 0; }
  25%  { opacity: 0.95; }
  100% { transform: translate(-50%, -160%) scale(2.1) rotate(18deg); opacity: 0; }
}

/* ---------------- Toast ---------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--pad-bot) + 24px);
  z-index: 70;
  width: min(420px, calc(100vw - 36px));
  padding: 16px 20px;
  border-radius: var(--r-card);
  text-align: center;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 16px 40px rgba(120, 40, 120, 0.24);
  transform: translate(-50%, 26px) scale(0.94);
  opacity: 0;
  transition:
    transform 0.5s var(--ease-pop),
    opacity 0.35s var(--ease-out);
}
.toast.is-open { transform: translate(-50%, 0) scale(1); opacity: 1; }
.toast__title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.toast__text  { margin-top: 5px; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); white-space: pre-line; }

/* ---------------- Ergebnis-Panel ---------------- */
.result {
  text-align: center;
  padding: 4px 0 14px;
  animation: rise 0.55s var(--ease-pop) both;
}
.result__title { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.result__note  { margin-top: 4px; font-size: 14px; color: var(--ink-soft); }
@keyframes rise {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* ---------------- Slider ---------------- */
.slider-panel {
  border-radius: var(--r-card);
  padding: 30px 24px 22px;
  margin: 8px 0;
}

.slider-bubble {
  width: 78px; height: 78px;
  margin: 0 auto 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
  background: linear-gradient(140deg, #ff7cbb, var(--pink-500) 50%, #a874ff);
  box-shadow: 0 12px 28px rgba(244, 80, 143, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.45s var(--ease-pop);
}
.slider-bubble.bump { animation: bubble-bump 0.4s var(--ease-pop); }
@keyframes bubble-bump {
  0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1); }
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--pink-400) var(--fill, 67%), rgba(255, 255, 255, 0.6) var(--fill, 67%));
  box-shadow: inset 0 1px 3px rgba(120, 40, 120, 0.18);
  outline: none;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--pink-500);
  box-shadow: 0 5px 14px rgba(244, 80, 143, 0.5);
  transition: transform 0.25s var(--ease-pop);
}
.slider:active::-webkit-slider-thumb { transform: scale(1.22); }
.slider::-moz-range-thumb {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--pink-500);
  box-shadow: 0 5px 14px rgba(244, 80, 143, 0.5);
}
.slider-scale {
  display: flex; justify-content: space-between;
  margin-top: 10px;
  font-size: 12px; font-weight: 600;
  color: var(--ink-soft);
}

/* ---------------- Loader ---------------- */
.loader {
  border-radius: var(--r-card);
  padding: 34px 26px 28px;
  text-align: center;
  animation: rise 0.5s var(--ease-pop) both;
}
.loader__emoji {
  font-size: 54px;
  line-height: 1;
  animation: bob 2.4s var(--ease-io) infinite;
}
.loader__emoji.swap { animation: emoji-swap 0.5s var(--ease-pop); }
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-9px) rotate(3deg); }
}
@keyframes emoji-swap {
  0%   { transform: scale(0.4) rotate(-30deg); opacity: 0; }
  60%  { transform: scale(1.18) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

.loader__status {
  margin: 16px 0 22px;
  font-size: 17px;
  font-weight: 500;
  min-height: 26px;
}
.loader__status.fade { animation: status-fade 0.45s var(--ease-out); }
@keyframes status-fade {
  0%  { opacity: 0; transform: translateY(8px); }
  100%{ opacity: 1; transform: none; }
}

.progress {
  height: 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 3px rgba(120, 40, 120, 0.18);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  width: 0%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, #ff9dd2, var(--pink-500) 45%, #a874ff);
  background-size: 220% 100%;
  box-shadow: 0 0 14px rgba(244, 80, 143, 0.6);
  animation: bar-shimmer 2.2s linear infinite;
}
@keyframes bar-shimmer {
  from { background-position: 0% 0; } to { background-position: 220% 0; }
}
.progress__value {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* ---------------- Score ---------------- */
.score { text-align: center; }
.score__label { font-size: 17px; font-weight: 600; color: var(--ink-soft); }
.score__value {
  font-size: clamp(52px, 16vw, 72px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1.05;
  background: linear-gradient(120deg, var(--pink-500), var(--lilac-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: score-pop 0.75s var(--ease-pop) both;
}
@keyframes score-pop {
  0%  { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  100%{ transform: scale(1); }
}

/* ---------------- Perks + Checkliste ---------------- */
.perks, .checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.perk, .check {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 54px;
  padding: 11px 17px;
  border-radius: 18px;
  font-size: 15.5px;
  font-weight: 500;
  opacity: 0;
  transform: translateX(-16px) scale(0.96);
  transition:
    transform 0.5s var(--ease-pop),
    box-shadow 0.35s var(--ease-out),
    opacity 0.4s var(--ease-out);
}
.perk.in, .check.in { opacity: 1; transform: none; }
.perk__emoji { font-size: 23px; line-height: 1; }
.check__box { font-size: 19px; color: #16a34a; line-height: 1; }

@media (hover: hover) {
  .perk:hover, .check:hover { transform: translateY(-2px) scale(1.012); box-shadow: var(--sh-card-hi); }
}
.perk:active, .check:active { transform: scale(0.985); }

/* ---------------- Unterschrift ---------------- */
.sign { animation: rise 0.55s var(--ease-pop) both; }
.sign__title {
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 10px;
}
.sign__pad {
  position: relative;
  height: clamp(120px, 20vh, 168px);
  border-radius: var(--r-card);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.6);
}
.sign__pad canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}
.sign__line {
  position: absolute;
  left: 24px; right: 24px; bottom: 30px;
  height: 2px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(155, 107, 255, 0.4) 0 8px, transparent 8px 14px);
  pointer-events: none;
}
.sign__hint {
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  opacity: 0.75;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}
.sign__hint.gone { opacity: 0; }
.sign__clear {
  position: absolute;
  top: 8px; right: 8px;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 16px;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 3px 10px rgba(120, 40, 120, 0.14);
  transition: transform 0.35s var(--ease-pop);
}
.sign__clear:active { transform: scale(0.88) rotate(-90deg); }