* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Special Elite', cursive;
    background: url("descarga (1).jpeg") center/cover no-repeat fixed;
    background-color: #000; /* fallback */
    color: #fff;
}

.video-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.video-overlay {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 1.1rem;
    letter-spacing: 0.4px;
    z-index: 10;
    pointer-events: none;
}

.video-container iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
}

.quiz-container {
    max-width: 1000px; /* increased from 800px to make question boxes wider */
    margin: 40px auto;
    padding: 40px 20px;
    background: rgba(0,0,0,0.65); /* dark overlay for readability */
    border: 1px solid rgba(255,255,255,0.04);
    backdrop-filter: blur(4px);
}

.quiz-container h1 {
    color: #fff;
    font-size: 3.5rem;
    margin-bottom: 10px;
    text-align: center;
}

.quiz-subtitle {
    color: #888;
    text-align: center;
    margin-bottom: 40px;
    font-size: 1.3rem;
}

.question-card {
    background: #111;
    border: 1px solid #222;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
    transition: border-color 0.3s ease;
}

.question-card:hover {
    border-color: #333;
}

.question-card h3 {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.question-text {
    color: #ddd;
    font-size: 1.3rem;
    margin-bottom: 20px;
    line-height: 1.6;
}

.counting-table-wrap {
    overflow-x: auto;
    margin-bottom: 18px;
}

.counting-table {
    width: 100%;
    border-collapse: collapse;
    background: #0f0f0f;
    border: 1px solid #222;
    border-radius: 8px;
    overflow: hidden;
}

.counting-table th,
.counting-table td {
    padding: 12px 14px;
    text-align: left;
    font-size: 1rem;
    color: #ddd;
    border-bottom: 1px solid #1b1b1b;
}

.counting-table th {
    background: #121212;
    color: #aaa;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.6px;
}

.counting-table tbody tr:nth-child(odd) td {
    background: #0a0a0a;
}

.counting-table tbody tr:nth-child(even) td {
    background: #0f0f0f;
}

.shopping-list-wrap {
    max-width: 1000px; /* match quiz width so shopping list aligns with wider layout */
    margin: 20px auto 60px;
    padding: 0 20px;
}

.shopping-list {
    background: linear-gradient(#fff7e8, #efe0c8);
    color: #2b1b10;
    border: 2px solid rgba(30,20,10,0.9); /* sharpened, darker border */
    padding: 26px 28px; /* increased padding for room */
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.65), inset 0 -6px 12px rgba(0,0,0,0.05); /* stronger shadow */
    font-family: 'Special Elite', cursive;
    transform: rotate(0deg); /* removed tilt for clarity */
    filter: none; /* remove softening filters */
    background-image: linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px);
    background-size: 100% 28px;
    max-width: 720px; /* keep it contained and readable */
}
.shopping-list h3 {
    font-size: 2rem; /* increased heading size */
    margin-bottom: 8px;
    color: #ffffff; /* changed to white */
}
.shopping-list .list-note {
    font-size: 1.15rem; /* larger note text */
    color: #ffffff; /* changed to white */
    margin-bottom: 10px;
}
.shopping-list ul {
    list-style: disc;
    padding-left: 28px;
    color: #ffffff; /* changed list text to white */
    line-height: 1.9; /* more spacing between lines */
    font-size: 1.35rem; /* increased size for readability */
    letter-spacing: 0.2px;
}
.shopping-list li {
    margin-bottom: 8px;
}

.examples {
    background: #0a0a0a;
    border-left: 3px solid #333;
    padding: 15px 20px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.examples-title {
    color: #aaa;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.examples ul {
    list-style-position: inside;
    color: #888;
    font-size: 1.1rem;
    line-height: 1.8;
}

.examples li {
    margin-bottom: 6px;
}

textarea {
    width: 100%;
    min-height: 200px;
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 8px;
    color: #fff;
    padding: 15px;
    font-size: 1.2rem;
    font-family: 'Special Elite', cursive;
    resize: vertical;
    margin-bottom: 20px;
    transition: border-color 0.3s ease;
}

textarea:focus {
    outline: none;
    border-color: #555;
}

textarea::placeholder {
    color: #666;
}

.submit-btn {
    background: #1a1a1a;
    border: 2px solid #333;
    color: #fff;
    padding: 15px 30px;
    border-radius: 8px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.submit-btn:hover {
    background: #222;
    border-color: #555;
    transform: translateY(-2px);
}

.submit-btn:active {
    transform: translateY(0);
}

.answer-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.answer-option {
    display: flex;
    align-items: center;
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 8px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.answer-option:hover {
    background: #222;
    border-color: #555;
    transform: translateX(5px);
}

.answer-option input[type="radio"] {
    width: 20px;
    height: 20px;
    margin-right: 15px;
    cursor: pointer;
    accent-color: #0f0;
}

.answer-option span {
    color: #ddd;
    font-size: 1.2rem;
}

.feedback {
    margin-top: 15px;
    padding: 15px;
    border-radius: 8px;
    font-weight: 500;
    display: none;
}

.feedback.show {
    display: block;
}

.feedback.correct {
    background: #0a4d0a;
    color: #0f0;
    border: 1px solid #0f0;
}

.feedback.incorrect {
    background: #4d0a0a;
    color: #f00;
    border: 1px solid #f00;
}

.feedback-feelings {
    margin-top: 15px;
    padding: 15px;
    border-radius: 8px;
    font-weight: 500;
    display: none;
}

.feedback-feelings.show {
    display: block;
}

.feedback-feelings.correct {
    background: #0a4d0a;
    color: #0f0;
    border: 1px solid #0f0;
}

.feedback-feelings.incorrect {
    background: #4d0a0a;
    color: #f00;
    border: 1px solid #f00;
}

.feedback-katie {
    margin-top: 15px;
    padding: 15px;
    border-radius: 8px;
    font-weight: 500;
    display: none;
}

.feedback-katie.show {
    display: block;
}

.feedback-katie.correct {
    background: #0a4d0a;
    color: #0f0;
    border: 1px solid #0f0;
}

.feedback-katie.incorrect {
    background: #4d0a0a;
    color: #f00;
    border: 1px solid #f00;
}

.feedback-cellar {
    margin-top: 15px;
    padding: 15px;
    border-radius: 8px;
    font-weight: 500;
    display: none;
}

.feedback-cellar.show {
    display: block;
}

.feedback-cellar.correct {
    background: #0a4d0a;
    color: #0f0;
    border: 1px solid #0f0;
}

.feedback-cellar.incorrect {
    background: #4d0a0a;
    color: #f00;
    border: 1px solid #f00;
}

.feedback-door {
    margin-top: 15px;
    padding: 15px;
    border-radius: 8px;
    font-weight: 500;
    display: none;
}

.feedback-door.show {
    display: block;
}

.feedback-door.correct {
    background: #0a4d0a;
    color: #0f0;
    border: 1px solid #0f0;
}

.feedback-door.incorrect {
    background: #4d0a0a;
    color: #f00;
    border: 1px solid #f00;
}

.feedback-atmosphere {
    margin-top: 15px;
    padding: 15px;
    border-radius: 8px;
    font-weight: 500;
    display: none;
}

.feedback-atmosphere.show {
    display: block;
}

.feedback-atmosphere.correct {
    background: #0a4d0a;
    color: #0f0;
    border: 1px solid #0f0;
}

.feedback-atmosphere.incorrect {
    background: #4d0a0a;
    color: #f00;
    border: 1px solid #f00;
}

.feedback-counting {
    margin-top: 15px;
    padding: 15px;
    border-radius: 8px;
    font-weight: 500;
    display: none;
}

.feedback-counting.show {
    display: block;
}

.feedback-counting.correct {
    background: #0a4d0a;
    color: #0f0;
    border: 1px solid #0f0;
}

.feedback-counting.incorrect {
    background: #4d0a0a;
    color: #f00;
    border: 1px solid #f00;
}

.score-display {
    background: #111;
    border: 2px solid #333;
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    margin-top: 40px;
}

.score-display p {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
}

.score-display span {
    color: #0f0;
    font-size: 2rem;
}

@media (max-width: 768px) {
    .quiz-container h1 {
        font-size: 2.5rem;
    }
    
    .question-card {
        padding: 20px;
        max-width: 100%;
    }
}