/* ==========================================================================
   Glücksrad – modul-spezifische Styles
   Alle Selektoren liegen unter #view-wheel bzw. tragen das Präfix .wheel-…
   Touch-Ziele (40px), Stepper-Symbole und aria-disabled-Zustände kommen aus base.css.
   ========================================================================== */

/* ---------- Rad-Tokens (werden auch vom Canvas gelesen) ---------- */
#view-wheel {
  --wheel-rim: #1d1b22;
  --wheel-rim-edge: #3b3644;
  --wheel-rim-inner: rgb(255 255 255 / 0.16);
  --wheel-peg: #fff6e6;
  --wheel-peg-shade: #b3a996;
  --wheel-hub: #ffffff;
  --wheel-hub-shade: #e6e0d6;
  --wheel-separator: rgb(255 255 255 / 0.85);
  --wheel-dim: rgb(246 243 238 / 0.4);
  --wheel-shadow: rgb(29 27 34 / 0.4);
  --wheel-glow: #ffffff;
  --wheel-pointer-edge: #ffffff;
  /* Platz (Höhe + Abstand) für die Reihenfolge am Ende des Ausscheide-Modus – die ganze Runde lang
     freigehalten, damit der Button nie springt. wheel.js misst ihn am Platzhalter .wheel-result__space
     und setzt ihn hier; 0, solange keine Reihenfolge kommen kann. */
  --wheel-order-h: 0px;
  /* Höhe unter dem Rad bis zur Unterkante des Hauptbuttons: zwei Abstände + Ergebnis + Knopf
     (60px + 5px Kante) + Luft. Braucht das Ergebnis mehr Platz, --result-h hier am #view-wheel
     überschreiben – dann rechnet auch die Radgröße damit. */
  --wheel-below: calc(2 * 20px + var(--result-h, 92px) + var(--wheel-order-h) + 65px + 10px);
}

@media (prefers-color-scheme: dark) {
  #view-wheel {
    --wheel-rim: #0d0c11;
    --wheel-rim-edge: #4a4458;
    --wheel-rim-inner: rgb(255 255 255 / 0.1);
    --wheel-peg: #f3f0f7;
    --wheel-peg-shade: #8f88a0;
    --wheel-hub: #f3f0f7;
    --wheel-hub-shade: #c9c2d6;
    --wheel-separator: rgb(255 255 255 / 0.72);
    --wheel-dim: rgb(10 9 14 / 0.5);
    --wheel-shadow: rgb(0 0 0 / 0.75);
    --wheel-glow: #ffffff;
    --wheel-pointer-edge: #f3f0f7;
  }
}

/* ---------- Bühne ---------- */
#view-wheel .wheel-stage {
  min-height: 0;
}

.wheel-wrap {
  position: relative;
  isolation: isolate; /* eigene Ebene: der Puls (::before) liegt unter dem Canvas, aber über der Bühne */
  /* So groß wie möglich – aber Ergebnis und Knopf bleiben auf dem ersten Bildschirm sichtbar:
     Bildschirmhöhe − App-Shell (--shell-h aus base.css, sonst 152px) − Platz darunter */
  width: min(100%, 460px);
  width: min(100%, 460px, max(220px, 100vh - var(--shell-h, 152px) - var(--wheel-below)));
  width: min(100%, 460px, max(220px, 100svh - var(--shell-h, 152px) - var(--wheel-below)));
  aspect-ratio: 1;
}

/* Klick/Tippen dreht – während der Drehung bremst es; „is-busy“: gerade ohne Wirkung */
.wheel-canvas {
  width: 100%;
  height: 100%;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.wheel-canvas.is-busy {
  cursor: default;
}

/* Spannend-Modus bei reduzierter Bewegung: Statt zu kriechen hält das verwischte Rad inne, ein sanfter
   Schein ums Rad pulsiert – nur die Deckkraft, langsam (0,4 Hz), kein Blinken. Unter dem Canvas, damit
   der Zeiger darüber liegt. Kreis wie im Canvas (geometry() in wheel.js): Mitte 50 % / 51,5 %, Radius 45,5 %. */
.wheel-wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 6%;
  left: 4.5%;
  width: 91%;
  height: 91%;
  border-radius: 50%;
  box-shadow:
    0 0 0 4px var(--accent-border),
    0 0 30px 10px var(--accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.wheel-wrap.is-tense::before {
  animation: wheel-tense 1.2s ease-in-out infinite alternate;
}

/* ---------- Ergebnis ---------- */
#view-wheel .wheel-result {
  position: relative; /* Bezug für den Platzhalter der Reihenfolge */
  width: 100%;
  min-height: calc(var(--result-h, 92px) + var(--wheel-order-h));
}

#view-wheel .wheel-result .result__value {
  max-width: 100%;
  font-size: clamp(1.5rem, 6vw, 2.4rem);
}

#view-wheel .wheel-result .result__value.is-long {
  font-size: clamp(1.15rem, 4.6vw, 1.7rem);
}

#view-wheel .wheel-result.is-idle .result__value {
  font-size: 1.1rem;
}

.wheel-result__dot {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.35em;
  border-radius: 50%;
  vertical-align: 0.1em;
  box-shadow:
    0 0 0 3px var(--surface),
    0 0 0 4px var(--border-strong);
}

/* Ausscheide-Modus am Ende: die ganze Reihenfolge, kleiner unter der Detailzeile */
.wheel-result__order {
  max-width: 36em;
  font-size: 0.85rem;
  line-height: 1.4;
  text-wrap: balance;
}

/* Platzhalter: alle Reihenfolgen, die diese Runde am Ende zeigen kann – unsichtbar übereinander,
   außerhalb des Flusses und so breit wie die echte Zeile (gleiche Klassen). wheel.js misst seine
   Höhe → --wheel-order-h. */
.wheel-result__space {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  margin-inline: auto;
  visibility: hidden;
  pointer-events: none;
}

.wheel-result__space > * {
  grid-area: 1 / 1;
}

/* ---------- Felder-Panel ---------- */
.wheel-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  transition: opacity var(--dur);
}

.wheel-fieldset:disabled {
  opacity: 0.6;
}

.wheel-fieldset:disabled .input {
  cursor: not-allowed;
}

/* ---------- Gespeicherte Räder: Auswahl + Neu/Umbenennen/Teilen/Löschen ----------
   Eine Zeile; wird es zu eng (schmale Handys), rutschen die Knöpfe gemeinsam unter die Auswahl. */
.wheel-switcher {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border);
}

.wheel-switcher__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.wheel-switcher__pick {
  position: relative;
  flex: 1 1 9rem;
  min-width: 0;
}

.wheel-switcher__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

/* Eigener Pfeil statt des Browser-Pfeils – in beiden Farbschemata lesbar */
.wheel-switcher__chevron {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.wheel-switcher__name {
  flex: 1 1 9rem;
  min-width: 0;
  font-weight: 700;
}

/* Ohne Abstand: 40px breite Knöpfe mit 20px-Symbolen stehen auch so luftig genug */
.wheel-switcher__actions {
  display: flex;
  margin-left: auto;
}

#view-wheel .wheel-switcher__btn {
  color: var(--text-muted);
}

@media (hover: hover) {
  #view-wheel .wheel-switcher__btn:hover:not([aria-disabled="true"]) {
    color: var(--text);
  }

  #view-wheel .wheel-switcher__delete:hover {
    color: var(--danger);
  }
}

/* Löschen: nur Symbol – beim ersten Druck (confirmAction) erscheint daneben „Wirklich?“ */
.wheel-switcher__delete .btn__label:empty {
  display: none;
}

#view-wheel .wheel-switcher__delete.is-confirm {
  width: auto;
  padding: 0 12px 0 10px;
  color: var(--danger);
}

/* Solange „Wirklich?“ steht, weichen die anderen Knöpfe – die Gruppe bleibt so breit wie vorher
   (4 × 40px), nichts rutscht in eine neue Zeile */
.wheel-switcher__actions:has(.is-confirm) {
  justify-content: flex-end;
  min-width: 160px;
}

.wheel-switcher__actions:has(.is-confirm) > :not(.is-confirm) {
  display: none;
}

.wheel-fields {
  --row-gap: 8px;
  display: flex;
  flex-direction: column;
  gap: var(--row-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wheel-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wheel-field__swatch {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 0.78rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
}

.wheel-field__input {
  flex: 1;
  min-width: 0;
}

#view-wheel .wheel-field__del {
  color: var(--text-muted);
}

@media (hover: hover) {
  #view-wheel .wheel-field__del:hover:not([aria-disabled="true"]) {
    color: var(--danger);
  }
}

.wheel-field.is-new {
  animation: wheel-row-in var(--dur-slow) var(--ease-spring) both;
}

/* Ausscheide-Modus: Die Zeile gleitet raus und fällt zusammen – Dauer = Entfernen-Animation (wheel.js) */
.wheel-field.is-leaving {
  overflow: hidden;
  animation: wheel-row-out 720ms ease-in-out both;
}

@media (min-width: 900px) {
  /* Lange Listen scrollen im Panel statt die Seite zu strecken */
  .wheel-fields-scroll {
    max-height: min(26rem, 50vh);
    margin: -4px;
    padding: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

.wheel-bulk {
  display: block;
  min-height: 12rem;
  resize: vertical;
  line-height: 1.5;
  font-weight: 600;
}

/* Symbol bündig mit den Farbfeldern der Liste (der Ghost-Button hat 12px Innenabstand) */
.wheel-actions {
  display: flex;
  margin: 10px 0 0 -12px;
}

.wheel-text-toggle[aria-pressed="true"] {
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

.wheel-undo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding: 4px 4px 4px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 0.88rem;
  font-weight: 600;
  animation: fade-in var(--dur) ease both;
}

.wheel-undo__text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere; /* lange Wörter (Komposita, E-Mail-Adressen) umbrechen statt überstehen */
}

/* „Mehr Optionen“: <details> mit Pfeil statt des Standard-Dreiecks */
.wheel-more__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  margin: 0 -8px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color var(--dur);
}

.wheel-more__summary::-webkit-details-marker {
  display: none;
}

@media (hover: hover) {
  .wheel-more__summary:hover {
    background: var(--surface-2);
  }
}

.wheel-more__chevron {
  color: var(--text-muted);
  transition: transform var(--dur) var(--ease-out);
}

.wheel-more[open] .wheel-more__chevron {
  transform: rotate(180deg);
}

.wheel-more__group {
  margin-top: 10px;
}

.wheel-more__group + .wheel-more__group {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

.wheel-presets {
  margin-top: 8px;
}

/* Wie „Als Text bearbeiten“: Symbole bündig – so passen beide Knöpfe auch bei 320px in eine Zeile */
.wheel-tools {
  margin: 10px 0 0 -12px;
}

.wheel-switch-hint {
  margin-top: 2px;
}

.wheel-restore {
  margin-top: 10px;
}

.wheel-restore-hint {
  margin-top: 6px;
}

/* ---------- Verlauf ---------- */
.wheel-chip__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Kleine Bildschirme ---------- */
@media (max-width: 599px) {
  #view-wheel {
    --wheel-below: calc(2 * 14px + var(--result-h, 92px) + var(--wheel-order-h) + 65px + 9px);
  }

  #view-wheel .layout__stage {
    gap: 14px;
  }
}

/* Kompaktes Querformat (base.css): Ergebnis und Knopf stehen neben dem Rad – nur die Höhe begrenzt */
@media (orientation: landscape) and (max-height: 540px) {
  .wheel-wrap {
    width: min(100%, 460px, max(180px, 100vh - var(--shell-h, 70px) - 16px));
    width: min(100%, 460px, max(180px, 100svh - var(--shell-h, 70px) - 16px));
  }
}

@keyframes wheel-row-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes wheel-tense {
  from {
    opacity: 0.15;
  }
  to {
    opacity: 0.75;
  }
}

/* Erst rausgleiten, dann zusammenfallen; der negative Rand schluckt den Zeilenabstand */
@keyframes wheel-row-out {
  0% {
    max-height: var(--row-h, 3rem);
  }
  45% {
    opacity: 0;
    transform: translateX(24px);
    max-height: var(--row-h, 3rem);
    margin-top: 0;
  }
  100% {
    opacity: 0;
    transform: translateX(24px);
    max-height: 0;
    margin-top: calc(-1 * var(--row-gap, 8px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .wheel-field.is-new,
  .wheel-undo {
    animation: fade-in 150ms ease both;
  }

  /* Ohne Bewegung: nur abblenden – die Zeile verschwindet mit dem Segment (280 ms) */
  .wheel-field.is-leaving {
    animation: none;
    opacity: 0.35;
  }

  .wheel-more__chevron {
    transition: none;
  }
}