/* ==========================================================================
   BASE – Farben, Typo, Reset
   ========================================================================== */

:root{
    /* Farbpalette – angelehnt an den Loading-Screen */
    --primary-rgb: 98, 178, 47;
    --primary: rgb(var(--primary-rgb));
    --primary-soft: rgba(var(--primary-rgb), 0.16);
    --primary-hover: rgba(var(--primary-rgb), 0.26);

    --ink-rgb: 255, 255, 255;
    --ink: rgb(var(--ink-rgb));
    --ink-2: rgba(var(--ink-rgb), 0.7);
    --ink-3: rgba(var(--ink-rgb), 0.76);
    --paper: rgb(var(--ink-rgb));
    --paper-2: #E8F5DD;

    --shadow-rgb: 0, 0, 0;

    /* Grund-Neutrals für Oberflächen */
    --charcoal-900-rgb: 12, 12, 14;
    --charcoal-860-rgb: 16, 16, 18;
    --charcoal-820-rgb: 28, 28, 30;
    --charcoal-780-rgb: 34, 34, 36;

    /* Ergänzende Akzente */
    --primary-glow-rgb: 122, 202, 72;
    --primary-amber-rgb: 160, 220, 120;
    --peach-rgb: 200, 235, 176;
    --neutral-400-rgb: 204, 204, 204;
    --card-fallback-rgb: 44, 26, 20;

    /* Transparente Akzente */
    --glow-primary-strong: rgba(var(--primary-glow-rgb), 0.45);
    --glow-primary-medium: rgba(var(--primary-glow-rgb), 0.33);
    --glow-primary-soft: rgba(var(--primary-amber-rgb), 0.24);

    /* Glasflächen / Layer */
    --glass-layer: rgba(var(--ink-rgb), 0.06);
    --glass-divider: rgba(var(--ink-rgb), 0.18);

    /* Konturen */
    --outline-contrast: rgba(var(--shadow-rgb), 0.25);
    --outline-contrast-strong: rgba(var(--shadow-rgb), 0.36);
    --swatch-border: rgba(var(--peach-rgb), 0.6);

    /* Oberflächen / Linien */
    --hairline: rgba(var(--ink-rgb), 0.14);
    --surface: linear-gradient(160deg, rgba(var(--charcoal-820-rgb), 0.7), rgba(var(--charcoal-900-rgb), 0.72));
    --surface-strong: linear-gradient(165deg, rgba(var(--charcoal-780-rgb), 0.74), rgba(var(--charcoal-860-rgb), 0.78));
    --control-surface: rgba(var(--charcoal-860-rgb), 0.88);
    --control-surface-strong: rgba(var(--charcoal-900-rgb), 0.92);
    --blur: 12px;

    /* Schatten */
    --shadow: 0 16px 32px rgba(var(--shadow-rgb), 0.3);
    --shadow-sm: 0 10px 24px rgba(var(--shadow-rgb), 0.24);
    --panel-shadow: 0 24px 60px rgba(var(--shadow-rgb), 0.38);

    /* Flächen */
    --neutral-400: rgb(var(--neutral-400-rgb));
    --card-fallback: rgb(var(--card-fallback-rgb));
    --backdrop-rgb: var(--charcoal-900-rgb);
    --canvas: rgb(var(--charcoal-900-rgb));

    /* Layout */
    --viewport-short: min(100vw, 100vh);
    --viewport-long: max(100vw, 100vh);
    --overlay-gap: clamp(10px, calc(var(--viewport-short) * 0.035), 24px);
    --video-container-gap: clamp(8px, calc(var(--viewport-short) * 0.04), 32px);
    --floating-button-size: clamp(48px, calc(var(--viewport-short) * 0.085), 56px);
    --floating-button-gap: 10px;
    --panel-max-width: clamp(224px, 17.5vw, 294px);
    --panel-max-height: clamp(
        420px,
        calc(var(--viewport-long) - var(--overlay-gap) * 2 - var(--floating-button-size) - var(--floating-button-gap)),
        760px
    );
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
    margin:0;
    padding:0;
    color: var(--ink);
    background: var(--canvas); /* nur hinter dem Stream */
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Container des Pixelstreams */
#video-container{
    width: calc(100vw - 2 * var(--video-container-gap));
    height: calc(100vh - 2 * var(--video-container-gap));
    margin: var(--video-container-gap) auto;
    position: relative;
    overflow: hidden;
    background: var(--canvas);
}

/* Container im Fullscreen immer vollflächig */
#video-container:fullscreen,
#video-container:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    margin: 0 !important;
}

@media (max-width: 640px){
    body{
        min-height: 100vh;
    }
}