@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap'); /* Added Comic Neue for readability */

/* Add your CSS styles here */
body {
  background-color: #FFDE00; /* Bright Yellow - Comic book vibe */
  /* Optional: Add a subtle dot pattern */
  background-image: radial-gradient(circle, rgba(0,0,0,0.1) 1px, transparent 1px);
  background-size: 15px 15px;

  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; /* Removed to allow scrolling */
  min-height: 100vh;
  margin: 0;
  padding: 20px;
  box-sizing: border-box; /* Include padding in height calculation */
  font-family: 'Comic Neue', cursive; /* Use Comic Neue for body text */
  color: #222; /* Darker text color for contrast */
  text-align: center; /* Center text horizontally */
  font-size: 1.1em; /* Base font size increase */
}

h1 {
  font-family: 'Bangers', cursive; /* Comic-style font */
  font-size: 6em; /* Big font */
  text-transform: uppercase; /* Uppercase */
  margin-top: 20px;
  margin-bottom: 30px;
  color: #FF00FF; /* Neon Magenta */
  -webkit-text-stroke: 1.5px white; /* White outline for pop */
  text-stroke: 1.5px white; /* Standard syntax */
  /* Neon glow effect combined with a slight dark shadow */
  text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.3), /* Dark offset for definition */
               0 0 8px rgba(255, 0, 255, 0.8), /* Inner magenta glow */
               0 0 12px rgba(255, 0, 255, 0.6); /* Outer magenta glow */
  letter-spacing: 4px; /* Letter spacing */
  transform: skew(-5deg); /* Slight skew for dynamic feel */
}

/* Styles for the new intro text panel */
.intro-text-panel {
    background-color: rgba(255, 255, 255, 0.7); /* Slightly transparent white */
    padding: 25px;
    border-radius: 5px; /* Slightly rounded corners */
    width: 100%;
    max-width: 800px; /* Max width */
    margin-bottom: 40px; /* Space below */
    text-align: center; /* Center text */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow */
    border: 2px dashed #FF4500; /* OrangeRed dashed border */
}

.intro-text-panel p {
    font-size: 1.3em; /* Readable size */
    color: #333;
    line-height: 1.6;
    margin-bottom: 20px;
}

.intro-text-panel h3 {
    font-family: 'Comic Neue', cursive; /* Keep readable font */
    font-size: 1.6em; /* Slightly larger than paragraph */
    color: #0077CC; /* Blue */
    margin-top: 20px;
    margin-bottom: 15px;
    font-weight: bold;
}

.video-container {
  position: relative;
  width: 100%;
  max-width: 700px; /* Increased Max width for the video player */
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  border-radius: 0px; /* Sharp corners like a panel */
  box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.8); /* Stronger, solid shadow */
  border: 5px solid #000000; /* Thick black border like a comic panel */
  background-color: #000; /* Black background while iframe loads */
  margin-bottom: 40px; /* Space below video */
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0; /* Remove default iframe border */
}

/* Quiz Styling */
#quiz-container, #quiz-container-2, #quiz-container-3 { /* Apply to all three quiz containers */
    background-color: #fff;
    padding: 35px; /* Slightly more padding */
    border: 4px solid #000;
    box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.7);
    width: 100%;
    max-width: 750px; /* Limit width */
    margin-bottom: 40px; /* Space at the bottom */
    text-align: left; /* Align quiz content left */
    border-radius: 0px; /* Sharp comic corners */
}

#quiz-container h2, #quiz-container-2 h2, #quiz-container-3 h2 { /* Apply to all three h2s */
    font-family: 'Bangers', cursive;
    font-size: 3em; /* Increased size */
    color: #0077CC; /* Blue */
    -webkit-text-stroke: 1.5px black; /* Slightly thicker stroke */
    text-stroke: 1.5px black;
    text-align: center;
    margin-bottom: 20px; /* More space */
    text-transform: uppercase;
    letter-spacing: 2px;
}

#quiz-container p, #quiz-container-2 p, #quiz-container-3 p { /* Apply to all three paragraphs */
    font-size: 1.2em; /* Increased size */
    text-align: center;
    margin-bottom: 35px; /* More space */
    color: #333;
}

.question-block {
    margin-bottom: 30px; /* Increased space */
    background-color: #f0f0f0; /* Light grey background for each block */
    padding: 20px; /* More padding */
    border: 2px dashed #555; /* Dashed border */
    border-radius: 0;
}

.question-block label {
    display: block;
    font-weight: bold;
    margin-bottom: 12px; /* More space */
    font-size: 1.3em; /* Increased size */
    color: #444;
}

.answer-input {
    width: calc(100% - 24px); /* Full width minus padding/border */
    padding: 12px; /* More padding */
    border: 2px solid #000;
    font-family: 'Comic Neue', cursive;
    font-size: 1.1em; /* Increased size */
    margin-bottom: 8px; /* More space */
    border-radius: 0; /* Sharp corners */
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.2);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.answer-input:focus {
    outline: none;
    border-color: #FF4500; /* OrangeRed focus */
    box-shadow: 3px 3px 0px #FF4500;
}

.feedback {
    font-size: 1em; /* Increased size */
    font-weight: bold;
    min-height: 1.3em; /* Reserve space */
    margin-top: 8px; /* More space */
    margin-bottom: 12px; /* Add space before button */
    text-align: center; /* Center feedback text */
}

.feedback.correct-feedback {
    color: #28a745; /* Green */
    font-family: 'Bangers', cursive;
    letter-spacing: 1.5px; /* More spacing */
}

.feedback.incorrect-feedback {
    color: #dc3545; /* Red */
}

.answer-input.correct {
    border-color: #28a745; /* Green border */
    background-color: #e9f7ec;
}

.answer-input.incorrect {
    border-color: #dc3545; /* Red border */
    background-color: #fdecea;
}

.comic-button {
    display: block; /* Default to block */
    padding: 18px 25px; /* More padding */
    font-family: 'Bangers', cursive;
    font-size: 2em; /* Increased size */
    text-transform: uppercase;
    letter-spacing: 2.5px; /* More spacing */
    color: #fff;
    background-color: #FF4500; /* OrangeRed */
    border: 3px solid #000;
    border-radius: 0;
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.7);
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    text-align: center;
    width: auto; /* Allow button to size to content */
    margin-left: auto; /* Push button right */
    margin-right: auto; /* Center button */
    margin-top: 25px; /* Add space above */
}

.comic-button:hover {
    background-color: #e03e00;
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.7);
}

.comic-button:active {
    transform: translate(5px, 5px);
    box-shadow: none;
}

.check-button.small-button {
    width: auto; /* Fit content */
    max-width: 220px; /* Limit max width */
    padding: 10px 18px; /* More padding */
    font-size: 1.4em; /* Increased size */
    margin: 8px 0 0 auto; /* Align right, add small top margin */
    display: block; /* Ensure it's on its own line if needed */
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.6);
    border-width: 2px;
    margin-right: 0; /* Override centering for small check buttons */
}

.check-button.small-button:hover {
    background-color: #e03e00;
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.6);
}

.check-button.small-button:active {
    transform: translate(3px, 3px);
    box-shadow: none;
}

/* Styles for the second quiz */
#superpower-list {
    margin-top: 25px; /* More space */
    margin-bottom: 35px; /* More space */
}

.superpower-item {
    display: flex; /* Align checkbox and label */
    align-items: center;
    margin-bottom: 15px; /* More space */
    background-color: #f8f8f8;
    padding: 12px; /* More padding */
    border: 1px solid #ddd;
    border-radius: 4px; /* Slightly rounded corners for items */
    cursor: pointer; /* Make the whole item clickable */
    transition: background-color 0.2s ease;
}

.superpower-item:hover {
    background-color: #eee;
}

.superpower-item input[type="checkbox"] {
    margin-right: 18px; /* More space */
    cursor: pointer;
    /* Make checkbox slightly larger */
    width: 20px; /* Larger checkbox */
    height: 20px;
    accent-color: #FF4500; /* Style the check color */
}

.superpower-item label {
    flex-grow: 1; /* Label takes remaining space */
    font-size: 1.2em; /* Increased size */
    color: #333;
    cursor: pointer; /* Indicate label is clickable */
}

/* Style for the second quiz feedback */
#feedback-not-mentioned {
    font-size: 1.3em; /* Slightly larger feedback */
    min-height: 1.6em; /* More space */
    margin-top: 25px; /* More space */
    font-weight: bold;
}

#feedback-not-mentioned.correct-feedback {
    color: #28a745;
    font-family: 'Bangers', cursive;
    letter-spacing: 1.5px; /* More spacing */
}

#feedback-not-mentioned.incorrect-feedback {
    color: #dc3545;
}

/* Styling for correct/incorrect highlighting in second quiz */
.superpower-item.correct-selection {
    background-color: #e9f7ec; /* Light green */
    border-color: #28a745;
}
.superpower-item.incorrect-selection {
    background-color: #fdecea; /* Light red */
    border-color: #dc3545;
}
.superpower-item.missed-selection { /* Style for items that *should* have been selected */
     background-color: #fff3cd; /* Light yellow */
     border: 2px dashed #ffc107; /* Dashed yellow border */
}

/* Styles for Quiz 3 (Superhero Guessing) */
#quiz-container-3 {
    /* Inherits comic-panel styles */
    margin-top: 40px; /* Add space above this section */
    margin-bottom: 40px; /* Ensure consistent spacing */
}

#superhero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid */
    gap: 30px; /* Space between grid items */
    margin-top: 20px;
}

.superhero-block {
    background-color: #f8f8f8; /* Light background for each block */
    padding: 20px;
    border: 3px solid #555; /* Slightly thicker border */
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5); /* Comic shadow */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items */
    text-align: center;
    border-radius: 0; /* Sharp corners */
}

.superhero-image {
    width: 150px; /* Fixed image width */
    height: 150px; /* Fixed image height */
    object-fit: cover; /* Cover the area, might crop */
    border: 3px solid #000;
    margin-bottom: 20px; /* Space below image */
    background-color: #ddd; /* Placeholder background */
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.3);
}

.superhero-block label.superhero-question-label { 
    display: block;
    font-weight: bold;
    margin-bottom: 15px; 
    font-size: 1.3em; 
    color: #444;
}

.superhero-block .superpower-options {
    width: 100%; 
    margin-bottom: 15px; 
    text-align: left; 
}

.superhero-block .superpower-option {
    display: flex;
    align-items: center;
    margin-bottom: 8px; 
    padding: 8px;
    background-color: #fff; 
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
}

.superhero-block .superpower-option:hover {
    background-color: #f0f0f0;
}

.superhero-block .superpower-option input[type="radio"] {
    margin-right: 12px; 
    cursor: pointer;
    width: 18px; 
    height: 18px;
    accent-color: #FF4500; 
}

.superhero-block .superpower-option label { 
    font-size: 1.1em;
    color: #333;
    cursor: pointer;
    flex-grow: 1; 
    font-weight: normal; 
    margin-bottom: 0; 
}

.superhero-block .superpower-option.correct-answer {
    background-color: #e9f7ec; 
    border-color: #28a745;
    font-weight: bold; 
}
.superhero-block .superpower-option.incorrect-selection {
    background-color: #fdecea; 
    border-color: #dc3545;
    opacity: 0.7; 
}

.superhero-block .feedback {
     margin-top: 10px; 
     margin-bottom: 15px; 
     min-height: 1.6em; 
     font-size: 1.1em; 
     font-weight: bold;
}

.superhero-block .check-button.small-button {
    margin-top: 10px; 
    margin-left: auto; 
    margin-right: auto; 
}

/* Styles for the results panel */
.results-panel {
    background-color: #e0f7fa; 
    border: 4px solid #0077CC; 
    padding: 25px; 
    margin-top: 35px; 
    text-align: center;
    display: none; 
    border-radius: 0;
    box-shadow: 4px 4px 0px #0077CC; 
}

.results-panel.show {
    display: block;
    animation: popIn 0.5s ease-out forwards;
}

.results-panel h2 {
     font-family: 'Bangers', cursive;
    font-size: 2.2em; 
    color: #FF4500; 
    -webkit-text-stroke: 1px black;
    text-stroke: 1px black;
    margin-bottom: 15px; 
}

.results-panel p {
    font-size: 1.3em; 
    font-weight: bold;
    color: #222;
}

@keyframes popIn {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Styles for the "Post-it" Everyday Superpowers section */
#post-it-superpowers {
    background-color: #FFFF99; /* Post-it yellow */
    padding: 45px; /* Increased padding */
    border: 2px solid #E6E66A; /* Slightly darker yellow border */
    box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.25); /* Slightly bigger shadow */
    transform: rotate(-2.5deg); /* Slight tilt */
    width: 100%;
    max-width: 850px; /* Significantly increased max width */
    margin-bottom: 60px; /* Increased space below */
    text-align: left;
    position: relative; /* Needed for potential pseudo-elements if added later */
    font-family: 'Comic Neue', cursive; /* Keep consistent comic feel but less formal */
}

/* Optional: Adjust tape effect for larger size */
#post-it-superpowers::before {
    content: '';
    position: absolute;
    top: -20px; /* Adjust position */
    left: 50%;
    transform: translateX(-50%) rotate(3deg);
    width: 150px; /* Wider tape */
    height: 40px; /* Taller tape */
    background-color: rgba(255, 255, 255, 0.4); /* Semi-transparent tape */
    border-left: 1px dashed rgba(0, 0, 0, 0.2);
    border-right: 1px dashed rgba(0, 0, 0, 0.2);
    box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
}

#post-it-superpowers h3 {
    font-family: 'Bangers', cursive; /* Use Bangers for consistency */
    font-size: 3.5em; /* Increased heading size */
    color: #D2691E; /* Chocolate/Brownish color */
    -webkit-text-stroke: 1.5px black; /* Slightly thicker stroke */
    text-stroke: 1.5px black;
    text-align: center;
    margin-bottom: 15px; /* Increased space */
    text-transform: uppercase;
    letter-spacing: 1.5px; /* Increased spacing */
}

#post-it-superpowers p {
     font-size: 1.4em; /* Increased paragraph size */
     text-align: center;
     margin-bottom: 35px; /* Increased space */
     color: #555;
     font-style: italic;
}

#post-it-superpowers ul {
    list-style: none; /* Remove default bullets */
    padding-left: 0;
    margin: 0;
}

#post-it-superpowers li {
    margin-bottom: 25px; /* Increased space between items */
    font-size: 1.4em; /* Increased list item size */
    line-height: 1.6; /* Adjust line height */
    color: #333;
    padding-left: 40px; /* Increased indent for bigger bullet */
    position: relative; /* For custom bullet */
}

/* Custom bullet point - larger */
#post-it-superpowers li::before {
    content: "💥"; /* Sparkle/Burst emoji */
    position: absolute;
    left: 0;
    top: 0px; /* Adjust vertical alignment if needed */
    font-size: 1.5em; /* Increased bullet size */
    color: #FF4500; /* OrangeRed */
}

#post-it-superpowers li strong {
    font-weight: bold;
    color: #0077CC; /* Blue */
    display: inline; /* Keep inline with text */
}

/* Responsive adjustments */
@media (max-width: 900px) { /* Adjust breakpoint for the larger post-it */
    #post-it-superpowers {
        max-width: 90%; /* Slightly smaller % to fit */
        padding: 35px;
    }
     #post-it-superpowers h3 {
        font-size: 3em;
    }
    #post-it-superpowers p {
        font-size: 1.3em;
    }
    #post-it-superpowers li {
        font-size: 1.3em;
        padding-left: 35px;
        margin-bottom: 20px;
    }
    #post-it-superpowers li::before {
        font-size: 1.3em;
    }
     #post-it-superpowers::before { /* Scale tape */
        width: 120px;
        height: 35px;
        top: -18px;
     }
}


@media (max-width: 768px) {
  body {
      font-size: 1em;
  }
  h1 {
    font-size: 4.5em; /* Adjusted size */
    margin-bottom: 30px;
    -webkit-text-stroke-width: 1px; /* Thinner stroke for smaller size */
    text-stroke-width: 1px;
     /* Adjust shadow for smaller size */
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3),
                 0 0 6px rgba(255, 0, 255, 0.8),
                 0 0 10px rgba(255, 0, 255, 0.6);
  }
  .video-container {
    border-width: 4px;
    box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.8);
    max-width: 90%;
  }
   #quiz-container, #quiz-container-2, #quiz-container-3, #post-it-superpowers { /* Apply to all panels */
        padding: 25px;
        max-width: 95%;
    }

   #post-it-superpowers {
        transform: rotate(-1.5deg); /* Less rotation on smaller screens */
   }
    #post-it-superpowers h3 {
        font-size: 2.5em; /* Adjusted size */
    }
     #post-it-superpowers p {
        font-size: 1.2em; /* Adjusted size */
    }
     #post-it-superpowers li {
        font-size: 1.2em; /* Adjusted size */
        padding-left: 30px;
        margin-bottom: 18px;
    }
     #post-it-superpowers li::before {
        font-size: 1.2em; /* Adjusted size */
    }
     #post-it-superpowers::before { /* Scale tape for medium screens */
        width: 100px;
        height: 30px;
        top: -15px;
     }
}

@media (max-width: 480px) {
    body {
      font-size: 0.9em;
    }
  h1 {
    font-size: 3em; /* Adjusted size */
    margin-bottom: 25px;
    letter-spacing: 2px;
    -webkit-text-stroke-width: 0.5px; /* Even thinner stroke */
    text-stroke-width: 0.5px;
    /* Further adjust shadow */
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3),
                 0 0 4px rgba(255, 0, 255, 0.8),
                 0 0 8px rgba(255, 0, 255, 0.6);
    transform: skew(-3deg); /* Adjusted skew */
  }
  .video-container {
    max-width: 95%;
    border-width: 3px;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.8);
    margin-bottom: 30px;
  }
   #quiz-container, #quiz-container-2, #quiz-container-3, #post-it-superpowers { /* Apply to all panels */
        padding: 20px;
    }

     #post-it-superpowers {
        transform: rotate(-1deg); /* Even less rotation */
        max-width: 98%;
     }
     #post-it-superpowers::before { /* Adjust tape on small screens */
        width: 80px;
        height: 25px;
        top: -12px;
     }
    #post-it-superpowers h3 {
        font-size: 2em; /* Adjusted size */
    }
     #post-it-superpowers p {
        font-size: 1.1em; /* Adjusted size */
        margin-bottom: 20px;
    }
     #post-it-superpowers li {
        font-size: 1.1em; /* Adjusted size */
         padding-left: 25px; /* Adjusted padding */
         margin-bottom: 15px; /* Adjusted margin */
    }
      #post-it-superpowers li::before {
         font-size: 1.1em; /* Adjusted size */
    }
    .superhero-block .check-button.small-button {
         width: calc(100% - 16px);
         margin-left: auto;
         margin-right: auto;
    }
}