body {
    margin: 0;
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center; /* Center items for the quiz and fridges */
    align-items: center; /* Align items to center */
    flex-direction: column; /* Arrange items vertically */
    min-height: 100vh; /* Minimum height for initial view, but content can expand beyond this */
    background: url('school_corridor_background.png') no-repeat center center fixed;
    background-size: cover;
    color: #333;
    padding: 30px; /* Add padding to the body for spacing around fridges and quiz */
    box-sizing: border-box;
    position: relative; /* Needed for any absolutely positioned elements */
    gap: 40px; /* Gap between the quiz, the first refrigerator, and the second refrigerator */
}

/* Overhead Projector Screen / Post-it Style Quiz */
.overhead-projector-screen {
    width: 80%; /* Adjust width */
    max-width: 900px; /* Max width for readability */
    background-color: #fffdd0; /* Post-it/paper color */
    border: 1px solid #ccc;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); /* Stronger shadow */
    padding: 30px;
    border-radius: 8px;
    text-align: left;
    box-sizing: border-box;
    transform: rotate(-3deg); /* Rotate slightly like a note */
    flex-shrink: 0; /* Prevent it from shrinking */
}

.overhead-projector-screen h1 {
    font-size: 2.5em;
    color: #3f51b5;
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
}

.overhead-projector-screen p.instructions {
    text-align: center;
    font-size: 1.1em;
    margin-bottom: 30px;
    color: #555;
}

.quiz-questions {
    margin-top: 20px;
    margin-bottom: 30px;
}

.question-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

.quiz-checkbox {
    margin-right: 15px;
    margin-top: 5px; /* Align checkbox with text */
    min-width: 20px; /* Make checkbox larger/more clickable */
    min-height: 20px;
    cursor: pointer;
    accent-color: #4CAF50; /* Style the checkbox itself */
}

.question-item label {
    font-size: 1.1em;
    line-height: 1.5;
    color: #444;
    cursor: pointer;
    flex-grow: 1; /* Allow label to take available space */
}

#calculate-score-btn {
    display: block;
    margin: 30px auto;
    padding: 15px 30px;
    font-size: 1.5em;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
}

#calculate-score-btn:hover {
    background-color: #45a049;
}

.quiz-score {
    margin-top: 20px;
    padding: 20px;
    border: 2px dashed #a0a0a0;
    background-color: #f9f9f9;
    border-radius: 8px;
    text-align: center;
    font-size: 1.4em;
    color: #333;
}

#score-message {
    font-weight: bold;
    margin-top: 10px;
    color: #3f51b5; /* A distinct color for the message */
}

.refrigerator-container {
    width: 1200px; /* Much wider refrigerator container, increased from 1000px */
    /* Removed min-height: 95vh; - The height will now be determined by its content */
    /* This will be the outer chrome frame */
    border-radius: 25px; /* More pronounced rounded corners */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6), inset 0 0 100px rgba(255, 255, 255, 0.5); /* Deeper shadows */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 30px; /* Increased padding to make the chrome frame larger */
    box-sizing: border-box;
    flex-shrink: 0; /* Prevent container from shrinking if window is small */
    z-index: 1; /* Ensure fridge is above ads */
}

/* Vintage Fridge Specific Styles */
.vintage-fridge {
    background: linear-gradient(to bottom, #a8a8a8, #d4d4d4, #a8a8a8, #d4d4d4, #a8a8a8); /* Chrome effect */
}

.vintage-fridge .refrigerator-door {
    /* This is the actual door surface, vintage creamy color */
    background: linear-gradient(to bottom, #f3f0e8, #e0dcd1, #f3f0e8); /* Warmer, slightly aged cream */
    border-radius: 15px; /* Slightly less rounded than container to create a subtle inset */
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.3); /* Deeper inset shadow */
    position: relative;
    display: flex;
    flex-direction: column; /* To stack magnets and content */
    justify-content: flex-start; /* Align content to top */
    align-items: center;
    padding: 50px; /* Increased inner padding for content */
    box-sizing: border-box;
    width: 100%; /* Fills container */
    height: 100%; /* Allows door to expand with content */
}

.vintage-fridge .refrigerator-handle {
    position: absolute;
    right: 70px; /* Position from the right edge of the door, adjusted for wider fridge and smaller handle */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust for vertical centering */
    height: 75%; /* Longer handle */
    width: 40px; /* Smaller, chunkier handle, reduced from 70px */
    background: linear-gradient(to right, #b0b0b0, #e0e0e0, #b0b0b0, #e0e0e0, #b0b0b0); /* Stronger chrome effect */
    border-radius: 12px; /* More pronounced rounded edges */
    box-shadow: inset 5px 5px 12px rgba(255, 255, 255, 0.7), 5px 5px 12px rgba(0, 0, 0, 0.5); /* More prominent 3D effect */
    z-index: 5;
    /* Add a small dark line for a latch detail */
    border-right: 3px solid rgba(0,0,0,0.2);
    border-bottom: 3px solid rgba(0,0,0,0.2);
}

/* Industrial Fridge Specific Styles */
.industrial-fridge {
    background: linear-gradient(to bottom, #777, #bbb, #777, #bbb, #777); /* Steel/industrial effect */
    border-radius: 15px; /* Slightly less rounded for a utilitarian look */
    padding: 25px; /* Slightly increased padding for a rugged frame */
}

.industrial-fridge .refrigerator-door {
    background: #444; /* Darker, rugged door surface */
    border-radius: 10px;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6), 0 6px 15px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 40px; /* Increased inner padding */
    box-sizing: border-box;
    width: 100%;
    height: 100%; /* Allows door to expand with content */
}

.industrial-fridge .refrigerator-handle {
    position: absolute;
    background: linear-gradient(to right, #aaa, #ddd, #aaa); /* Simpler chrome for industrial */
    right: 60px; /* Adjusted for wider fridge and smaller handle */
    height: 80%;
    width: 35px; /* Smaller handle, reduced from 60px */
    border-radius: 8px;
    box-shadow: inset 3px 3px 8px rgba(255, 255, 255, 0.5), 3px 3px 8px rgba(0, 0, 0, 0.4);
    border-right: 2px solid rgba(0,0,0,0.1);
    border-bottom: 2px solid rgba(0,0,0,0.1);
    top: 50%; /* Added top: 50% */
    transform: translateY(-50%); /* Added transform: translateY(-50%) */
    z-index: 5; /* Added z-index */
}

.magnets-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px; /* Adjusted gap for smaller magnets */
    margin-bottom: 40px; /* Space between magnets and content display */
    width: 100%;
    max-width: none; /* Allow magnets area to expand with fridge width */
}

.magnet {
    width: 220px; /* Adjusted width for vintage magnets to be bigger */
    height: 130px; /* Adjusted height for vintage magnets to be bigger */
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.7em; /* Adjusted font size to be bigger */
    font-weight: bold;
    cursor: pointer;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    position: relative;
    text-align: center;
    padding: 10px; /* Increased padding */
    box-sizing: border-box;
    user-select: none;
    border: 2px solid rgba(255,255,255,0.8);
}

/* Vintage Magnet Specific Colors and Rotations */
.vintage-magnet#questions-magnet {
    background-color: #4CAF50; /* Green */
    transform: rotate(-5deg);
}
.vintage-magnet#response-magnet {
    background-color: #2196F3; /* Blue */
    transform: rotate(3deg);
}
.vintage-magnet#vocabulary-magnet {
    background-color: #FFC107; /* Amber */
    color: #333;
    transform: rotate(8deg);
}

.magnet:hover {
    transform: scale(1.06) rotate(var(--magnet-rotation, 0deg)); /* Slightly lift and scale on hover, more pronounced */
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.5);
    z-index: 10;
}
/* Ensure hover rotation matches initial rotation or is slightly adjusted */
.vintage-magnet#questions-magnet:hover { transform: scale(1.06) rotate(-7deg); }
.vintage-magnet#response-magnet:hover { transform: scale(1.06) rotate(5deg); }
.vintage-magnet#vocabulary-magnet:hover { transform: scale(1.06) rotate(10deg); }

/* Industrial Magnet Specific Styles */
.industrial-magnets-area {
    gap: 30px; /* Larger gap for fewer, bigger magnets */
    max-width: none; /* Allow to expand with fridge width */
}

.industrial-magnet {
    width: 300px; /* Larger width for industrial magnets */
    height: 120px; /* Larger height for industrial magnets */
    background-color: #555; /* Darker, metallic grey */
    border-radius: 5px; /* Less rounded corners */
    color: white;
    font-size: 1.8em; /* Slightly larger font */
    box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
    border: 2px solid #888; /* Metallic edge */
    transform: rotate(0deg); /* Start with no rotation */
}

.industrial-magnet#timeline-magnet {
    background-color: #607D8B; /* Blue Grey */
    transform: rotate(-3deg);
}
.industrial-magnet#reflection-magnet {
    background-color: #795548; /* Brown */
    transform: rotate(2deg);
}

.industrial-magnet:hover {
    transform: scale(1.05) rotate(var(--magnet-rotation, 0deg));
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
}
.industrial-magnet#timeline-magnet:hover { transform: scale(1.05) rotate(-5deg); }
.industrial-magnet#reflection-magnet:hover { transform: scale(1.05) rotate(4deg); }

.content-display {
    width: 100%; /* Take full available width within padding */
    max-width: none; /* Allow content to expand fully */
    border: 2px dashed #a0a0a0;
    padding: 40px; /* Increased padding */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    text-align: left;
    line-height: 1.8;
    color: #333;
    font-size: 1.35em; /* Bigger font for content */
    box-sizing: border-box;
}

/* Vintage content display styles */
#content-display-vintage {
    background-color: #fffdd0; /* Paper color */
}

/* Industrial content display styles */
.industrial-content-display {
    background-color: #e0e0e0; /* Lighter grey for a document feel */
    border: 1px solid #777; /* Simpler border */
    color: #222;
}

.content-display h2 {
    color: #3f51b5;
    margin-top: 0;
    text-align: center;
    font-size: 2.2em; /* Even bigger h2 */
}
.content-display h3 {
    color: #673ab7;
    margin-top: 25px; /* More margin */
    font-size: 1.7em; /* Even bigger h3 */
}
.content-display p {
    margin-bottom: 10px; /* Adjusted margin */
}
.content-display ul {
    margin-left: 30px; /* More indent */
    padding-left: 0;
    list-style-type: disc;
}
.content-display li {
    margin-bottom: 12px; /* More margin */
}