html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: black;
}

#c {
    touch-action: none;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* WebRTC video sink. Sits (opaque) directly over the canvas so the picture shows here in
   webrtc mode, but pointer-events:none keeps the canvas beneath as the touch surface in BOTH
   modes (see index.html header). object-fit:fill matches the canvas's stretched drawImage:
   the app renders its FBO at the phone resolution, so the aspect already matches the viewport.
   Shown only once a track arrives (body.webrtc, set by webrtc.js). */
#v {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    background: black;
    pointer-events: none;
    z-index: 1;
}
body.webrtc #v { display: block; }

/* Loading-Splash über dem (bereits dekodierenden) Video: verdeckt den low->full-Warmlauf des Streams,
   bis webrtc.js ihn ausblendet (Frame präsentiert UND streamReady von der App, oder Timeout-Backstop).
   Startet sichtbar (Verbindungsphase) und liegt über dem Video (z-index 1), aber unter reco/stats/iframe,
   damit ein Reconnect-Overlay bei Bedarf darüber erscheint. Deckt in dieser Phase auch die Touch-Fläche
   ab (kein Wischen, solange nichts sichtbar ist). */
#loading {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5em;
    box-sizing: border-box;
    background: #000;
    color: #fff;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 1.1rem;
    z-index: 2;
}
#loading.hidden { display: none; }
#loading .spinner {
    width: 1.1em;
    height: 1.1em;
    margin-right: 0.6em;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: reco-spin 0.9s linear infinite;
    flex: none;
}

/* Overlay bei Verbindungsabbruch — unter der HTML-Vollbild-iframe (z-index 2147483647). */
#reco {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 1.5em;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 1.1rem;
    line-height: 1.5;
    text-align: center;
    z-index: 2147483000;
}
#reco.show { display: flex; }
#reco .spinner {
    width: 1.1em;
    height: 1.1em;
    margin-right: 0.6em;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: reco-spin 0.9s linear infinite;
    flex: none;
}
#reco.terminal .spinner { display: none; }
@keyframes reco-spin { to { transform: rotate(360deg); } }

/* Latency/throughput overlay — shown only with ?stats=1 (metrics are always console.logged). */
#stats {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    padding: 4px 8px;
    font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace;
    color: #0f0;
    background: rgba(0, 0, 0, 0.55);
    white-space: pre-wrap;
    pointer-events: none;
    z-index: 2147483600;
    display: none;
}
#stats.show { display: block; }

/* Debug log for the vibrate/audio control-channel features — shown only with ?debug (always
   console.logged too). Bottom-left so it never overlaps the top-left #stats overlay. */
#dbglog {
    position: fixed;
    left: 0;
    bottom: 0;
    margin: 0;
    padding: 4px 8px;
    max-height: 40%;
    overflow-y: auto;
    font: 11px/1.4 ui-monospace, Menlo, Consolas, monospace;
    color: #0f0;
    background: rgba(0, 0, 0, 0.55);
    white-space: pre-wrap;
    pointer-events: none;
    z-index: 2147483600;
    display: none;
}
#dbglog.show { display: block; }