* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    min-height: 100vh;

    background:
        linear-gradient(
            135deg,
            #f5f0e8 0%,
            #eee6da 100%
        );

    color: #403b36;

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

.app {
    width: 100%;
    max-width: 1050px;

    margin: 0 auto;
    padding: 28px 24px 35px;
}


/* -----------------------------
   Header
----------------------------- */

header {
    text-align: center;
    margin-bottom: 18px;
}

.progress {
    color: #665b51;

    font-size: 1rem;
    font-weight: 600;
}

.stats {
    margin-top: 5px;

    color: #8a7d70;

    font-size: 0.88rem;
}


/* -----------------------------
   Floating rating confirmation
----------------------------- */

.message {
    position: fixed;

    top: 18px;
    left: 50%;

    z-index: 1000;

    width: min(90vw, 520px);

    padding: 0;

    border-radius: 12px;

    color: white;

    font-size: 1.05rem;
    font-weight: 700;

    text-align: center;

    opacity: 0;
    transform: translate(-50%, -15px);

    pointer-events: none;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.message.visible {
    padding: 16px 22px;

    opacity: 1;

    transform: translate(-50%, 0);
}

.message.favorite {
    background: #d93668;

    box-shadow:
        0 5px 18px rgba(150, 35, 75, 0.25);
}

.message.good {
    background: #4d7c70;

    box-shadow:
        0 5px 18px rgba(55, 95, 85, 0.22);
}

.message.reject {
    background: #292b34;

    box-shadow:
        0 5px 18px rgba(30, 32, 40, 0.25);
}


/* -----------------------------
   Photo
----------------------------- */

.photo-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.photo-container {
    position: relative;

    width: 100%;
    height: min(65vh, 750px);

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

    padding: 12px;

    background: #fffdf9;

    border: 1px solid #ded5ca;
    border-radius: 12px;

    box-shadow:
        0 5px 18px rgba(73, 58, 44, 0.12),
        0 1px 3px rgba(73, 58, 44, 0.08);

    overflow: hidden;

    touch-action: none;
}

.photo-container img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: 5px;

    user-select: none;
    -webkit-user-drag: none;

    transition:
        transform 0.25s ease-out,
        opacity 0.2s ease-out;
}


/* -----------------------------
   Swipe feedback
----------------------------- */

.swipe-indicator {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    padding: 12px 22px;

    border-radius: 10px;

    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 0.04em;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.08s,
        background 0.08s,
        color 0.08s;
}

.swipe-indicator.reject {
    background: rgba(41, 43, 52, 0.9);
    color: #f5f5f7;

    opacity: 1;
}

.swipe-indicator.favorite {
    background: rgba(205, 42, 91, 0.9);
    color: white;

    opacity: 1;
}


/* -----------------------------
   First-use swipe instructions
----------------------------- */

.swipe-hint {
    position: absolute;

    left: 50%;
    bottom: 18px;

    transform: translateX(-50%);

    display: flex;
    align-items: center;
    gap: 20px;

    padding: 9px 15px;

    background: rgba(40, 34, 29, 0.78);

    border-radius: 20px;

    color: white;

    font-size: 0.78rem;
    font-weight: 600;

    white-space: nowrap;

    pointer-events: none;

    transition:
        opacity 0.5s ease;
}

.swipe-hint.hidden {
    opacity: 0;
}


/* -----------------------------
   Photo filename
----------------------------- */

.photo-name {
    margin-top: 9px;

    color: #9a8d81;

    font-size: 0.78rem;
}


/* -----------------------------
   Instruction
----------------------------- */

.instruction {
    margin-top: 13px;

    text-align: center;

    color: #8a7c70;

    font-size: 0.82rem;
}


/* -----------------------------
   Rating buttons
----------------------------- */

.controls {
    display: flex;
    justify-content: center;

    gap: 14px;

    margin-top: 12px;
}

.rating-button {
    min-width: 125px;

    padding: 13px 20px;

    border: 1px solid transparent;
    border-radius: 10px;

    font-size: 0.95rem;
    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 2px 5px rgba(73, 58, 44, 0.08);

    transition:
        transform 0.1s,
        box-shadow 0.15s,
        background 0.15s;
}

.rating-button:hover {
    box-shadow:
        0 3px 8px rgba(73, 58, 44, 0.15);
}

.rating-button:active {
    transform: scale(0.96);
}

.button-icon {
    display: block;

    margin-bottom: 3px;

    font-size: 1.55rem;
    line-height: 1.1;
}


/* Reject — charcoal with a slight blue/purple cast */

.reject {
    background: #292b34;

    border-color: #3b3e49;

    color: #f2f2f5;
}

.reject:hover {
    background: #323540;
}


/* Good — muted blue/green */

.good {
    background: #dce9e5;

    border-color: #b8d0c9;

    color: #315d53;
}

.good:hover {
    background: #d0e1dc;
}


/* Favorite — bright pink/red */

.favorite {
    background: #f4d3dd;

    border-color: #e5aaba;

    color: #b52f5b;
}

.favorite:hover {
    background: #efc4d1;
}


/* -----------------------------
   Navigation
----------------------------- */

.navigation {
    display: flex;
    justify-content: center;

    gap: 12px;

    margin-top: 14px;
}

.secondary-button {
    padding: 9px 17px;

    background: rgba(255, 253, 249, 0.7);

    border: 1px solid #d4c9bc;
    border-radius: 8px;

    color: #75695e;

    font-size: 0.88rem;

    cursor: pointer;

    transition:
        background 0.15s,
        transform 0.1s;
}

.secondary-button:hover:not(:disabled) {
    background: #fffdf9;
}

.secondary-button:active:not(:disabled) {
    transform: scale(0.97);
}

.secondary-button:disabled {
    opacity: 0.4;
    cursor: default;
}


/* -----------------------------
   Mobile
----------------------------- */

@media (max-width: 600px) {

    .app {
        padding: 18px 12px 25px;
    }

    .stats {
        font-size: 0.78rem;
    }

    .photo-container {
        height: 58vh;

        padding: 7px;

        border-radius: 10px;
    }

    .controls {
        gap: 7px;
        margin-top: 11px;
    }

    .rating-button {
        flex: 1;

        min-width: 0;

        padding: 10px 4px;

        font-size: 0.82rem;
    }

    .button-icon {
        font-size: 1.45rem;
    }

    .instruction {
        font-size: 0.76rem;
    }

    .swipe-hint {
        gap: 10px;

        padding: 8px 11px;

        font-size: 0.68rem;
    }

    .message {
		top: 12px;

		width: calc(100vw - 24px);

		font-size: 0.95rem;
	}

	.message.visible {
		padding: 14px 16px;
	}

    .navigation {
        margin-top: 10px;
    }
}