@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Rouge+Script&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap");

:root {
  --bg:      #0b0b0f;
  --bg-alt:  #161418;
  --fg:      #504054;
  --muted:   #3a2b4f;
  --accent:  #ff4d57;
  --accent-2:#d81f2a;
  --card:    #d9eaf8;
  --border:  rgba(44, 20, 65, 0.28);
  --shadow:  0 18px 40px rgba(5, 2, 3, 0.6);
}

* {
  box-sizing: border-box;
}

button,
input,
select,
textarea {
  font: inherit;
}

body {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  background-image: linear-gradient(
    to left bottom,
    #9769a8, #b06cab, #c86fa7, #d76ca4, #ea719c,
    #f47892, #fb8189, #ff8b80, #ff9976, #ffa86d, #ffb967, #ffca65
  );
  color: var(--fg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 18px 48px;
}

.wrap {
  width: min(1400px, 100%);
  display: grid;
  gap: 24px;
}

header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

h1 {
  margin: 0;
  font-size: clamp(2rem, 3.8vw, 3rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.panel {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.52)),
    linear-gradient(
      to right top,
      #9769a8, #b06cab, #c86fa7, #d76ca4, #ea719c,
      #f47892, #fb8189, #ff8b80, #ff9976, #ffa86d, #ffb967, #ffca65
    );
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow);
}

.picker {
  display: grid;
  gap: 18px;
  justify-items: center;
  text-align: center;
}

.players {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.player-btn {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.32);
  color: var(--fg);
  padding: 10px 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.player-btn.active {
  background: linear-gradient(120deg, rgba(207, 143, 224, 0.22), rgba(143, 100, 173, 0.25));
  border-color: rgba(207, 143, 224, 0.55);
  transform: translateY(-1px);
}

.roll-zone {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.roll-btn {
  border: none;
  padding: 14px 26px;
  background: linear-gradient(135deg, #cf8fe0, #8f64ad);
  color: #131724;
  font-weight: 800;
  font-size: 1rem;
  border-radius: 14px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: 0 12px 24px rgba(207, 143, 224, 0.3);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.roll-btn:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 16px 28px rgba(207, 143, 224, 0.38);
}

.roll-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.reset-btn {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.3);
  color: var(--fg);
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.reset-btn:hover {
  border-color: rgba(207, 143, 224, 0.6);
  color: #504054;
}

.skip-btn {
  border: 1px solid rgba(196, 55, 89, 0.8);
  background: rgba(196, 55, 89, 0.22);
  color: #504054;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.skip-btn:hover:not(:disabled) {
  border-color: rgba(196, 55, 89, 0.92);
  background: rgba(196, 55, 89, 0.32);
}

.skip-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.status {
  min-height: 20px;
  font-size: 0.95rem;
  color: var(--muted);
}

.status.blocked {
  color: #ff9aa0;
  font-weight: 600;
}

/* ─── Cursor-Sparkle ─────────────────────────────────────────────────────── */

.cursor-trail {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.cursor-spark {
  position: fixed;
  left: 0;
  top: 0;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 72%);
  box-shadow: 0 0 14px rgba(255, 243, 177, 0.95), 0 0 24px rgba(250, 112, 225, 0.7);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  animation: cursor-spark-fade 1500ms ease-out forwards;
}

@keyframes cursor-spark-fade {
  0%   { opacity: 0.95; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(1); }
  100% { opacity: 0;    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -34px))) scale(0.1); }
}

/* ─── Spray ──────────────────────────────────────────────────────────────── */

.spray {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.8s ease;
  z-index: 10;
  backdrop-filter: blur(2px);
}

.spray.show    { opacity: 1; visibility: visible; }
.spray.fadeout { opacity: 0; }

.spray-burst {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 77, 87, 0.9), rgba(12, 15, 26, 0) 70%);
  filter: blur(3px);
  transform: scale(0.4);
  opacity: 0;
}

.spray.show .spray-burst {
  animation: burst 0.9s ease-out forwards;
}

.spray-card {
  background: rgba(9, 12, 22, 0.9);
  border: 2px solid rgba(255, 77, 87, 0.8);
  border-radius: 26px;
  padding: 26px 30px;
  display: grid;
  gap: 12px;
  align-items: center;
  text-align: center;
  box-shadow: 0 30px 70px rgba(20, 6, 8, 0.7);
  transform: translateY(18px) scale(0.86);
  opacity: 0;
  position: relative;
  z-index: 2;
}

.spray.show .spray-card {
  animation: pop 2.2s ease-out forwards, shake 2.2s ease-in-out forwards;
}

.spray-card img {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 18px;
  border: 2px solid rgba(255, 255, 255, 0.15);
}

.spray-name {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.spray-particles,
.spray-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.spray-confetti {
  z-index: 4;
  overflow: visible;
  mix-blend-mode: screen;
}

.spray-particles span {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 77, 87, 0.65);
  opacity: 0;
}

.spray.show .spray-particles span {
  animation: spray 0.9s ease-out forwards;
}

.spray-particles span:nth-child(1) { left: 42%; top: 30%; animation-delay: 0.05s; }
.spray-particles span:nth-child(2) { left: 55%; top: 35%; animation-delay: 0.08s; }
.spray-particles span:nth-child(3) { left: 38%; top: 45%; animation-delay: 0.12s; }
.spray-particles span:nth-child(4) { left: 60%; top: 46%; animation-delay: 0.16s; }
.spray-particles span:nth-child(5) { left: 46%; top: 55%; animation-delay: 0.20s; }

.spray-confetti span {
  position: absolute;
  width: 12px;
  height: 22px;
  background: rgba(255, 184, 77, 0.95);
  opacity: 0;
  display: block;
  left: 50%;
  top: 60%;
  filter: drop-shadow(0 0 8px rgba(90, 170, 255, 0.45));
  transform: translate(-50%, -50%) translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg));
  will-change: transform, opacity;
}

.spray-confetti span:nth-child(3n) { background: rgba(90,  170, 255, 0.9); }
.spray-confetti span:nth-child(4n) { background: rgba(120, 255, 196, 0.9); }

.spray.show .spray-confetti span { opacity: 1; }

@keyframes pop {
  0%   { transform: translateY(24px) scale(0.78) rotate(-2deg); opacity: 0; }
  20%  { opacity: 1; }
  45%  { transform: translateY(0)    scale(1.07) rotate(2deg);  opacity: 1; }
  60%  { transform: translateY(0)    scale(1.03) rotate(-2deg); opacity: 1; }
  75%  { transform: translateY(-6px) scale(1.02) rotate(1.5deg);opacity: 1; }
  100% { transform: translateY(-10px)scale(1)    rotate(0deg);  opacity: 0; }
}

@keyframes shake {
  0%   { transform: translateY(24px) scale(0.78) rotate(0deg);  }
  20%  { transform: translateY(0)    scale(1.05) rotate(-3deg); }
  35%  { transform: translateY(0)    scale(1.05) rotate(3deg);  }
  50%  { transform: translateY(-2px) scale(1.03) rotate(-2deg); }
  65%  { transform: translateY(-4px) scale(1.02) rotate(2deg);  }
  80%  { transform: translateY(-8px) scale(1.01) rotate(-1deg); }
  100% { transform: translateY(-10px)scale(1)    rotate(0deg);  }
}

@keyframes burst {
  0%   { transform: scale(0.35); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: scale(1.8);  opacity: 0; }
}

@keyframes spray {
  0%   { transform: scale(0.2);                        opacity: 0; }
  40%  {                                               opacity: 1; }
  100% { transform: scale(1.4) translateY(-18px);      opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .spray.show .spray-burst,
  .spray.show .spray-card,
  .spray.show .spray-particles span,
  .spray.show .spray-confetti span {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ─── Modal ──────────────────────────────────────────────────────────────── */

.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(5, 5, 8, 0.7);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 12;
}

.modal.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-card {
  width: min(420px, 92vw);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 14px;
}

.modal-card h2 {
  margin: 0;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.modal-card input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(10, 10, 14, 0.6);
  color: var(--fg);
  font-size: 1rem;
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.modal-actions .reset-btn {
  border-color: rgba(255, 77, 87, 0.6);
  color: #ffd3d6;
}

.modal-error {
  color: #ff9aa0;
  font-size: 0.95rem;
  min-height: 18px;
}

/* ─── Spieler-Karten ─────────────────────────────────────────────────────── */

.lists {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 16px;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
    linear-gradient(
      to right top,
      #9769a8, #b06cab, #c86fa7, #d76ca4, #ea719c,
      #f47892, #fb8189, #ff8b80, #ff9976, #ffa86d, #ffb967, #ffca65
    );
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 10px 24px rgba(18, 8, 30, 0.35);
}

.card > * {
  position: relative;
  z-index: 1;
}

/* Felix-Karte: Blumenmuster als ::before, große Blume oben rechts als ::after */
.card-felix::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.62;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='%23ffd3ea'%3E%3Ccircle cx='22' cy='10' r='6'/%3E%3Ccircle cx='33' cy='18' r='6'/%3E%3Ccircle cx='29' cy='31' r='6'/%3E%3Ccircle cx='15' cy='31' r='6'/%3E%3Ccircle cx='11' cy='18' r='6'/%3E%3C/g%3E%3Ccircle cx='22' cy='22' r='5.5' fill='%23ffd86a'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg fill='%23e7ddff'%3E%3Ccircle cx='18' cy='8' r='4.6'/%3E%3Ccircle cx='27' cy='14' r='4.6'/%3E%3Ccircle cx='24' cy='25' r='4.6'/%3E%3Ccircle cx='12' cy='25' r='4.6'/%3E%3Ccircle cx='9' cy='14' r='4.6'/%3E%3C/g%3E%3Ccircle cx='18' cy='18' r='4.2' fill='%23ffe8a3'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg fill='%23e8ffd9'%3E%3Ccircle cx='15' cy='6.8' r='3.9'/%3E%3Ccircle cx='22' cy='11.5' r='3.9'/%3E%3Ccircle cx='19.5' cy='20' r='3.9'/%3E%3Ccircle cx='10.5' cy='20' r='3.9'/%3E%3Ccircle cx='8' cy='11.5' r='3.9'/%3E%3C/g%3E%3Ccircle cx='15' cy='15' r='3.6' fill='%23ffe99b'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='%23ffd3ea'%3E%3Ccircle cx='22' cy='10' r='6'/%3E%3Ccircle cx='33' cy='18' r='6'/%3E%3Ccircle cx='29' cy='31' r='6'/%3E%3Ccircle cx='15' cy='31' r='6'/%3E%3Ccircle cx='11' cy='18' r='6'/%3E%3C/g%3E%3Ccircle cx='22' cy='22' r='5.5' fill='%23ffd86a'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg fill='%23e7ddff'%3E%3Ccircle cx='18' cy='8' r='4.6'/%3E%3Ccircle cx='27' cy='14' r='4.6'/%3E%3Ccircle cx='24' cy='25' r='4.6'/%3E%3Ccircle cx='12' cy='25' r='4.6'/%3E%3Ccircle cx='9' cy='14' r='4.6'/%3E%3C/g%3E%3Ccircle cx='18' cy='18' r='4.2' fill='%23ffe8a3'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg fill='%23e8ffd9'%3E%3Ccircle cx='15' cy='6.8' r='3.9'/%3E%3Ccircle cx='22' cy='11.5' r='3.9'/%3E%3Ccircle cx='19.5' cy='20' r='3.9'/%3E%3Ccircle cx='10.5' cy='20' r='3.9'/%3E%3Ccircle cx='8' cy='11.5' r='3.9'/%3E%3C/g%3E%3Ccircle cx='15' cy='15' r='3.6' fill='%23ffe99b'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg fill='%23e8ffd9'%3E%3Ccircle cx='15' cy='6.8' r='3.9'/%3E%3Ccircle cx='22' cy='11.5' r='3.9'/%3E%3Ccircle cx='19.5' cy='20' r='3.9'/%3E%3Ccircle cx='10.5' cy='20' r='3.9'/%3E%3Ccircle cx='8' cy='11.5' r='3.9'/%3E%3C/g%3E%3Ccircle cx='15' cy='15' r='3.6' fill='%23ffe99b'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='%23ffd3ea'%3E%3Ccircle cx='22' cy='10' r='6'/%3E%3Ccircle cx='33' cy='18' r='6'/%3E%3Ccircle cx='29' cy='31' r='6'/%3E%3Ccircle cx='15' cy='31' r='6'/%3E%3Ccircle cx='11' cy='18' r='6'/%3E%3C/g%3E%3Ccircle cx='22' cy='22' r='5.5' fill='%23ffd86a'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg fill='%23f8e7ff'%3E%3Ccircle cx='13' cy='5.8' r='3.2'/%3E%3Ccircle cx='19.2' cy='10.1' r='3.2'/%3E%3Ccircle cx='16.8' cy='17.5' r='3.2'/%3E%3Ccircle cx='9.2' cy='17.5' r='3.2'/%3E%3Ccircle cx='6.8' cy='10.1' r='3.2'/%3E%3C/g%3E%3Ccircle cx='13' cy='13' r='2.9' fill='%23ffe39b'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%23ffe4f3'%3E%3Ccircle cx='12' cy='5.4' r='2.9'/%3E%3Ccircle cx='17.2' cy='9' r='2.9'/%3E%3Ccircle cx='15.3' cy='15.4' r='2.9'/%3E%3Ccircle cx='8.7' cy='15.4' r='2.9'/%3E%3Ccircle cx='6.8' cy='9' r='2.9'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%23ffe49f'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%23e5e1ff'%3E%3Ccircle cx='12' cy='5.4' r='2.9'/%3E%3Ccircle cx='17.2' cy='9' r='2.9'/%3E%3Ccircle cx='15.3' cy='15.4' r='2.9'/%3E%3Ccircle cx='8.7' cy='15.4' r='2.9'/%3E%3Ccircle cx='6.8' cy='9' r='2.9'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%23ffe3a1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%23e7ffe2'%3E%3Ccircle cx='12' cy='5.4' r='2.9'/%3E%3Ccircle cx='17.2' cy='9' r='2.9'/%3E%3Ccircle cx='15.3' cy='15.4' r='2.9'/%3E%3Ccircle cx='8.7' cy='15.4' r='2.9'/%3E%3Ccircle cx='6.8' cy='9' r='2.9'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%23ffe3a1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%23ffe4f3'%3E%3Ccircle cx='12' cy='5.4' r='2.9'/%3E%3Ccircle cx='17.2' cy='9' r='2.9'/%3E%3Ccircle cx='15.3' cy='15.4' r='2.9'/%3E%3Ccircle cx='8.7' cy='15.4' r='2.9'/%3E%3Ccircle cx='6.8' cy='9' r='2.9'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%23ffe49f'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%23e5e1ff'%3E%3Ccircle cx='12' cy='5.4' r='2.9'/%3E%3Ccircle cx='17.2' cy='9' r='2.9'/%3E%3Ccircle cx='15.3' cy='15.4' r='2.9'/%3E%3Ccircle cx='8.7' cy='15.4' r='2.9'/%3E%3Ccircle cx='6.8' cy='9' r='2.9'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%23ffe3a1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%23e7ffe2'%3E%3Ccircle cx='12' cy='5.4' r='2.9'/%3E%3Ccircle cx='17.2' cy='9' r='2.9'/%3E%3Ccircle cx='15.3' cy='15.4' r='2.9'/%3E%3Ccircle cx='8.7' cy='15.4' r='2.9'/%3E%3Ccircle cx='6.8' cy='9' r='2.9'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%23ffe3a1'/%3E%3C/svg%3E"),
    linear-gradient(140deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  background-size:
    62px 62px, 44px 44px, 34px 34px,
    54px 54px, 40px 40px, 30px 30px,
    48px 48px, 36px 36px, 28px 28px,
    26px 26px,
    22px 22px, 20px 20px, 21px 21px,
    18px 18px, 19px 19px, 17px 17px,
    auto;
  background-position:
    8% 12%, 86% 18%, 18% 24%,
    72% 40%, 32% 36%, 10% 46%,
    52% 14%, 86% 28%, 44% 32%,
    14px 22px,
    24% 22%, 66% 30%, 78% 44%,
    22% 52%, 58% 20%, 76% 34%,
    0 0;
  background-repeat: no-repeat;
}

.card-felix::after {
  content: "";
  position: absolute;
  right: -16px;
  top: -20px;
  width: 120px;
  height: 120px;
  pointer-events: none;
  border-radius: 24px;
  opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23ffe3f2'%3E%3Ccircle cx='60' cy='25' r='14'/%3E%3Ccircle cx='85' cy='42' r='14'/%3E%3Ccircle cx='75' cy='70' r='14'/%3E%3Ccircle cx='45' cy='70' r='14'/%3E%3Ccircle cx='35' cy='42' r='14'/%3E%3C/g%3E%3Ccircle cx='60' cy='52' r='13' fill='%23ffd36e'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.card h2 {
  margin: 0 0 12px;
  font-size: 1.4rem;
  letter-spacing: 0.03em;
  text-transform: none;
  line-height: 1.15;
  min-height: 3rem;
  display: flex;
  align-items: center;
}

.card-current {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(80, 64, 82, 0.2);
}

.card-current-img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(80, 64, 82, 0.25);
  background: rgba(255, 255, 255, 0.32);
}

.card-current-meta {
  display: grid;
  gap: 2px;
}

.card-current-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.card-current-hero {
  font-weight: 700;
  color: #a66fba;
}

/* ─── Tilt-O-Meter ───────────────────────────────────────────────────────── */

.tilt-meter {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(80, 64, 82, 0.2);
  display: grid;
  gap: 8px;
}

.tilt-meter-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tilt-meter-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 700;
}

.tilt-meter-value {
  min-width: 48px;
  text-align: right;
  font-weight: 800;
  color: #a66fba;
}

.tilt-meter-input {
  width: 100%;
  accent-color: #c44ac8;
  cursor: pointer;
}

/* ─── Held-Listen ────────────────────────────────────────────────────────── */

.role-title {
  margin: 16px 0 8px;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

ul.hero-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  min-height: 42px;
  border-radius: 10px;
  background: rgba(247, 235, 239, 0.45);
  border: 1px solid rgba(169, 163, 175, 0.75);
  color: #504054;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.hero span { font-weight: 600; }

.hero.selected {
  border-color: rgba(120, 255, 160, 0.55);
  background: rgba(80, 160, 110, 0.26);
  color: #153327;
}

.hero.selected::after {
  content: "✓";
  font-size: 0.9rem;
  color: #7fe8b5;
}

.hero.latest {
  border-color: rgba(196, 182, 52, 0.92);
  background: rgba(250, 240, 112, 0.3);
  color: #504054;
}

.hero.latest::after { content: ""; }

.picked-list .hero {
  border-color: #9c60bd;
  background: rgba(215, 112, 250, 0.4);
}

.picked-list .hero::after {
  content: "✓";
  font-size: 0.9rem;
  color: #eecef5;
}

.picked-list .hero.skipped {
  border-color: rgba(196, 55, 89, 0.8);
  background: rgba(196, 55, 89, 0.22);
  color: #504054;
}

.picked-list .hero.skipped::after {
  content: "✕";
  font-size: 0.9rem;
  color: #c43759;
}

.empty {
  color: var(--muted);
  font-size: 0.9rem;
}

/* ─── Abgehakt-Sektion ───────────────────────────────────────────────────── */

.picked {
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
  padding-bottom: 12px;
}

.picked-title {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.picked-caret { transition: transform 0.2s ease; }

.picked-title.open .picked-caret { transform: rotate(90deg); }

.note {
  color: var(--muted);
  font-size: 0.96rem;
}

/* ─── Hero Dice ──────────────────────────────────────────────────────────── */

.hero-dice {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(240px, 340px);
  column-gap: 28px;
  row-gap: 14px;
  align-items: center;
}

.hero-dice h2 {
  margin: 0;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  grid-column: 1 / -1;
}

.hero-dice-controls {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
}

.hero-dice-label {
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
}

.hero-dice-select {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.3);
  color: var(--fg);
  padding: 10px 12px;
  min-width: 130px;
}

.hero-dice-result {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  justify-self: end;
  width: 100%;
  max-width: 340px;
  border: 1px solid rgba(80, 64, 82, 0.22);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.2);
}

.hero-dice-result-text {
  min-height: 24px;
  font-weight: 700;
  color: #a66fba;
}

.hero-dice-result-img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(80, 64, 82, 0.25);
  background: rgba(255, 255, 255, 0.32);
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 620px) {
  .roll-zone {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-dice {
    grid-template-columns: 1fr;
  }

  .hero-dice-controls {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-dice-result {
    grid-template-columns: 1fr;
    justify-items: start;
    justify-self: stretch;
    max-width: 100%;
  }
}