/* Glücksrad: Bühne mit Rad, Zeiger, Drehknopf, Verlauf und Ergebnis-Karte.
   Die Werkbank (Bearbeiten) steht in werkbank.css. */

.rad-seite { display: flex; flex-direction: column; }

.buehne-rad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 6px 12px 10px;
}

.rad-rahmen {
  position: relative;
  width: min(94vw, 100vh - 250px, 680px);
  width: min(94vw, 100dvh - 250px, 680px);
  min-width: 240px;
  aspect-ratio: 1;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.rad-rahmen canvas { display: block; cursor: grab; }

/* ---------- Lichterkranz (js/lichter.js) ----------
   Ruhig: sanft an. Beim Drehen: Lauflicht. Beim Ergebnis: drei Blinker in der Feldfarbe,
   dann ruhig in dieser Farbe, bis der Dialog zu ist. */
.lichter { position: absolute; inset: 0; pointer-events: none; }
.lichter i {
  position: absolute;
  width: 2.3%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 20%, #e9d5ff 55%, #a78bfa);
  box-shadow: 0 0 0 1.5px rgba(124, 58, 237, .35), 0 0 10px 2px rgba(139, 92, 246, .45);
}
.lichter.dreht i { animation: lauflicht .7s linear infinite; animation-delay: calc(var(--i) * -.025s); }
@keyframes lauflicht {
  0%, 60%, 100% { opacity: .4; }
  10% { opacity: 1; background: radial-gradient(circle at 35% 35%, #fff 25%, #fbcfe8 55%, #ec4899); box-shadow: 0 0 0 1.5px #fff, 0 0 16px 5px rgba(236, 72, 153, .8); }
}
.lichter.gewonnen i {
  background: radial-gradient(circle at 35% 35%, #fff, var(--gewinn, #c4b5fd) 70%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .85), 0 0 14px 4px var(--gewinn, #c4b5fd);
  opacity: 1;
  animation: gewinnblink .32s steps(1) 3;
}
@keyframes gewinnblink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .lichter.dreht i, .lichter.gewonnen i { animation: none; }
}
.rad-rahmen canvas:active { cursor: grabbing; }

.zeiger {
  position: absolute;
  left: 50%;
  top: -3.5%;
  width: 11%;
  translate: -50% 0;
  transform-origin: 50% 33%;
  filter: drop-shadow(0 4px 6px rgba(80, 60, 160, .35));
  pointer-events: none;
  z-index: 2;
}

.dreh-knopf {
  min-width: min(80vw, 300px);
  min-height: 60px;
  font-size: 1.3rem;
  font-weight: 650;
  letter-spacing: -.01em;
  letter-spacing: .01em;
}

.rad-hinweis {
  margin: 0;
  min-height: 1.3em;
  font-weight: 550;
  color: var(--tusche-weich);
  text-align: center;
}

.verlauf {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 680px;
}
.verlauf-titel { font-weight: 600; color: var(--tusche-weich); }
.verlauf ol { display: contents; list-style: none; }
.verlauf li {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--flaeche);
  box-shadow: var(--schatten-klein);
  font-weight: 550;
  font-size: .9rem;
  max-width: 14em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.verlauf li:first-child { background: var(--verlauf); color: #fff; }
.verlauf .knopf.leise { min-height: 32px; padding: 0 6px; font-size: .9rem; }

/* ---------- Ergebnis ---------- */
.ergebnis {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  /* Leicht: das getroffene Feld unter dem Zeiger soll sichtbar bleiben (vorher 6 px Unschärfe) */
  background: rgba(30, 27, 58, .16);
  backdrop-filter: blur(1.5px);
  z-index: 50;
  animation: einblenden .2s ease;
}
@keyframes einblenden { from { opacity: 0; } }

.ergebnis-karte {
  position: relative;
  width: min(92vw, 440px);
  padding: 40px 22px 22px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  box-shadow: var(--schatten-gross);
  text-align: center;
  overflow: hidden;
  animation: aufploppen .45s cubic-bezier(.2, 1.6, .4, 1);
}
/* Farbband oben in der Farbe des getroffenen Felds */
.ergebnis-karte::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, var(--ergebnis-farbe, var(--tomate)), color-mix(in oklab, var(--ergebnis-farbe, var(--tomate)) 70%, #fff));
}
@keyframes aufploppen { from { transform: scale(.6) rotate(-6deg); opacity: 0; } }

.ergebnis-vorspann { margin: 0; font-weight: 550; color: var(--tusche-weich); }
.ergebnis-text {
  margin: 6px 0 14px;
  font-family: var(--schrift-titel);
  font-size: clamp(2.2rem, 10vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.ergebnis-bild {
  display: block;
  width: min(52vw, 200px);
  aspect-ratio: 1;
  margin: 12px auto 4px;
  border: 5px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--schatten);
}
.ergebnis-zusatz { margin: -6px 0 14px; font-weight: 550; color: var(--tusche-weich); }
.ergebnis-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ergebnis-knoepfe .haupt { flex-basis: 100%; min-height: 54px; font-size: 1.2rem; }

@media (min-width: 980px) {
  .rad-rahmen { width: min(100vw - 500px, 100dvh - 290px, 720px); } /* −60 px: Hinweis + Vorlagen-Knopf passten nicht mehr ins Bild (A.14.4.0) */
  /* Ergebnis über dem Rad zeigen, nicht halb auf der Werkbank. */
  .ergebnis { padding-right: 452px; }
}

/* ---------- Vollbild ---------- */
:fullscreen .fuss { display: none; }

/* Zeigerfarben kommen aus dem Seitenstil (Vorgabe: die Verlaufsfarben im SVG) */
.zeiger stop:nth-child(1) { stop-color: var(--zeiger-1, #4a4b54); }
.zeiger stop:nth-child(2) { stop-color: var(--zeiger-2, #26272d); }
.zeiger stop:nth-child(3) { stop-color: var(--zeiger-3, #101114); }
.zeiger circle { fill: var(--zeiger-punkt, #e6cb86); }

/* ---------- Handy quer: Rad links, Knopf und Verlauf rechts ---------- */
@media (orientation: landscape) and (max-height: 540px) and (min-width: 480px) {
  .buehne-rad {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: center;
    justify-items: center;
    column-gap: 28px;
    row-gap: 10px;
    padding: 0 16px 8px;
  }
  .buehne-rad { grid-template-rows: 1fr repeat(4, auto) 1fr; }
  .buehne-rad > :first-child { grid-row: 1 / -1; grid-column: 1; }
  .buehne-rad > :not(:first-child) { grid-column: 2; }
  .buehne-rad > :nth-child(2) { grid-row: 2; }
  .buehne-rad > :nth-child(3) { grid-row: 3; }
  .buehne-rad > :nth-child(4) { grid-row: 4; }
  .buehne-rad > :nth-child(5) { grid-row: 5; }
  .rad-rahmen { width: min(100dvh - 78px, 52vw); min-width: 0; }
}