/* Define retro color variables */
:root {
    --red: #e60000;
    --screen: #F9FBF9; /* White with light greenish-gray tinge */
    --dark-gray: #808080;
    --white: #f5f5f5;
    --black: #000000;
    --silver: #d0d0d0;
    --button-face: #d4d0c8;
    --button-highlight: #ffffff;
    --button-shadow: #808080;
}

body {
    background: #2e87c2; /* Teal background */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    font-family: 'Arial', sans-serif;
    font-size: 12px;
}

.canvas-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0; /* Ensure no margins create gaps */
}

.canvas-frame {
    position: relative;
    width: 100vw; /* Full viewport width, touches both sides */
    min-height: calc(min(80vw * 3 / 4, 80vh) + clamp(100px, 15vw, 140px)); /* Canvas height + space for buttons */
    background: linear-gradient(to bottom, var(--red) 0%, var(--red) 80%, #cc0000 100%);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 0 10px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    box-sizing: border-box;
    padding-bottom: clamp(80px, 12vw, 100px); /* Space for larger buttons */
    display: flex; /* Center canvas-screen */
    justify-content: center;
    align-items: center;
}

.canvas-screen {
    width: min(80vw, 80vh * 4 / 3); /* 80% of screen width, constrained by height */
    height: min(80vw * 3 / 4, 80vh); /* Maintains 4:3 ratio */
    background: white; /* White background as specified */
    box-shadow: inset 0 0 8px var(--dark-gray);
    border: 4px solid var(--silver);
    border-radius: 2px;
    box-sizing: border-box;
    z-index: 1;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

/* Main buttons centered at the bottom */
.main-buttons {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: clamp(8px, 1.5vw, 16px); /* Larger gap for bigger buttons */
    z-index: 3;
    flex: 0 0 auto;
    justify-content: center; /* Ensure buttons are centered */
}

/* Zoom buttons centered in the left red border */
.zoom-buttons {
    position: absolute;
    top: 10px;
    left: calc((100vw - min(80vw, 80vh * 4 / 3)) / 4); /* Center in left red border */
    transform: translateX(-50%);
    display: flex;
    gap: clamp(4px, 0.6vw, 6px);
    z-index: 3;
    flex: 0 0 auto;
}

/* Clear button centered in the right red border */
.clear-button {
    position: absolute;
    top: 10px;
    right: calc((100vw - min(80vw, 80vh * 4 / 3)) / 4); /* Center in right red border */
    transform: translateX(50%);
    display: flex;
    z-index: 3;
    flex: 0 0 auto;
}

/* Styling for main buttons */
.canvas-upload-label,
.canvas-stickers-btn,
.canvas-download-btn,
.canvas-delete-btn {
    width: clamp(90px, 15vw, 160px); /* Larger buttons */
    height: clamp(36px, 6vw, 60px);
    background: var(--button-face);
    color: var(--black);
    border: 2px outset var(--white);
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Verdana', 'Geneva', sans-serif;
    font-size: clamp(14px, 2.5vw, 20px);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    transition: background 0.2s;
}

/* Styling for zoom buttons */
.zoom-buttons .canvas-zoom-btn {
    width: clamp(24px, 3vw, 32px);
    height: clamp(24px, 3vw, 32px);
    background: var(--button-face);
    color: var(--black);
    border: 2px outset var(--white);
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Arial', sans-serif;
    font-size: clamp(9px, 1.4vw, 14px);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    transition: background 0.2s;
}

/* Styling for clear button */
.clear-button .canvas-reset-btn {
    width: clamp(48px, 6vw, 64px); /* Doubled from 24px, 3vw, 32px */
    height: clamp(24px, 3vw, 32px);
    background: var(--button-face);
    color: var(--black);
    border: 2px outset var(--white);
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Arial', sans-serif;
    font-size: clamp(9px, 1.4vw, 14px);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    transition: background 0.2s;
}

/* Styling for close button */
.canvas-close-btn {
    width: clamp(80px, 14vw, 140px); /* Larger button */
    height: clamp(32px, 6vw, 40px); /* Larger button */
    background: var(--button-face);
    color: var(--black);
    border: 2px outset var(--white);
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Verdana', 'Geneva', sans-serif;
    font-size: clamp(16px, 2.8vw, 20px);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    transition: background 0.2s;
    margin-bottom: 20px; /* Increased spacing */
}

/* Hover and active states for all buttons */
.canvas-upload-label:hover,
.canvas-stickers-btn:hover,
.canvas-download-btn:hover,
.canvas-delete-btn:hover,
.zoom-buttons .canvas-zoom-btn:hover,
.clear-button .canvas-reset-btn:hover,
.canvas-close-btn:hover {
    background: var(--button-highlight);
}

.canvas-upload-label:active,
.canvas-stickers-btn:active,
.canvas-download-btn:active,
.canvas-delete-btn:active,
.zoom-buttons .canvas-zoom-btn:active,
.clear-button .canvas-reset-btn:active,
.canvas-close-btn:active {
    border: 2px inset var(--dark-gray);
    box-shadow: inset 1px 1px 2px var(--dark-gray);
}

/* Sticker overlay styling */
.sticker-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Slightly darker for focus */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.sticker-container {
    background: var(--white);
    padding: clamp(25px, 5vw, 35px); /* Increased padding */
    border: 2px inset var(--dark-gray);
    border-radius: 4px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    max-width: min(95vw, 1000px); /* Larger container */
    width: 100%;
    box-sizing: border-box;
}

.canvas-sticker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Larger stickers */
    gap: 25px; /* Increased gap */
    padding: 25px; /* Increased padding */
    background: var(--white);
    border: 2px inset var(--dark-gray);
    margin-top: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    max-height: 65vh; /* Taller for more stickers */
    overflow-y: auto; /* Enable scrolling */
}

.canvas-sticker-grid img {
    width: 100%;
    height: clamp(160px, 18vw, 200px); /* Larger stickers */
    object-fit: contain;
    cursor: pointer;
    border: 1px solid var(--dark-gray);
    background: var(--dark-gray);
    padding: 6px; /* Slightly increased */
    transition: transform 0.2s, border 0.2s, background 0.2s; /* Smooth hover effect */
}

.canvas-sticker-grid img:hover {
    border: 1px solid var(--black);
    background: var(--white);
    transform: scale(1.05); /* Slight scale-up on hover */
}

/* Mobile-specific adjustments */
@media screen and (max-width: 600px) {
    .canvas-frame {
        width: 100vw; /* Full viewport width */
        min-height: calc(min(80vw * 3 / 4, 80vh) + clamp(80px, 20vw, 120px));
        padding-bottom: clamp(140px, 35vw, 180px); /* Space for larger buttons */
    }

    .canvas-screen {
        width: min(80vw, 80vh * 4 / 3);
        height: min(80vw * 3 / 4, 80vh);
        margin: 0 auto; /* Center horizontally */
        border: 4px solid var(--silver);
        box-sizing: border-box;
        background: white;
    }

    .main-buttons {
        flex-direction: column;
        gap: clamp(6px, 1.5vw, 10px);
        bottom: 20px;
        width: 100%;
        align-items: center;
    }

    .canvas-upload-label,
    .canvas-stickers-btn,
    .canvas-download-btn,
    .canvas-delete-btn {
        width: clamp(80px, 25vw, 120px);
        height: clamp(32px, 10vw, 48px);
        font-size: clamp(12px, 3vw, 16px);
    }

    .zoom-buttons {
        top: 5px;
        left: calc((100vw - min(80vw, 80vh * 4 / 3)) / 4); /* Center in left red border */
        transform: translateX(-50%);
        gap: clamp(3px, 0.6vw, 4px);
    }

    .clear-button {
        top: 5px;
        right: calc((100vw - min(80vw, 80vh * 4 / 3)) / 4); /* Center in right red border */
        transform: translateX(50%);
    }

    .zoom-buttons .canvas-zoom-btn {
        width: clamp(18px, 5.5vw, 28px);
        height: clamp(18px, 5.5vw, 28px);
        font-size: clamp(9px, 2.2vw, 12px);
    }

    .clear-button .canvas-reset-btn {
        width: clamp(36px, 11vw, 56px);
        height: clamp(18px, 5.5vw, 28px);
        font-size: clamp(9px, 2.2vw, 12px);
    }

    .canvas-close-btn {
        width: clamp(70px, 16vw, 100px);
        height: clamp(28px, 7vw, 36px);
        font-size: clamp(14px, 3.5vw, 18px);
    }

    .sticker-container {
        padding: clamp(20px, 4vw, 25px);
        max-width: 98vw; /* Maximize space on mobile */
    }

    .canvas-sticker-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* Slightly smaller stickers */
        gap: 15px;
        padding: 15px;
        max-height: 75vh; /* Taller for mobile */
    }

    .canvas-sticker-grid img {
        height: clamp(120px, 20vw, 160px); /* Slightly larger for mobile */
        padding: 4px;
    }
}