body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh; /* Changed from height: 100vh */
    width: 100%;
    background-color: #e3dede;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

.container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    border-radius: 20px;
    height: 100%;
}

.tools-board-top {
    background-color: #f8f7f6;
    border-radius: 20px;
    padding: 12px 15px;
    margin: 12px 0px;
    position: fixed;
    top: 0;
    z-index: 1000;
    left: 50%;
    transform: translateX(-50%);
}

.toolbar-horizontal {
    display: flex;
    align-items: center;
    justify-content: center;
}

.toolbar-options {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 8px;
    align-items: center;
}

.toolbar-option {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    position: relative;
    font-size: 18px;
    color: #333;
}

.toolbar-option:hover {
    background-color: #e8e8e8;
}

.toolbar-option:hover::after {
    content: attr(title);
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 12px;
    z-index: 1000;
    pointer-events: none;
}

.toolbar-option.active i {
    color: #f4130b;
}

/* color swatches in the top toolbar */
.toolbar-color {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.2);
    margin-left: 6px;
    cursor: pointer;
    position: relative;
}

.toolbar-color.selected {
    border-color: rgba(0,0,0,1);
}

.toolbar-color.custom-color {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toolbar-color.custom-color input[type="color"] {
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
    -webkit-appearance: none;
}

.toolbar-color.custom-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.toolbar-color.custom-color input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }

.toolbar-separator {
    width: 1px;
    height: 24px;
    background-color: #ddd;
    margin: 0 4px;
}

.drawing-board {
    position: relative; /* Changed from fixed */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #AA361A;
    margin-bottom: -10%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 0.5s ease-in-out;

    height: 100vh; /* Full viewport height */
    width: 100%;
    overflow: hidden; /* Prevent any overflow */
}

canvas {
    position: absolute;
    z-index: 1;
    width: 800px;
    height: 900px;
    max-width: 90vw; /* Responsive max width */
    max-height: 90vh; /* Responsive max height */
    display: block;
    margin: 0 auto;
    border-radius: 1500px;
    top: calc(50% - 450px + 205px);
    transition: all 0.3s ease;
}

canvas.shape-rectangular {
    border-radius: 20px;
    clip-path: none;
}

canvas.shape-hexagonal {
    border-radius: 0;
    clip-path: polygon(18% 0%, 82% 0%, 100% 50%, 87% 100%, 13% 100%, 0% 50%);
}

canvas.shape-roundish {
    border-radius: 1500px;
    clip-path: none;
}

/* Shape change buttons */
.shape-btn {
    position: absolute;
    top: calc(50% - 125px);
    background-color: #ddd;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    font-size: 20px;
    color: #333;
    transition: all 0.2s ease;
}

.shape-btn:hover {
    background-color: #fff;
    transform: scale(1.1);
}

.shape-btn-left, .lantern-nav-left {
    /* margin-right: 500px; */
    left: 50%;
    margin-left: -270px;
}

.shape-btn-right, .lantern-nav-right {
    /* margin-left: 500px; */
    margin-left: 220px;
    left: 50%;

}

.lantern-nav-btn {
    position: absolute;
    /* top: calc(50% - 125px); */
    background-color: #ddd;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    font-size: 20px;
    color: #333;
    transition: all 0.2s ease;
}

.lantern-button-top {
    top: calc(50% - 450px + 150px);
}

.lantern-button-bottom {
    top: calc(50% - 450px + 500px);
}

.lantern-button-tassel {
    top: calc(50% - 450px + 600px);
}

/* Lantern images positioned relative to the canvas */
.lantern-top,
.lantern-bottom,
.lantern-tassel {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 2; /* Above canvas but below toolbar */
    object-fit: contain;
    transition: top 0.5s ease-in-out;
}

.lantern-top {
    top: calc(50% - 450px + 100px); /* Align with canvas top */
    width: 300px;
    max-width: 37.5%; /* Relative to canvas width (300/800 = 37.5%) */
}

.lantern-bottom {
    top: calc(50% - 450px + 465px); /* Align with canvas position */
    width: 300px;
    max-width: 37.5%; /* Relative to canvas width */
}

.lantern-tassel {
    top: calc(50% - 450px + 500px); /* Align with canvas position */
    width: 80px;
    max-width: 10%; /* Relative to canvas width (80/800 = 10%) */
}

/* Controls placed under the canvas */
.canvas-controls {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    margin: 12px 0px;
    position: fixed;
    bottom: 0;
    z-index: 1000;
    background-color: #f8f7f6;
    border-radius: 20px;
    padding: 12px 15px;
    left: 50%;
    transform: translateX(-50%);
    gap: 15px;
    height: 80px;
}

.canvas-controls button {
    padding: 8px 14px;
    font-size: 0.95rem;
    border-radius: 6px;
    cursor: pointer;
    min-width: 140px;
}

.canvas-controls .clear-canvas {
    background: transparent;
    color: black;
    border: 2px solid #333;
}

.canvas-controls .clear-canvas:hover { background:#6c757d; color:#fff; }

.canvas-controls .save-img {
    background: white;
    color: black;
    border: 1px solid #6c757d;
}

.sticker-dock {
    width: 70px;
    height: 70px;
    border: 2px dashed #ccc;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    overflow: hidden;
    position: relative;
}

.placeholder-text {
    font-size: 10px;
    color: #999;
    text-align: center;
    pointer-events: none;
}

/* The source sticker inside the dock */
.dock-sticker {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: grab;
    transition: transform 0.1s;
}

.dock-sticker:active {
    cursor: grabbing;
}

/* The Sticker placed on the board */
.placed-sticker {
    position: absolute;
    width: 150px; /* Size of the lantern on the background */
    z-index: 50; /* Above background, below controls */
    cursor: grab;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.3)); /* Pop effect */
}

.placed-sticker:active {
    cursor: grabbing;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .drawing-board canvas {
        width: 700px;
        height: 800px;
    }
    
    .lantern-top {
        top: calc(50% - 400px + 0px);
    }
    
    .lantern-bottom {
        top: calc(50% - 400px + 320px);
    }
    
    .lantern-tassel {
        top: calc(50% - 400px + 355px);
    }
}

@media (max-width: 768px) {
    .drawing-board canvas {
        width: 600px;
        height: 700px;
        max-width: 95vw;
        max-height: 80vh;
    }
    
    .lantern-top {
        top: calc(50% - 350px + 0px);
        max-width: 50%;
    }
    
    .lantern-bottom {
        top: calc(50% - 350px + 280px);
        max-width: 50%;
    }
    
    .lantern-tassel {
        top: calc(50% - 350px + 310px);
        max-width: 13.5%;
    }
    
    .toolbar-options {
        flex-wrap: wrap;
        justify-content: center;
    }
}

.bg-nav-btn {
    position: absolute;
    background-color: #ddd !important;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100; /* Above canvas/lanterns, below toolbar */
    font-size: 20px;
    top: 50%;
    color: #333;
    border: none;
    transition: all 0.2s ease;
}

.bg-nav-btn:hover {
    background-color: #fff !important;
    transform: scale(1.1);
}

#prev-bg {
    left: 20px;
}

#next-bg {
    right: 20px;
}