:root {
    --bg: #121212;
    --card: #1e1e1e;
    --text: #ffffff;
    --muted: #aaaaaa;
    --accent: #ffffff;
    --bar-h: 54px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 20px;
    background-color: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.wrapper { max-width: 1000px; margin: 0 auto; text-align: center; }

h1 { font-size: 1.5rem; font-weight: 600; }

.stream-card {
    background: var(--card);
    border-radius: 8px;
    overflow: hidden;
    padding: 20px;
}

/* Buehne = Video + Steuerleiste. Geht als Ganzes in den Vollbildmodus. */
.stage {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    background: #000;
}

/* Feste 16:9-Flaeche. Das Video fuellt sie aus, Overlay und
   Steuerleiste liegen darueber. */
.video-shell {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.video-shell video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.72);
    text-align: center;
    padding: 20px;
}

.overlay[hidden] { display: none; }

.overlay-box p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--text); }

.overlay-box button {
    margin-top: 16px;
    padding: 12px 24px;
    font: inherit;
    font-weight: 600;
    color: #121212;
    background: var(--accent);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.overlay-box button[hidden] { display: none; }

/* ----- Steuerleiste -----
   Liegt am unteren Bildrand und blendet sich nach wenigen Sekunden
   ohne Mausbewegung aus. player.js setzt dafuer .ctl-on auf .stage. */
.controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 2px;
    height: var(--bar-h);
    padding: 6px 10px 0;
    background: linear-gradient(to top,
                rgba(0, 0, 0, 0.72) 0%,
                rgba(0, 0, 0, 0.42) 55%,
                rgba(0, 0, 0, 0) 100%);
    opacity: 0;
    /* visibility zusaetzlich zu opacity: springt am Ende der Blende
       diskret um, die Leiste verschwindet also auch dann, wenn ein
       Browser die Animation ueberspringt. */
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s;
}

.stage.ctl-on .controls {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.ctl-gap { flex: 1; }

.ctl {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 40px;
    padding: 0;
    color: var(--text);
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ctl:hover { background: rgba(255, 255, 255, 0.18); }
.ctl:focus-visible { outline: 2px solid #ffffff; outline-offset: -2px; }

.ctl svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    display: block;
    /* damit die Symbole auch auf hellem Bild lesbar bleiben */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

/* Nur das zum Zustand passende Symbol zeigen */
.ctl[data-state="paused"]  .i-pause,
.ctl[data-state="playing"] .i-play,
.ctl[data-state="muted"]   .i-sound,
.ctl[data-state="on"]      .i-muted,
.ctl[data-state="off"]     .i-exit,
.ctl[data-state="full"]    .i-enter { display: none; }

/* ----- Einbettung -----
   Mit ?embed=1 faellt alles weg, was in einem fremden <iframe> nichts
   zu suchen hat: Ueberschrift, Rand, Hintergrund. Bleibt genau die
   16:9-Buehne. */
body.embed { padding: 0; background: #000; }
body.embed h1,
body.embed .back-link { display: none; }
body.embed .wrapper { max-width: none; }
body.embed .stream-card { padding: 0; border-radius: 0; background: #000; }
body.embed .stage { border-radius: 0; }

.back-link {
    display: inline-block;
    margin-top: 20px;
    color: var(--muted);
    text-decoration: none;
}

.back-link[hidden] { display: none; }