/* ===== Glücksrad: Rad, Zeiger, Drehen-Button, Ergebnis ===== */
.wheel-wrap {
  position: relative;
  width: min(100%, clamp(280px, min(92vw, 100svh - 300px), 620px));
  aspect-ratio: 1;
  container-type: inline-size;
  margin-top: 16px;
}
#wheelCanvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  border-radius: 50%; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  touch-action: manipulation;
}

.pointer {
  position: absolute; left: 50%; top: -3%;
  width: 8%; aspect-ratio: 0.9;
  transform: translateX(-50%); transform-origin: 50% 20%;
  background: var(--accent);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  z-index: 3;
}

.hub {
  position: absolute; left: 50%; top: 50%;
  width: 16%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; border: 0.9cqw solid #fff;
  background: var(--bg); color: #fff;
  font-weight: 800; letter-spacing: 0.04em; font-size: 1.9cqw;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  z-index: 2; transition: transform 0.12s ease, background 0.15s;
}
.hub:hover { background: #1d2028; }
.hub:active { transform: translate(-50%, -50%) scale(0.95); }

.spin-btn {
  border: 0; border-radius: var(--radius);
  padding: 15px 40px; min-width: min(100%, 260px);
  font-size: 1.15rem; font-weight: 800; letter-spacing: 0.01em;
  background: var(--accent); color: var(--accent-ink);
  transition: filter 0.15s, transform 0.1s;
}
.spin-btn:hover { filter: brightness(1.08); }
.spin-btn:active { transform: scale(0.98); }

.spin-btn:disabled, .hub:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
.hub:disabled, .hub:disabled:active { transform: translate(-50%, -50%); }

.hint { color: var(--muted); font-size: 0.85rem; margin-top: -6px; }
@media (hover: none) { .hint { display: none; } }

.result-strip {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: min(100%, 440px); padding: 12px 18px; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.result-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.result-strip strong { font-size: 1.25rem; max-width: 100%; overflow-wrap: anywhere; }
.result-strip.pop { animation: pop 0.35s ease; }
@keyframes pop { 0% { transform: scale(0.96); } 60% { transform: scale(1.02); } 100% { transform: scale(1); } }