/* Der Medien-Abspieler. Wird in der Spielansicht UND im Editor benutzt,
   deshalb hat jede Farbe einen Rückfallwert: in der Spielansicht kommen die
   Werte aus der Vorlage (themes.css), im Editor gibt es die nicht. */
.mplayer {
  --mp-accent: var(--accent, #7c5cff);
  --mp-accent2: var(--accent2, #22d3ee);
  --mp-on-accent: var(--on-accent, #0b0b12);
  --mp-panel: var(--panel, rgba(255, 255, 255, .06));
  --mp-line: var(--line, rgba(255, 255, 255, .13));
  --mp-muted: var(--muted, #9aa3c7);
  --mp-text: var(--text, #eef1ff);
  width: min(560px, 92vw); margin: 0 auto;
}
.mplayer.compact { width: 100%; margin: 10px 0 0; }
.mp-image { max-height: 34vh; max-width: 70vw; border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.mplayer.compact .mp-image { max-height: 130px; max-width: 100%; }
.mp-canvas {
  display: block; border-radius: 14px; max-width: 100%;
  background: rgba(0, 0, 0, .35); box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.mp-fehler { padding: 20px; text-align: center; color: var(--mp-muted); font-size: 14px; }

/* Bühne: solange data-video="off" ist, liegt der Rahmen unsichtbar dahinter.
   Nicht display:none - sonst stoppen manche Browser die Wiedergabe. */
.mp-stage {
  position: relative; overflow: hidden;
  border-radius: 16px; border: 1px solid var(--mp-line);
  background: var(--mp-panel);
  transition: height .5s cubic-bezier(.2, .9, .25, 1.1);
}
.mplayer[data-video="off"] .mp-stage { height: 104px; }
.mplayer.compact[data-video="off"] .mp-stage { height: 64px; }
.mplayer[data-video="on"] .mp-stage { height: min(38vh, 320px); }
.mplayer.compact[data-video="on"] .mp-stage { height: 170px; }
.mp-holder { position: absolute; inset: 0; }
.mp-holder iframe, .mp-holder > div { width: 100%; height: 100%; border: 0; }
.mplayer[data-video="off"] .mp-holder {
  opacity: 0; pointer-events: none;
  width: 320px; height: 180px;   /* YouTube spielt in Winzgrößen unzuverlässig */
}
.mp-cover {
  position: absolute; inset: 0; display: grid; place-items: center; gap: 9px;
  align-content: center; text-align: center; padding: 8px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--mp-accent) 20%, transparent), transparent 70%), var(--mp-panel);
  transition: opacity .4s;
}
.mplayer[data-video="on"] .mp-cover { opacity: 0; pointer-events: none; }
.mp-covertext { font-size: 12.5px; color: var(--mp-muted); }
.mp-wave { display: flex; align-items: flex-end; gap: 5px; height: 30px; }
.mp-wave i {
  width: 6px; border-radius: 3px; background: var(--mp-accent); display: block;
  height: 30%; animation: eq 1.1s ease-in-out infinite;
}
.mp-wave i:nth-child(2) { animation-delay: .15s; }
.mp-wave i:nth-child(3) { animation-delay: .3s; }
.mp-wave i:nth-child(4) { animation-delay: .45s; }
.mp-wave i:nth-child(5) { animation-delay: .6s; }
@keyframes eq { 0%, 100% { height: 22%; } 50% { height: 100%; } }

.mp-bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.mp-btn {
  width: 44px; height: 44px; border-radius: 50%; flex: none; border: 0; cursor: pointer;
  background: var(--mp-accent); color: var(--mp-on-accent);
  font-size: 15px; display: grid; place-items: center;
  transition: transform .15s, filter .15s;
}
.mp-btn.mp-restart {
  width: 36px; height: 36px; font-size: 15px; background: transparent;
  border: 1px solid var(--mp-line); color: var(--mp-text);
}
.mp-btn:hover { transform: scale(1.06); filter: brightness(1.08); }
.mp-track {
  flex: 1; height: 8px; border-radius: 8px; cursor: pointer; overflow: hidden;
  background: color-mix(in srgb, var(--mp-muted) 30%, transparent);
}
.mp-track i { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--mp-accent2), var(--mp-accent)); }
.mp-time { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--mp-muted); min-width: 86px; text-align: right; }
/* Start-Knopf hervorheben, solange nichts läuft */
.mp-btn.big { width: 54px; height: 54px; font-size: 19px; }
.mplayer[data-state="pause"] .mp-btn.big,
.mp-btn.img-start { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mp-accent) 60%, transparent); animation: startPuls 2s ease-out infinite; }
.mplayer[data-state="play"] .mp-btn.big { animation: none; }
@keyframes startPuls {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mp-accent) 55%, transparent); }
  70% { box-shadow: 0 0 0 16px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.img-hint { text-align: left !important; min-width: 0 !important; }
.mplayer.compact .mp-btn { width: 36px; height: 36px; font-size: 13px; }
.mplayer.compact .mp-btn.big { width: 42px; height: 42px; font-size: 15px; }
.mplayer.compact .mp-time { min-width: 74px; font-size: 12px; }

/* Sprungmarken */
.mp-marks { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.mp-mark {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--mp-accent); background: color-mix(in srgb, var(--mp-accent) 14%, transparent);
  color: var(--mp-text); font: inherit; font-size: 14px;
  transition: transform .15s, background .2s;
}
.mp-mark:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--mp-accent) 28%, transparent); }
.mp-mark b { font-weight: 600; }
.mp-mark span { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--mp-muted); }

@media (prefers-reduced-motion: reduce) {
  .mp-wave i { animation: none; height: 60%; }
  .mp-stage { transition: none; }
}

/* Kachel-für-Kachel: der Knopf zum Nachlegen steht neben Start/Pause.
   Etwas schmaler als der Hauptknopf - er wird oft, aber nie zuerst gedrückt. */
.mp-btn.img-kachel { font-size: 17px; line-height: 1; }
.mp-btn.img-kachel:disabled { opacity: .35; pointer-events: none; }