/* Mobile Capture App Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* CR LDD-Alpha8-003: OOI Earthen Night palette (shared /shared/ooi.css tokens) —
   no rainbow gradient / system font, so capture matches the rest of the product. */
body {
    font-family: var(--ooi-font);
    background: var(--ooi-bg);
    color: var(--ooi-text);
    /* dvh: fit the visible area on iOS (100vh is the large viewport and clips
       bottom controls below the toolbar). 100vh line is the older-browser fallback. */
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

#app {
    width: 100%;
    height: 100%;
    position: relative;
}

.screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.screen.active {
    opacity: 1;
    pointer-events: all;
}

/* Loading Screen */
#loading-screen h1 {
    font-size: 2rem;
    margin-bottom: 10px;
    text-align: center;
}

#loading-screen p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    text-align: center;
    color: var(--ooi-muted);
}

#start-btn {
    background-color: var(--ooi-accent);
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 1.2rem;
    border-radius: 50px;
    cursor: pointer;
    min-width: 200px;
}

#start-btn:hover {
    background-color: var(--ooi-accent-2);
}

/* Camera Screen — square preview so the shutter stays in the negative space.
   Capping the square at 64vh guarantees vertical room for the controls below it,
   so the Capture button is never pushed below the fold on tall phone screens. */
#video-container {
    width: min(92vw, 64vh);
    max-width: 480px;
    aspect-ratio: 1 / 1;
    margin-bottom: 16px;
    border-radius: 12px;
    overflow: hidden;
    background-color: #222;
}

#video-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* fill the square frame; captured JPEG is centre-cropped to match */
    display: block;
}

#camera-controls {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

#capture-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

#capture-btn {
    background-color: var(--ooi-accent);
    color: white;
    border: none;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5);
    margin: 20px 0;
}

#capture-btn:disabled {
    background-color: #666;
    cursor: not-allowed;
}

/* Upload Screen */
#preview-container {
    width: 100%;
    max-width: 400px;
    margin-bottom: 30px;
}

#captured-image {
    width: 100%;
    border-radius: 10px;
    max-height: 70vh;
    object-fit: contain;
}

#upload-status {
    text-align: center;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid var(--ooi-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Success Screen */
.success-content {
    text-align: center;
    max-width: 400px;
}

.success-content h2 {
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.success-content p {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: var(--ooi-muted);
}

#success-image {
    width: 100%;
    border-radius: 10px;
    max-height: 50vh;
    object-fit: contain;
    margin-top: 20px;
}

/* Error Screen */
.error-content {
    text-align: center;
    max-width: 400px;
}

.error-content h2 {
    -webkit-text-stroke: 0.5px white;
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: var(--ooi-accent);
}

#error-message {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: var(--ooi-muted);
}

#retry-btn {
    background-color: var(--ooi-accent);
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 1.2rem;
    border-radius: 50px;
    cursor: pointer;
    min-width: 200px;
}

/* Already Filled Screen */
.already-filled-content {
    text-align: center;
    max-width: 400px;
}

.already-filled-content h2 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: var(--ooi-gold);
}

.already-filled-content p {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: var(--ooi-muted);
}

/* Responsive adjustments */
@media (max-width: 480px) {
    #start-btn, #retry-btn {
        min-width: 150px;
        padding: 12px 20px;
        font-size: 1rem;
    }

    #capture-btn {
        width: 60px;
        height: 60px;
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.3rem;
    }
}