* {
    box-sizing: border-box;
}

:root {
    --bg: #0b0f14;
    --card: #121821;
    --card2: #171f2b;
    --border: #263241;
    --text: #f4f7fb;
    --muted: #8d9aaa;
    --green: #35e68a;
}

body {
    margin: 0;
    min-height: 100vh;

    background:
        radial-gradient(
            circle at top,
            #172334 0%,
            #0b0f14 50%
        );

    color: var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
}

.app {
    width: min(1200px, 94vw);
    margin: auto;
    padding: 45px 0;
}


/* HEADER */

.header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 30px;
    margin-bottom: 30px;
}

.logo {
    display: inline-block;

    margin-bottom: 8px;
    padding: 5px 9px;

    border: 1px solid #31513f;
    border-radius: 6px;

    color: var(--green);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 3px;
}

h1 {
    margin: 0;

    font-size: clamp(30px, 5vw, 48px);

    letter-spacing: -1.5px;
}

.header p {
    margin-top: 10px;

    color: var(--muted);
    font-size: 16px;
}


/* STATUS */

.status-pill {
    display: flex;
    align-items: center;
    gap: 9px;

    padding: 10px 15px;

    border: 1px solid var(--border);
    border-radius: 999px;

    background: rgba(18, 24, 33, 0.8);

    white-space: nowrap;

    color: var(--muted);
    font-size: 13px;
}

.status-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #777;

    box-shadow: 0 0 10px currentColor;
}

.status-dot.loading {
    background: #f0b429;
    color: #f0b429;
}

.status-dot.ready {
    background: var(--green);
    color: var(--green);
}


/* DISCLAIMER */

.disclaimer {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-bottom: 20px;
    padding: 17px 20px;

    border: 1px solid #4a3d20;
    border-radius: 12px;

    background: rgba(54, 43, 20, 0.35);

    color: #e8d49b;
}

.disclaimer-icon {
    font-size: 25px;
}

.disclaimer strong {
    color: #f1d98c;
}

.disclaimer p {
    margin: 4px 0 0;

    color: #a99c78;
    font-size: 13px;
}


/* CAMERA */

.camera-card {
    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 16px;

    background: var(--card);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.35);
}

.camera-header {
    display: flex;
    justify-content: space-between;

    padding: 14px 18px;

    border-bottom: 1px solid var(--border);

    color: var(--muted);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1px;
}

.camera-container {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #05070a;
}

#video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

#canvas {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;
}


/* PLACEHOLDER */

.camera-placeholder {
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 8px;

    background:
        radial-gradient(
            circle,
            #151c25 0%,
            #070a0e 70%
        );

    color: #687687;

    font-size: 17px;
}

.camera-placeholder small {
    color: #4e5966;
    font-size: 12px;
}

.camera-icon {
    margin-bottom: 5px;

    color: #364352;
    font-size: 42px;
}


/* BUTTONS */

.controls {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 10px;

    margin: 25px 0;
}

button {
    min-width: 210px;

    padding: 14px 25px;

    border: 0;
    border-radius: 10px;

    background: var(--green);

    color: #06130c;

    font-size: 16px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.15s,
        box-shadow 0.15s,
        opacity 0.15s;
}

button:hover:not(:disabled) {
    transform: translateY(-2px);

    box-shadow:
        0 8px 25px rgba(53, 230, 138, 0.25);
}

button:active:not(:disabled) {
    transform: translateY(0);
}

button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.flip-button {
    background: var(--card2);

    color: var(--text);

    border: 1px solid var(--border);
}

.flip-button:hover:not(:disabled) {
    background: #202b39;
    box-shadow: none;
}


/* STATS */

.stats {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;
}

.stat {
    padding: 18px;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: var(--card);
}

.stat-label {
    display: block;

    margin-bottom: 7px;

    color: var(--muted);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1px;
}

.stat strong {
    font-size: 21px;
}


/* FOOTER */

footer {
    margin-top: 30px;

    text-align: center;

    color: #596574;

    font-size: 12px;
}

footer p {
    margin: 5px;
}


/* ============================================================
   MOBILE ONLY
============================================================ */

@media (max-width: 700px) {

    .app {
        width: 100%;
        padding: 20px 12px 25px;
    }

    .header {
        flex-direction: column;

        gap: 15px;

        margin-bottom: 18px;
    }

    h1 {
        font-size: 30px;
        line-height: 1.05;
    }

    .header p {
        font-size: 14px;
        line-height: 1.4;
    }

    .status-pill {
        align-self: flex-start;
    }

    .disclaimer {
        padding: 13px 15px;
        margin-bottom: 15px;
    }

    .disclaimer p {
        font-size: 12px;
        line-height: 1.4;
    }

    /*
     * ONLY mobile changes to the camera shape.
     */

    .camera-container {
        aspect-ratio: 4 / 3;
    }

    .camera-card {
        border-radius: 12px;
    }

    .camera-header {
        padding: 11px 13px;
        font-size: 9px;
    }

    /*
     * Keep the entire image visible.
     */

    #video {
        object-fit: contain;
    }

    #canvas {
        object-fit: contain;
    }

    .controls {
        flex-direction: column;

        width: 100%;

        gap: 9px;

        margin: 18px 0;
    }

    .controls button {
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    .stats {
        grid-template-columns:
            repeat(3, 1fr);

        gap: 7px;
    }

    .stat {
        padding: 12px 6px;

        text-align: center;
    }

    .stat-label {
        font-size: 8px;
        letter-spacing: 0.5px;
    }

    .stat strong {
        font-size: 16px;
    }

    footer {
        margin-top: 20px;
        font-size: 10px;
    }
}