:root {
  --am-bg-overlay: rgba(11, 18, 32, 0.56);
  --am-surface: #f3f2e7;
  --am-ink: #0b1220;
  --am-muted: rgba(11, 18, 32, 0.66);
  --am-gold: #c8a450;
  --ach-gold-1: #C9A24A; /* warmes Gold */
  --ach-gold-2: #D9C07A; /* helleres Gold */
  --ach-gold-3: #B88B2E; /* dunkleres Gold */
  --ach-gold-glow: rgba(217, 192, 122, 0.45);
  --am-radius: 18px;
  --am-shadow: 0 26px 70px rgba(0, 0, 0, 0.34);
  --am-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --am-ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
  --am-dur-fast: 180ms;
  --am-dur-med: 320ms;
  --am-dur-slow: 560ms;
}

/* Premium achievement mode (scoped to #modal.am-modal so other modals stay unchanged). */
#modal.am-modal {
  background: var(--am-bg-overlay);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
  backdrop-filter: blur(12px) saturate(1.05);
}

#modal.am-modal .modal-content {
  background: var(--am-surface);
  border: 1px solid rgba(11, 18, 32, 0.11);
  border-radius: var(--am-radius);
  box-shadow: var(--am-shadow);
  width: min(460px, 92vw);
  padding: 18px 18px 16px;
  transform: translateY(18px);
  transition: transform var(--am-dur-med) var(--am-ease-emphasized), opacity var(--am-dur-fast) ease;
}

#modal.am-modal.is-open .modal-content {
  transform: translateY(0);
}

#modal.am-modal.closing .modal-content {
  transform: translateY(18px);
}

#modal.am-modal #modalClose.close {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 18, 32, 0.06);
  border: 1px solid rgba(11, 18, 32, 0.10);
  color: var(--am-ink);
  line-height: 1;
  z-index: 10;
}

#modal.am-modal #modalClose.close:hover {
  background: rgba(11, 18, 32, 0.09);
}

.achievement-modal-v2 {
  color: var(--am-ink);
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: calc(var(--am-radius) - 4px);
  transition: opacity var(--am-dur-fast) ease, transform var(--am-dur-fast) var(--am-ease-standard);
}

.achievement-modal-v2::before {
  content: "";
  position: absolute;
  inset: -60px;
  pointer-events: none;
  background: radial-gradient(circle at 50% 20%, rgba(200, 164, 80, 0.14), rgba(200, 164, 80, 0.0) 60%);
  opacity: 0;
  transform: scale(0.98);
}

.achievement-modal-v2.am-play::before {
  animation: am-glow 520ms var(--am-ease-standard) 900ms both;
}

.achievement-modal-v2.am-exit {
  opacity: 0;
  transform: translateY(8px);
}

.achievement-modal-v2 .am-topline {
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 164, 80, 0.55), transparent);
  opacity: 0.55;
  z-index: 2;
}

.achievement-modal-v2 .am-inner {
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.achievement-modal-v2 .am-kicker {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--am-muted);
  margin-top: 2px;
}

.achievement-modal-v2 .am-title {
  margin: 8px 0 0;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.achievement-modal-v2 .am-subtitle {
  margin-top: 3px;
  font-weight: 600;
  color: var(--am-muted);
}

.achievement-modal-v2 .am-message {
  margin: 12px 0 0;
  max-width: 380px;
  color: rgba(11, 18, 32, 0.86);
  line-height: 1.45;
}

.achievement-modal-v2 .am-meta {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.achievement-modal-v2 .am-meta-pill {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11, 18, 32, 0.12);
  background: rgba(255, 255, 255, 0.55);
  color: rgba(11, 18, 32, 0.88);
}

.achievement-modal-v2 .am-meta-pill.am-points {
  border-color: rgba(200, 164, 80, 0.34);
  box-shadow: 0 10px 22px rgba(200, 164, 80, 0.10);
}

.achievement-modal-v2 .am-meta-pill.am-rarity {
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.achievement-modal-v2 .am-actions {
  margin-top: 16px;
}

.achievement-modal-v2 .am-hero {
  width: 100%;
  height: 132px;
  margin: 16px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: rgba(11, 18, 32, 0.95);
}

.achievement-modal-v2 .am-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.04);
}

.achievement-modal-v2 .am-hero-ico {
  width: 46px;
  height: 46px;
  color: rgba(11, 18, 32, 0.92);
}

/* ================================
   Achievement Congrats – Gold Stars
   (edel, fein, nicht zu bunt)
   ================================ */

.achievement-modal-v2 .ach-stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0; /* behind content */
}

.achievement-modal-v2 .ach-star {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 16px;
  opacity: 0.75;
  will-change: transform, opacity, filter;
  transform-origin: center center;

  color: var(--ach-gold-2);
  text-shadow: 0 0 10px var(--ach-gold-glow);
  filter: drop-shadow(0 0 6px var(--ach-gold-glow));
}

.achievement-modal-v2 .ach-star.is-css-anim {
  animation:
    ach-float var(--dur, 12s) ease-in-out infinite alternate,
    ach-twinkle var(--tw, 4s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}

@keyframes ach-float {
  from {
    transform: translate3d(var(--x, 0px), var(--y, 0px), 0) rotate(var(--r, 0deg));
  }
  to {
    transform: translate3d(
      calc(var(--x, 0px) + var(--dx, 160px)),
      calc(var(--y, 0px) + var(--dy, -120px)),
      0
    )
    rotate(calc(var(--r, 0deg) + 180deg));
  }
}

@keyframes ach-twinkle {
  from { opacity: var(--o1, 0.35); filter: drop-shadow(0 0 4px var(--ach-gold-glow)); }
  to { opacity: var(--o2, 0.85); filter: drop-shadow(0 0 10px var(--ach-gold-glow)); }
}

.achievement-modal-v2 .am-inner {
  position: relative;
  z-index: 1;
}

/* Micro motion for text/content */
.achievement-modal-v2.am-play .am-title {
  animation: am-text-in 420ms var(--am-ease-emphasized) 220ms both;
}
.achievement-modal-v2.am-play .am-subtitle {
  animation: am-text-in 420ms var(--am-ease-emphasized) 260ms both;
}
.achievement-modal-v2.am-play .am-message {
  animation: am-text-in 420ms var(--am-ease-standard) 320ms both;
}
.achievement-modal-v2.am-play .am-actions {
  animation: am-text-in 420ms var(--am-ease-emphasized) 380ms both;
}

/* TYPE: checkin — Pin drop + ripple */
.am-hero-checkin .am-pin-wrap {
  width: 132px;
  height: 132px;
  position: relative;
  display: grid;
  place-items: center;
}

.am-hero-checkin .am-checkin-thumb {
  position: absolute;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.50);
  border: 1px solid rgba(11, 18, 32, 0.12);
  box-shadow: 0 18px 44px rgba(11, 18, 32, 0.12);
  opacity: 0.92;
}

.am-hero-checkin .am-checkin-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.05);
}

.am-hero-checkin .am-pin {
  width: 66px;
  height: 66px;
  filter: drop-shadow(0 16px 34px rgba(11, 18, 32, 0.16));
  position: relative;
  z-index: 2;
}

.am-hero-checkin .am-ripple {
  position: absolute;
  left: 50%;
  top: 68%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(200, 164, 80, 0.75);
  opacity: 0;
  z-index: 1;
}

.achievement-modal-v2.am-play.am-type-checkin .am-checkin-thumb {
  animation: am-thumb-in 520ms var(--am-ease-emphasized) 250ms both;
}
.achievement-modal-v2.am-play.am-type-checkin .am-pin {
  animation: am-pin-drop 650ms var(--am-ease-emphasized) 250ms both;
}
.achievement-modal-v2.am-play.am-type-checkin .am-ripple {
  animation: am-ripple 520ms var(--am-ease-standard) 520ms both;
}

/* TYPE: citystamp — Stamp slam */
.am-hero-citystamp .am-stamp {
  width: 156px;
  height: 112px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.20));
  border: 1px solid rgba(11, 18, 32, 0.13);
  box-shadow: 0 18px 44px rgba(11, 18, 32, 0.18);
  display: grid;
  place-items: center;
  position: relative;
}

.am-hero-citystamp .am-stamp-face {
  width: 112px;
  height: 76px;
  border-radius: 14px;
  border: 1px dashed rgba(11, 18, 32, 0.22);
  overflow: hidden;
  background: rgba(243, 242, 231, 0.70);
  display: grid;
  place-items: center;
}

.am-hero-citystamp .am-stamp-edge {
  position: absolute;
  inset: 8px;
  border-radius: 16px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(200, 164, 80, 0.20);
  opacity: 0.7;
}

.am-hero-citystamp .am-stamp::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 16px;
  pointer-events: none;
  box-shadow: 0 12px 22px rgba(11, 18, 32, 0.22);
  filter: blur(1.2px);
  opacity: 0;
}

.achievement-modal-v2.am-play.am-type-citystamp .am-stamp {
  animation: am-stamp-slam 650ms var(--am-ease-emphasized) 250ms both;
}

.achievement-modal-v2.am-play.am-type-citystamp .am-stamp::after {
  animation: am-ink-bleed 420ms var(--am-ease-standard) 520ms both;
}

/* TYPE: regioaward — Award assemble + spotlight sweep + sparkles */
.am-hero-regioaward .am-award {
  width: 164px;
  height: 124px;
  position: relative;
}

.am-hero-regioaward .am-award-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.am-hero-regioaward .am-award-layer.frame {
  width: 140px;
  height: 104px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(11, 18, 32, 0.14);
  box-shadow: 0 18px 44px rgba(11, 18, 32, 0.14);
}

.am-hero-regioaward .am-award-layer.icon {
  width: 74px;
  height: 74px;
  border-radius: 18px;
  background: rgba(243, 242, 231, 0.72);
  border: 1px solid rgba(11, 18, 32, 0.12);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.am-hero-regioaward .am-award-layer.plaque {
  width: 92px;
  height: 18px;
  border-radius: 999px;
  background: rgba(200, 164, 80, 0.13);
  border: 1px solid rgba(200, 164, 80, 0.32);
  top: 84%;
}

.am-hero-regioaward .am-sweep {
  position: absolute;
  inset: -20px;
  background: linear-gradient(120deg, transparent, rgba(200, 164, 80, 0.22), transparent);
  transform: translateX(-70%) rotate(12deg);
  opacity: 0;
  pointer-events: none;
}

.am-hero-regioaward .am-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.am-hero-regioaward .am-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 164, 80, 0.95), rgba(200, 164, 80, 0.0) 70%);
  opacity: 0;
  filter: blur(0.1px);
}

.am-hero-regioaward .am-spark.s1 { left: 20%; top: 28%; }
.am-hero-regioaward .am-spark.s2 { left: 78%; top: 24%; }
.am-hero-regioaward .am-spark.s3 { left: 16%; top: 70%; }
.am-hero-regioaward .am-spark.s4 { left: 84%; top: 66%; }
.am-hero-regioaward .am-spark.s5 { left: 50%; top: 16%; }
.am-hero-regioaward .am-spark.s6 { left: 52%; top: 78%; }

.achievement-modal-v2.am-play.am-type-regioaward .am-award-layer.frame {
  animation: am-award-in 520ms var(--am-ease-emphasized) 250ms both;
}
.achievement-modal-v2.am-play.am-type-regioaward .am-award-layer.icon {
  animation: am-award-in 520ms var(--am-ease-emphasized) 340ms both;
}
.achievement-modal-v2.am-play.am-type-regioaward .am-award-layer.plaque {
  animation: am-award-in 520ms var(--am-ease-emphasized) 420ms both;
}
.achievement-modal-v2.am-play.am-type-regioaward .am-sweep {
  animation: am-sweep 520ms var(--am-ease-standard) 900ms both;
}
.achievement-modal-v2.am-play.am-type-regioaward .am-spark {
  animation: am-sparkle 520ms var(--am-ease-standard) 900ms both;
}
.achievement-modal-v2.am-play.am-type-regioaward .am-spark.s2 { animation-delay: 940ms; }
.achievement-modal-v2.am-play.am-type-regioaward .am-spark.s3 { animation-delay: 980ms; }
.achievement-modal-v2.am-play.am-type-regioaward .am-spark.s4 { animation-delay: 1020ms; }
.achievement-modal-v2.am-play.am-type-regioaward .am-spark.s5 { animation-delay: 960ms; }
.achievement-modal-v2.am-play.am-type-regioaward .am-spark.s6 { animation-delay: 1040ms; }

/* TYPE: collection_complete — Progress ring finish */
.am-hero-collection .am-ring {
  width: 140px;
  height: 140px;
  position: relative;
  display: grid;
  place-items: center;
}

.am-hero-collection .am-ring-svg {
  width: 132px;
  height: 132px;
  position: relative;
  z-index: 1;
}

.am-hero-collection .am-ring-center {
  position: absolute;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.50);
  border: 1px solid rgba(11, 18, 32, 0.12);
  box-shadow: 0 18px 44px rgba(11, 18, 32, 0.12);
  display: grid;
  place-items: center;
  z-index: 2;
}

.am-hero-collection .am-ring-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.04);
}

.am-hero-collection .am-ring-center .am-hero-ico {
  width: 34px;
  height: 34px;
  opacity: 0.92;
}

.am-hero-collection .am-ring-track,
.am-hero-collection .am-ring-progress {
  fill: none;
  stroke-width: 4.6;
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(-90deg);
}

.am-hero-collection .am-ring-track {
  stroke: rgba(11, 18, 32, 0.13);
}

.am-hero-collection .am-ring-progress {
  stroke: rgba(200, 164, 80, 0.92);
  stroke-linecap: round;
}

.am-hero-collection .am-ring-check {
  fill: none;
  stroke: rgba(11, 18, 32, 0.92);
  stroke-width: 4.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform-origin: center;
  transform: scale(0.98);
}

.am-hero-collection .am-ring-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 164, 80, 0.18), rgba(200, 164, 80, 0.0) 62%);
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
  z-index: 0;
}

.achievement-modal-v2.am-play.am-type-collection_complete .am-ring {
  animation: am-ring-snap 720ms var(--am-ease-emphasized) 250ms both;
}
.achievement-modal-v2.am-play.am-type-collection_complete .am-ring-center {
  animation: am-thumb-in 520ms var(--am-ease-emphasized) 250ms both;
}
.achievement-modal-v2.am-play.am-type-collection_complete .am-ring-progress {
  animation: am-ring 650ms var(--am-ease-emphasized) 250ms both;
}
.achievement-modal-v2.am-play.am-type-collection_complete .am-ring-check {
  animation: am-check 260ms var(--am-ease-emphasized) 860ms both;
}
.achievement-modal-v2.am-play.am-type-collection_complete .am-ring-glow {
  animation: am-glow-pulse 520ms var(--am-ease-standard) 900ms both;
}

/* TYPE: freebadge — Sticker peel */
.am-hero-freebadge .am-sticker {
  width: 132px;
  height: 132px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(11, 18, 32, 0.13);
  box-shadow: 0 18px 44px rgba(11, 18, 32, 0.18);
  position: relative;
  overflow: hidden;
  transform-origin: 18% 18%;
}

.am-hero-freebadge .am-sticker-face {
  position: absolute;
  inset: 12px;
  border-radius: 18px;
  background: rgba(243, 242, 231, 0.72);
  border: 1px solid rgba(11, 18, 32, 0.10);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.am-hero-freebadge .am-sticker-corner {
  position: absolute;
  width: 46px;
  height: 46px;
  left: -2px;
  top: -2px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.12));
  border-right: 1px solid rgba(11, 18, 32, 0.10);
  border-bottom: 1px solid rgba(11, 18, 32, 0.10);
  transform-origin: 0% 0%;
  transform: rotate(0deg);
  box-shadow: 10px 12px 18px rgba(11, 18, 32, 0.10);
  opacity: 0;
}

.achievement-modal-v2.am-play.am-type-freebadge .am-sticker {
  animation: am-sticker-in 650ms var(--am-ease-emphasized) 250ms both;
}

.achievement-modal-v2.am-play.am-type-freebadge .am-sticker-corner {
  animation: am-sticker-peel 520ms var(--am-ease-emphasized) 520ms both;
}

/* Keyframes */
@keyframes am-text-in {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes am-glow {
  0% { opacity: 0; transform: scale(0.98); }
  60% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.55; transform: scale(1); }
}

@keyframes am-pin-drop {
  0% { opacity: 0; transform: translateY(-16px) scale(0.98); }
  60% { opacity: 1; }
  80% { transform: translateY(2px) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes am-ripple {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  18% { opacity: 0.55; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.85); }
}

@keyframes am-thumb-in {
  0% { opacity: 0; transform: scale(0.98); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes am-stamp-slam {
  0% { opacity: 0; transform: translateY(-20px) rotate(-8deg) scale(1.06); }
  55% { opacity: 1; }
  70% { transform: translateY(2px) rotate(-2deg) scale(1); }
  84% { transform: translateY(0) rotate(-3.4deg) scale(1); }
  90% { transform: translate(1px, 0) rotate(-3.1deg) scale(1); }
  96% { transform: translate(-1px, 0) rotate(-3.25deg) scale(1); }
  100% { opacity: 1; transform: translateY(0) rotate(-3.2deg) scale(1); }
}

@keyframes am-ink-bleed {
  0% { opacity: 0; }
  45% { opacity: 0.30; }
  100% { opacity: 0.16; }
}

@keyframes am-award-in {
  0% { opacity: 0; transform: translate(-50%, -46%) scale(0.98); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes am-sweep {
  0% { opacity: 0; transform: translateX(-70%) rotate(12deg); }
  18% { opacity: 0.6; }
  100% { opacity: 0; transform: translateX(70%) rotate(12deg); }
}

@keyframes am-sparkle {
  0% { opacity: 0; transform: scale(0.65); }
  30% { opacity: 0.85; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.25); }
}

@keyframes am-ring {
  0% { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 0; }
}

@keyframes am-check {
  0% { opacity: 0; transform: scale(0.98); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes am-glow-pulse {
  0% { opacity: 0; transform: scale(0.96); }
  40% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.25; transform: scale(1.02); }
}

@keyframes am-ring-snap {
  0% { transform: scale(0.985); }
  70% { transform: scale(1.01); }
  100% { transform: scale(1); }
}

@keyframes am-sticker-in {
  0% { opacity: 0; transform: translateY(-14px) rotate(-2deg) scale(1.04); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}

@keyframes am-sticker-peel {
  0% { opacity: 0; transform: rotate(0deg); }
  20% { opacity: 1; transform: rotate(-16deg); }
  70% { opacity: 1; transform: rotate(-7deg); }
  100% { opacity: 1; transform: rotate(0deg); }
}

/* Reduced motion: fade only, no transforms/keyframes. */
@media (prefers-reduced-motion: reduce) {
  #modal.am-modal {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  #modal.am-modal .modal-content {
    transform: none !important;
    transition: opacity 180ms ease !important;
  }

  .achievement-modal-v2 {
    transform: none !important;
    transition: opacity 160ms ease !important;
  }

  .achievement-modal-v2 * {
    animation: none !important;
  }

  .achievement-modal-v2::before {
    opacity: 0.25 !important;
    transform: none !important;
  }

  .am-hero-checkin .am-ripple,
  .achievement-modal-v2 .ach-stars,
  .am-hero-regioaward .am-sparkles {
    display: none !important;
  }
}