* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #8B1A1A 0%, #1D1D1F 100%);
    min-height: 100vh;
    color: #333;
}

.container { max-width: 800px; margin: 0 auto; padding: 20px; }

.section { display: none; animation: fadeIn 0.5s ease-in; }
.section.active { display: block; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.content {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    text-align: center;
}
.content.text-left { text-align: left; }

.kicker {
    display: inline-block;
    background: rgba(139, 26, 26, 0.08);
    color: #8B1A1A;
    font-weight: bold;
    font-size: 0.85em;
    padding: 6px 14px;
    border-radius: 50px;
    margin-bottom: 18px;
}

.main-title { font-size: 2.4em; color: #8B1A1A; margin-bottom: 18px; line-height: 1.2; }
.subtitle { font-size: 1.2em; color: #666; margin-bottom: 36px; line-height: 1.5; }

h2 { font-size: 2em; color: #8B1A1A; margin-bottom: 15px; }
h4 { color: #1D1D1F; margin-bottom: 4px; font-size: 1.15em; }

.instruction { font-size: 1.1em; color: #666; margin-bottom: 30px; line-height: 1.5; }

.benefits { display: flex; justify-content: space-around; margin: 36px 0; flex-wrap: wrap; }
.benefit-item { flex: 1; min-width: 180px; margin: 10px; }
.benefit-item .icon { font-size: 2.6em; display: block; margin-bottom: 10px; }
.benefit-item p { font-size: 1.05em; color: #555; }

.cta-button {
    background: linear-gradient(135deg, #8B1A1A 0%, #6B1F1F 100%);
    color: white; border: none;
    padding: 16px 38px; font-size: 1.15em;
    border-radius: 50px; cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    font-weight: bold; margin: 14px 8px;
}
.cta-button:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4); }
.cta-button.secondary { background: white; color: #8B1A1A; border: 2px solid #8B1A1A; }
.cta-button.secondary:hover { background: #8B1A1A; color: white; }

.link-row { margin-top: 14px; }
.link-row a { color: #8B1A1A; text-decoration: none; font-weight: 600; }
.link-row a:hover { text-decoration: underline; }

.for-fun-note { color: #999; font-size: 0.88em; margin-top: 22px; font-style: italic; }

/* ---- How it works ---- */
.pipeline { list-style: none; margin: 24px 0; }
.pipeline li { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 22px; }
.step-num {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    background: linear-gradient(135deg, #8B1A1A 0%, #6B1F1F 100%);
    color: white; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold;
}
.pipeline p { color: #555; line-height: 1.5; }

.info-box {
    background: #f0f4f8;
    border-left: 4px solid #8B1A1A;
    padding: 16px 18px; border-radius: 8px;
    color: #555; line-height: 1.5; margin: 20px 0;
}

.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.dot.life  { background: #4CAF50; }
.dot.heart { background: #E91E63; }
.dot.head  { background: #2196F3; }
.dot.fate  { background: #FF9800; }

/* ---- Hand selection ---- */
.hand-buttons { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.choice-button {
    background: white; border: 3px solid #8B1A1A;
    padding: 30px 40px; border-radius: 15px; cursor: pointer;
    transition: all 0.3s; display: flex; flex-direction: column;
    align-items: center; gap: 10px; font-size: 1.1em; color: #8B1A1A;
    font-weight: bold; min-width: 180px;
}
.choice-button:hover { background: #8B1A1A; color: white; transform: scale(1.05); }
.hand-icon { font-size: 3em; }

/* ---- Camera ---- */
.camera-container {
    position: relative; width: 100%; max-width: 600px; margin: 30px auto;
    border-radius: 15px; overflow: hidden; background: #000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); min-height: 300px;
}
#cameraVideo { width: 100%; height: auto; display: block; }
#cameraVideo.mirrored { transform: scaleX(-1); }
.hand-guide-overlay.mirrored { transform: scaleX(-1); }
#palmCanvas { max-width: 100%; height: auto; }
.captured-preview { width: 100%; position: relative; }
.captured-preview img { width: 100%; height: auto; border-radius: 15px; }

.hand-guide-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none; z-index: 10;
}
.hand-guide-svg { width: 60%; max-width: 200px; height: auto; opacity: 0.9; animation: pulse-guide 2s ease-in-out infinite; }
@keyframes pulse-guide { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }

.model-loading-container {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); display: flex; align-items: center;
    justify-content: center; z-index: 20;
}
.model-loading-content { text-align: center; padding: 30px; }
.model-loading-spinner {
    width: 50px; height: 50px; border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: #8B1A1A; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.model-loading-status { color: white; font-size: 1em; margin-bottom: 15px; }
.model-loading-progress { width: 200px; height: 6px; background: rgba(255, 255, 255, 0.2); border-radius: 3px; overflow: hidden; margin: 0 auto; }
.model-loading-bar { height: 100%; background: linear-gradient(90deg, #8B1A1A 0%, #6B1F1F 100%); width: 0%; transition: width 0.3s ease; }

.preview-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }

.detection-success-msg {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 25px; background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white; border-radius: 10px; margin: 20px auto; max-width: 320px; font-weight: bold;
}
.success-icon {
    font-size: 1.1em; background: white; color: #4CAF50; width: 24px; height: 24px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold;
}

.detection-failure-container {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.98); display: flex; align-items: center;
    justify-content: center; z-index: 25; border-radius: 15px;
}
.detection-failure-content { text-align: center; padding: 30px; max-width: 320px; }
.failure-icon { font-size: 3em; margin-bottom: 15px; }
.detection-failure-content h3 { color: #333; font-size: 1.4em; margin-bottom: 10px; }
.failure-subtitle { color: #666; margin-bottom: 15px; }
.failure-tips { text-align: left; list-style: none; padding: 0; margin: 0 0 25px 0; }
.failure-tips li { padding: 8px 0 8px 25px; position: relative; color: #555; font-size: 0.95em; }
.failure-tips li::before { content: "•"; position: absolute; left: 8px; color: #8B1A1A; font-weight: bold; }

.camera-controls { display: flex; flex-direction: column; gap: 15px; margin-top: 25px; align-items: center; }
.control-button {
    background: white; border: 2px solid #8B1A1A; color: #8B1A1A;
    padding: 12px 30px; font-size: 1.1em; border-radius: 50px; cursor: pointer;
    transition: all 0.3s; font-weight: bold;
}
.control-button:hover { background: #8B1A1A; color: white; transform: translateY(-2px); }
.privacy-note { font-size: 0.9em; color: #888; margin-top: 15px; }

/* ---- Palm-line tracing ---- */
.detection-container { position: relative; width: 100%; max-width: 600px; margin: 30px auto; }
#detectionCanvas { width: 100%; height: auto; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); }
.detection-status { margin-top: 20px; }
#detectionStatus { font-size: 1.2em; color: #8B1A1A; font-weight: bold; animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.detection-progress { width: 100%; height: 26px; background: #e0e0e0; border-radius: 15px; overflow: hidden; margin-top: 30px; }
.detection-bar { height: 100%; background: linear-gradient(90deg, #8B1A1A 0%, #6B1F1F 50%, #f093fb 100%); width: 0%; transition: width 0.5s; }

/* ---- Results ---- */
.reading-result { margin: 26px 0; }
.result-card {
    background: #f7f8fc;
    padding: 22px 24px; margin: 16px 0; border-radius: 14px; text-align: left;
    border-left: 5px solid #ccc;
}
.result-card.life  { border-left-color: #4CAF50; }
.result-card.heart { border-left-color: #E91E63; }
.result-card.head  { border-left-color: #2196F3; }
.result-card.fate  { border-left-color: #FF9800; }
.result-card h3 { color: #1D1D1F; margin-bottom: 10px; font-size: 1.3em; }
.result-card p { color: #555; line-height: 1.6; font-size: 1.05em; }
.metric { display: inline-block; margin-top: 10px; font-size: 0.82em; color: #999; font-family: 'SFMono-Regular', Consolas, monospace; }

.how-built-box {
    background: #eef9f0; border: 1px solid #cfe9d4; border-radius: 12px;
    padding: 16px 18px; margin: 24px 0; color: #3a6b46; line-height: 1.5;
}
.results-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }

.site-footer { text-align: center; color: rgba(255,255,255,0.85); font-size: 0.85em; margin: 26px 0 10px; }
.site-footer a { color: white; }

@media (max-width: 768px) {
    .content { padding: 25px; }
    .main-title { font-size: 1.8em; }
    h2 { font-size: 1.5em; }
    .benefits { flex-direction: column; }
    .hand-buttons { flex-direction: column; }
    .choice-button { width: 100%; }
    .camera-container, .detection-container { max-width: 100%; }
}

/* ---- Mobile camera screen: single viewport, no scroll ---- */
@media (max-width: 768px) {
    /* Remove outer padding and footer when the capture screen is active */
    .container:has(#camera-setup.active) { padding: 0; }
    .container:has(#camera-setup.active) .site-footer { display: none; }

    /* Stretch section to full viewport */
    #camera-setup.active {
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
    }

    /* Content card fills the section as a flex column */
    #camera-setup .content {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 14px 16px 10px;
        border-radius: 0;
        overflow: hidden;
    }

    /* Compact the heading and instruction so the camera gets the space */
    #camera-setup h2         { font-size: 1.1em; margin-bottom: 4px; flex-shrink: 0; }
    #camera-setup .instruction { font-size: 0.85em; line-height: 1.3; margin-bottom: 0; flex-shrink: 0; }

    /* Camera container expands to fill remaining height */
    #camera-setup .camera-container {
        flex: 1;
        min-height: 0;
        max-width: 100%;
        margin: 8px 0 0;
        border-radius: 10px;
    }

    /* Video fills the container height */
    #camera-setup #cameraVideo {
        height: 100%;
        object-fit: cover;
    }

    /* Captured image fills the same container */
    #camera-setup .captured-preview        { height: 100%; }
    #camera-setup .captured-preview img    { height: 100%; object-fit: cover; }

    /* Compact the controls below the camera */
    #camera-setup .detection-success-msg {
        flex-shrink: 0;
        margin: 6px auto;
        padding: 8px 18px;
        font-size: 0.88em;
    }
    #camera-setup .camera-controls {
        flex-shrink: 0;
        margin-top: 8px;
        gap: 8px;
    }
    #camera-setup .camera-controls .cta-button,
    #camera-setup .camera-controls .control-button {
        padding: 11px 24px;
        font-size: 0.95em;
        margin: 0;
    }

    /* Privacy note is redundant on the capture screen — hide it */
    #camera-setup .privacy-note { display: none; }
}