* {
    box-sizing: border-box;
}

body {
    font-family: 'Comic Sans MS', 'Chalkduster', 'cursive', sans-serif;
    background-color: #f0f0f0;
    padding: 20px;
    /* Simple corkboard like pattern using SVG */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23c5a98b"/><rect x="5" y="5" width="90" height="90" fill="%23dab998" stroke="%23b5997b" stroke-width="1"/></svg>');
    background-size: 50px 50px;
    min-height: 100vh; /* Ensure body takes full height */
    display: flex; /* Use flexbox for body */
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center items horizontally */
}

h1 {
    text-align: center;
    color: #4a3f35; /* Darker brown for better contrast on corkboard */
    margin-bottom: 40px;
    font-size: 2.5em;
    text-shadow: 2px 2px 4px rgba(255,255,255,0.5); /* Lighter shadow for dark text */
}

#post-it-board {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 35px; /* Increased gap for better spacing when flipped */
    padding: 20px;
    perspective: 1500px; /* Enhanced perspective for better 3D effect */
    max-width: 1200px; /* Limit width for better layout */
    width: 100%; /* Take available width */
    margin-bottom: 50px; /* Add space below the board */
}

.post-it-container {
    width: 220px;
    height: 220px;
    perspective: 1000px; /* Perspective for the container itself */
    cursor: pointer;
}

.post-it {
    width: 100%;
    height: 100%;
    position: relative; /* Changed from absolute to relative for container flow */
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Flip transition */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    border-radius: 2px; /* Apply border-radius here */
    transform-origin: center center; /* Ensure flip happens around the center */
}

.post-it-container:hover .post-it:not(.flipped) {
    /* Apply hover effect only when not flipped */
    transform: scale(1.05) rotate(0deg) translateZ(10px); /* Simplified hover */
    box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.35);
}

.post-it.flipped {
    transform: rotateY(180deg);
}

.post-it-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Safari */
    padding: 20px 15px 15px 15px;
    overflow-y: auto; /* Add scroll if content overflows */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 2px; /* Match container radius */
    font-size: 0.95em;
}

.post-it-front {
    /* Background color set by JS */
    z-index: 2; /* Front face is initially visible */
    color: #333;
}

.post-it-back {
    /* Background color set by JS, slightly darker maybe? */
    transform: rotateY(180deg);
    z-index: 1;
    justify-content: center; /* Center the resolution text */
    align-items: center;
    text-align: center;
    color: #222; /* Slightly darker text for back */
}

.post-it .number {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 0.8em;
    font-weight: bold;
    color: rgba(0,0,0,0.4);
}

.post-it .scenario {
    margin-bottom: 10px;
    flex-grow: 1; /* Allow scenario text to take available space */
    font-weight: bold;
}

.post-it .resolution-prompt {
    margin-top: auto; /* Push prompt to the bottom */
    font-style: italic;
    color: #555; /* Slightly darker prompt text */
    border-top: 1px dashed rgba(0,0,0,0.15);
    padding-top: 8px;
    font-size: 0.85em;
}

.post-it .resolution {
    font-weight: normal;
    font-size: 1em;
    padding: 10px; /* Add some padding around resolution */
}

/* Scrollbar styling for faces */
.post-it-face::-webkit-scrollbar {
    width: 5px;
}
.post-it-face::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05);
    border-radius: 5px;
}
.post-it-face::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 5px;
}
.post-it-face::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.3);
}

/* Summary Post-it Styles */
#summary-post-it-container {
    width: 100%;
    max-width: 1100px; /* Make it bigger */
    padding: 20px;
    display: flex;
    justify-content: center;
    margin-top: 30px; /* Space above summary */
    margin-bottom: 20px; /* Space below summary, reduced */
}

#summary-post-it {
    background-color: #ffffe0; /* Light yellow */
    padding: 40px; /* Increased padding */
    border-radius: 3px;
    box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.3);
    width: 100%;
    transform: rotate(-1deg); /* Slight tilt */
    max-height: 70vh; /* Keep max-height for screen view */
    overflow-y: auto; /* Enable vertical scroll for screen view */
    border: 1px solid rgba(0,0,0,0.1);
}

#summary-post-it h2 {
    text-align: center;
    color: #4a3f35;
    margin-bottom: 30px; /* Increased margin */
    font-size: 2em; /* Slightly larger heading */
    border-bottom: 2px dashed rgba(0,0,0,0.1);
    padding-bottom: 15px; /* Increased padding */
}

#summary-post-it h3 {
    color: #6a5f55;
    margin-top: 25px; /* Increased margin */
    margin-bottom: 15px; /* Increased margin */
    font-size: 1.4em; /* Slightly larger sub-heading */
}

#summary-post-it p {
    margin-bottom: 15px; /* Increased margin */
    line-height: 1.6; /* Increased line height */
    color: #333;
    font-size: 1.05em; /* Slightly larger text */
}

.summary-section {
    margin-bottom: 20px;
}

/* Scrollbar styling for summary */
#summary-post-it::-webkit-scrollbar {
    width: 8px;
}
#summary-post-it::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05);
    border-radius: 5px;
}
#summary-post-it::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.3);
    border-radius: 5px;
}
#summary-post-it::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.4);
}

/* Print Button Styles */
#print-summary-btn {
    padding: 12px 25px;
    font-family: 'Comic Sans MS', 'Chalkduster', 'cursive', sans-serif;
    font-size: 1.1em;
    background-color: #4CAF50; /* Green */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 40px; /* Add space below button */
    box-shadow: 3px 3px 8px rgba(0,0,0,0.2);
    transition: background-color 0.3s, box-shadow 0.3s;
}

#print-summary-btn:hover {
    background-color: #45a049;
    box-shadow: 5px 5px 12px rgba(0,0,0,0.3);
}

/* Print Specific Styles */
@media print {
    body {
        font-family: sans-serif; /* Use a standard print font */
        background-image: none; /* Remove corkboard background */
        background-color: #fff;
        padding: 0;
        margin: 0;
    }

    h1,
    #post-it-board,
    #print-summary-btn,
    .post-it-container {
        display: none; /* Hide everything except the summary */
    }

    #summary-post-it-container {
        max-width: 100%;
        width: 100%;
        padding: 1cm; /* Add print margins */
        margin: 0;
    }

    #summary-post-it {
        max-width: 100%;
        width: 100%;
        box-shadow: none;
        border: 1px solid #ccc; /* Simple border for print */
        transform: none; /* Remove tilt */
        background-color: #fff;
        max-height: none; /* Remove max-height */
        overflow-y: visible; /* Show all content, let browser handle page breaks */
        padding: 20px; /* Adjust padding for print */
    }

    #summary-post-it h2,
    #summary-post-it h3,
    #summary-post-it p,
    #summary-post-it p strong {
        color: #000 !important; /* Ensure black text */
        font-size: 12pt; /* Standard print size */
    }
    #summary-post-it h2 {
        font-size: 16pt;
        text-align: left;
        border-bottom: 1px solid #ccc;
    }
    #summary-post-it h3 {
        font-size: 14pt;
    }

    #summary-post-it p {
        line-height: 1.4;
    }

    /* Hide scrollbars explicitly in print */
    #summary-post-it::-webkit-scrollbar {
        display: none;
    }
}