@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Nosifer&family=Eater&display=swap');

body {
    margin: 0;
    padding: 30px;
    background: linear-gradient(180deg, #000000, #1a1a1a, #ff6600, #ff8c00);
    background-size: 400% 400%;
    animation: gradientShift 8s ease-in-out infinite;
    font-family: 'Creepster', 'Chiller', 'Brush Script MT', cursive, sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Debug Details Panel - Game-specific styling */

/* Debug Summary - Game-specific styling */
.debug-summary {
    color: #ff6600;
    font-family: 'Creepster', cursive;
}

/* Target Words Table - Game-specific styling */
.target-words-table th,
.target-words-table td {
    border-color: #ff6600;
}

.target-words-table th {
    background: rgba(255, 102, 0, 0.3);
}

.target-words-table .active-word {
    background-color: rgba(255, 102, 0, 0.3);
}

/* Media Controls - Let flex positioning handle this naturally */



/* Recognition Counter Display */
.target-word-counter {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(30, 58, 138, 0.9);
    color: white;
    font-size: 12pt;
    font-family: 'Courier New', monospace;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #1E3A8A;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(30, 58, 138, 0.3);
    font-weight: bold;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.kids-frame-container {
    position: relative;
    padding: 40px;
}

.wavy-purple-frame {
    width: 72vw;
    height: 72vh;
    max-width: 1400px;
    position: relative;
    background: linear-gradient(to bottom, #2a0a0a 0%, #1a1a1a 30%, #333333 70%, #4a4a4a 100%);
    border-radius: 25px;
    box-shadow: 0 10px 30px rgba(255, 102, 0, 0.4);
}

.wavy-border {
    position: absolute;
    top: -40px;
    left: -72px;
    right: -72px;
    bottom: -72px;
    background: linear-gradient(135deg, #ff6600, #ff8c00, #ffaa00, #000000, #1a1a1a);
    border-radius: 80px;
    z-index: -1;
}

.wavy-border::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -30px;
    right: -30px;
    bottom: -30px;
    background: linear-gradient(45deg, #1E40AF, #3B82F6, #DBEAFE, #2563EB);
    border-radius: 100px;
    z-index: -1;
    clip-path: polygon(
        0% 22%, 1% 2%, 3% 28%, 5% 8%, 7% 35%, 9% 5%, 12% 30%, 15% 2%, 18% 38%, 
        21% 8%, 24% 32%, 27% 3%, 30% 25%, 33% 12%, 36% 40%, 39% 5%, 42% 28%, 
        45% 15%, 48% 35%, 51% 2%, 54% 42%, 57% 10%, 60% 32%, 63% 5%, 66% 38%, 
        69% 15%, 72% 25%, 75% 8%, 78% 40%, 81% 12%, 84% 30%, 87% 3%, 90% 35%, 
        93% 18%, 96% 28%, 98% 5%, 100% 22%, 
        100% 78%, 98% 98%, 96% 72%, 93% 95%, 90% 68%, 87% 92%, 84% 75%, 81% 98%, 
        78% 65%, 75% 88%, 72% 78%, 69% 95%, 66% 68%, 63% 92%, 60% 72%, 57% 98%, 
        54% 62%, 51% 95%, 48% 68%, 45% 92%, 42% 75%, 39% 98%, 36% 65%, 33% 88%, 
        30% 78%, 27% 95%, 24% 72%, 21% 98%, 18% 68%, 15% 92%, 12% 75%, 9% 98%, 
        7% 68%, 5% 95%, 3% 78%, 1% 92%, 0% 78%
    );
}

.wavy-border::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    background: linear-gradient(225deg, #EFF6FF, #DBEAFE, #DBEAFE, #93C5FD);
    border-radius: 60px;
    z-index: -2;
    opacity: 0.8;
    clip-path: polygon(
        0% 28%, 2% 5%, 4% 35%, 7% 12%, 10% 40%, 13% 8%, 16% 32%, 19% 2%, 22% 38%, 
        25% 15%, 28% 42%, 31% 8%, 34% 28%, 37% 18%, 40% 45%, 43% 5%, 46% 35%, 
        49% 22%, 52% 40%, 55% 10%, 58% 32%, 61% 5%, 64% 42%, 67% 18%, 70% 28%, 
        73% 8%, 76% 38%, 79% 22%, 82% 45%, 85% 12%, 88% 32%, 91% 5%, 94% 40%, 
        97% 18%, 100% 28%, 
        100% 72%, 97% 95%, 94% 65%, 91% 98%, 88% 72%, 85% 92%, 82% 58%, 79% 88%, 
        76% 68%, 73% 95%, 70% 75%, 67% 92%, 64% 62%, 61% 98%, 58% 72%, 55% 88%, 
        52% 65%, 49% 95%, 46% 68%, 43% 98%, 40% 58%, 37% 85%, 34% 75%, 31% 95%, 
        28% 62%, 25% 92%, 22% 68%, 19% 98%, 16% 72%, 13% 95%, 10% 65%, 7% 92%, 
        4% 68%, 2% 98%, 0% 72%
    );
}

/* Add additional thick curvy layers */
.wavy-border::first-letter {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    right: -50px;
    bottom: -50px;
    background: linear-gradient(90deg, #6D28D9, #1E40AF, #2563EB, #3B82F6);
    border-radius: 120px;
    z-index: -3;
    opacity: 0.6;
}

/* Additional curvy outer layer */
.kids-frame-container::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -90px;
    right: -90px;
    bottom: -90px;
    background: linear-gradient(180deg, #1E3A8A, #1D4ED8, #1E3A8A, #2563EB);
    border-radius: 140px;
    z-index: -4;
    opacity: 0.4;
    clip-path: polygon(
        0% 32%, 1% 8%, 3% 42%, 5% 15%, 8% 45%, 11% 5%, 14% 38%, 17% 22%, 20% 48%, 
        23% 10%, 26% 40%, 29% 18%, 32% 45%, 35% 8%, 38% 35%, 41% 25%, 44% 50%, 
        47% 12%, 50% 42%, 53% 20%, 56% 48%, 59% 8%, 62% 38%, 65% 28%, 68% 45%, 
        71% 15%, 74% 40%, 77% 22%, 80% 48%, 83% 10%, 86% 38%, 89% 25%, 92% 45%, 
        95% 18%, 98% 35%, 100% 32%, 
        100% 68%, 98% 98%, 95% 62%, 92% 95%, 89% 58%, 86% 92%, 83% 75%, 80% 98%, 
        77% 62%, 74% 88%, 71% 68%, 68% 95%, 65% 55%, 62% 92%, 59% 75%, 56% 98%, 
        53% 62%, 50% 88%, 47% 65%, 44% 95%, 41% 58%, 38% 92%, 35% 75%, 32% 98%, 
        29% 62%, 26% 88%, 23% 68%, 20% 95%, 17% 58%, 14% 92%, 11% 75%, 8% 98%, 
        5% 62%, 3% 88%, 1% 68%, 0% 68%
    );
}

.grass-field {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 25%;
    background: linear-gradient(to bottom, #1a1a1a 0%, #0d0d0d 50%, #000000 100%);
    border-radius: 0 0 25px 25px;
    z-index: 0;
}

.grass-field::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to bottom, #2a2a2a 0%, #1a1a1a 50%, #0d0d0d 100%);
    clip-path: polygon(
        0% 100%, 8% 60%, 15% 75%, 22% 45%, 30% 65%, 38% 35%, 45% 55%, 52% 25%, 
        60% 50%, 67% 20%, 75% 45%, 82% 15%, 88% 40%, 94% 10%, 100% 35%, 
        100% 100%
    );
}

.grass-field::after {
    content: '';
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    height: 35px;
    background: linear-gradient(to bottom, #333333 0%, #222222 50%, #111111 100%);
    clip-path: polygon(
        0% 100%, 12% 70%, 25% 80%, 35% 50%, 48% 75%, 60% 40%, 72% 65%, 85% 30%, 
        95% 55%, 100% 25%, 100% 100%
    );
}





.control-button {
    width: 80pt;
    height: 80pt;
    border-radius: 50%;
    border: 8px solid #ff6600;
    background: rgba(0, 0, 0, 0.9);
    color: #ff6600;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px #ff6600;
    transition: all 0.2s ease;
}

.play-button {
    padding-left: 10pt;
    background: #ff6600;
    color: black;
}

.play-button.playing {
    background: #ffaa00;
    color: black;
    padding-left: 0pt;
}

.restart-button {
    background: #cc3300;
    color: white;
}

.control-button:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.control-button:active {
    transform: scale(0.95);
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2);
}

.play-button:hover {
    background: #228B22;
}

.play-button:active {
    background: #1F5F1F;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.play-button.playing:hover {
    background: #FFA500;
}

.play-button.playing:active {
    background: #CC8400;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.restart-button:hover {
    background: #1E90FF;
}

.restart-button:active {
    background: #1873CC;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.back-button {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1001;
    background: #1E3A8A;
    color: white;
    font-size: 24px;
    font-weight: bold;
}

.back-button:hover {
    background: #1D4ED8;
}

.back-button:active {
    background: #1E3A8A;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Additional pressed class for JavaScript-triggered effects */
.control-button.pressed {
    transform: scale(0.90);
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: all 0.1s ease-out;
}

.play-button.pressed {
    background: #1A5A1A;
}

.play-button.playing.pressed {
    background: #B8770A;
}

.restart-button.pressed {
    background: #146BB3;
}

.frame-content {
    position: relative;
    z-index: 1;
    height: 100%;
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: space-between;
}

h1 {
    color: #ff6600;
    font-family: 'Creepster', 'Eater', cursive;
    font-size: 2.4em;
    margin-bottom: 15px;
    text-shadow: 3px 3px 0px #000000, 0 0 10px #ff6600;
    transform: rotate(-2deg);
    letter-spacing: 2px;
}

p {
    color: #1E3A8A;
    font-size: 1.1em;
    line-height: 1.5;
    margin: 10px 0;
    background: linear-gradient(45deg, #EFF6FF, #DBEAFE);
    padding: 15px;
    border-radius: 15px;
    border: 3px dashed #2563EB;
    transform: rotate(1deg);
}

.fun-decorations {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: hidden;
}

.floater {
    position: absolute;
    color: #3B82F6;
    font-size: 20px;
    animation: musicalFloat 2s ease-in-out infinite;
}

@keyframes musicalFloat {
    0%, 100% { opacity: 0.4; transform: scale(1) rotate(0deg) translateY(0px); }
    50% { opacity: 1; transform: scale(1.2) rotate(10deg) translateY(-5px); }
}

.floater:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; }
.floater:nth-child(2) { top: 20%; right: 15%; animation-delay: 0.5s; }
.floater:nth-child(3) { bottom: 25%; left: 12%; animation-delay: 1s; }
.floater:nth-child(4) { bottom: 15%; right: 10%; animation-delay: 1.5s; }

/* Musical notes outside the frame */
.outside-floats {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -1;
}

.floater {
    position: absolute;
    font-size: 24px;
    animation: drift 8s ease-in-out infinite;
}

@keyframes drift {
    0%, 100% { 
        opacity: 0.2; 
        transform: scale(0.8) rotate(0deg) translateY(0px) translateX(0px); 
    }
    25% { 
        opacity: 0.6; 
        transform: scale(1.1) rotate(5deg) translateY(-15px) translateX(10px); 
    }
    50% { 
        opacity: 0.8; 
        transform: scale(1.2) rotate(-3deg) translateY(-20px) translateX(-5px); 
    }
    75% { 
        opacity: 0.4; 
        transform: scale(0.9) rotate(8deg) translateY(-10px) translateX(15px); 
    }
}

.floater:nth-child(1) { 
    top: 10%; left: 5%; 
    color: #2563EB; 
    animation-delay: 0s; 
    animation-duration: 6s;
}
.floater:nth-child(2) { 
    top: 25%; right: 8%; 
    color: #3B82F6; 
    animation-delay: 1s; 
    animation-duration: 7s;
}
.floater:nth-child(3) { 
    bottom: 20%; left: 3%; 
    color: #1E40AF; 
    animation-delay: 2s; 
    animation-duration: 8s;
}
.floater:nth-child(4) { 
    bottom: 35%; right: 5%; 
    color: #DBEAFE; 
    animation-delay: 3s; 
    animation-duration: 5s;
}
.floater:nth-child(5) { 
    top: 50%; left: 2%; 
    color: #1E3A8A; 
    animation-delay: 1.5s; 
    animation-duration: 9s;
}
.floater:nth-child(6) { 
    top: 70%; right: 3%; 
    color: #2563EB; 
    animation-delay: 4s; 
    animation-duration: 6s;
}
.floater:nth-child(7) { 
    top: 15%; left: 50%; 
    color: #3B82F6; 
    animation-delay: 2.5s; 
    animation-duration: 7s;
}
.floater:nth-child(8) { 
    bottom: 10%; left: 45%; 
    color: #1D4ED8; 
    animation-delay: 5s; 
    animation-duration: 8s;
}

.floater {
    position: absolute;
    color: #F472B6;
    font-size: 15px;
    animation: float 4s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

.floater:nth-child(5) { top: 30%; left: 5%; animation-delay: 0s; }
.floater:nth-child(6) { top: 70%; right: 8%; animation-delay: 2s; }

/* Audio section styling */
.audio-section {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    padding: 20px;
    margin: 20px auto;
    max-width: 600px;
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.2);
    font-family: 'Comic Sans MS', cursive, sans-serif;
}

.audio-section h3 {
    text-align: center;
    color: #1D4ED8;
    margin-bottom: 15px;
    font-size: 1.2em;
}

.audio-player {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.audio-player label {
    color: #1E3A8A;
    font-weight: bold;
    min-width: 60px;
}

.audio-player audio {
    flex: 1;
    border-radius: 8px;
    filter: sepia(20%) hue-rotate(280deg) saturate(1.2);
}

/* Lyrics Display Styling */
.lyrics-container {
    border-radius: 20px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 4px 16px rgba(123, 58, 237, 0.3);
    width: 80%;
}

.sentence-display {
    font-family: 'Nosifer', 'Creepster', cursive;
    font-size: 1.6rem;
    line-height: 1.4;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    color: #ff6600;
    text-shadow: 2px 2px 4px #000000, 0 0 8px #ff6600;
    margin-bottom: 15px;
    word-wrap: break-word;
    word-break: normal;
    overflow-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    padding: 0 15px;
    overflow: visible;
}

.word {
    margin: 0 8px;
    padding: 4px 8px;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: inline-block;
}

.word.highlighted {
    background: linear-gradient(45deg, #ff6600, #ffaa00);
    color: #1a1a1a;
    transform: scale(1.1);
    box-shadow: 0 2px 12px rgba(255, 102, 0, 0.6);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.word.target-word {
    font-size: 1.2em;
    text-shadow: none;
}

.progress-container {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    border: 1px solid #ff6600;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff3300, #ff6600, #ffaa00);
    border-radius: 4px;
    width: 0%;
    transition: width 0.1s ease;
    box-shadow: 0 0 8px rgba(255, 102, 0, 0.6);
}

/* Intro message animations */
.sentence-display br {
    line-height: 0.5;
}

@keyframes introGlow {
    0%, 100% { 
        text-shadow: 0 0 5px #ff6600, 0 0 10px #ff3300;
        transform: scale(1);
    }
    50% { 
        text-shadow: 0 0 10px #ff9900, 0 0 20px #ffaa00;
        transform: scale(1.02);
    }
}

.sentence-display:has-text("Get ready"), 
.sentence-display:has-text("Ready?"), 
.sentence-display:has-text("Here we go!") {
    animation: introGlow 1s ease-in-out infinite;
    font-size: 1.3em;
}

/* Image Container and Sentence Images */
.image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allow clicks to pass through */
    z-index: 1; /* Behind lyrics and controls */
}

.sentence-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    pointer-events: none;
}

.sentence-image.active {
    opacity: 1;
}

/* Ensure lyrics container and media controls are above images */
.lyrics-container {
    position: relative;
    z-index: 100; /* Above all images */
}



/* Modal Styles - Vampire Theme */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.vampire-modal {
    background: linear-gradient(135deg, #1a1a1a, #2d1810);
    border: 3px solid #ff6600;
    border-radius: 20px;
    box-shadow: 0 0 30px rgba(255, 102, 0, 0.6), inset 0 0 20px rgba(0, 0, 0, 0.8);
    max-width: 500px;
    width: 90%;
    color: #ff9900;
    font-family: 'Creepster', 'Nosifer', cursive;
}

.modal-header {
    text-align: center;
    padding: 20px;
    border-bottom: 2px solid #ff6600;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.8em;
    text-shadow: 0 0 10px #ff6600;
    color: #ff6600;
}

.modal-body {
    padding: 30px;
    text-align: center;
    line-height: 1.6;
    font-family: system-ui, -apple-system, sans-serif;
}

.modal-body p {
    margin: 15px 0;
    font-size: 1.1em;
    font-weight: normal;
}

.modal-buttons {
    display: flex;
    gap: 20px;
    padding: 20px;
    justify-content: center;
    border-top: 2px solid #ff6600;
}

.modal-button {
    padding: 15px 30px;
    border: 2px solid #ff6600;
    border-radius: 10px;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 140px;
}

.modal-button-yes {
    background: linear-gradient(45deg, #ff3300, #ff6600);
    color: #1a1a1a;
    box-shadow: 0 4px 15px rgba(255, 102, 0, 0.4);
}

.modal-button-yes:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 102, 0, 0.6);
}

.modal-button-no {
    background: linear-gradient(45deg, #4a4a4a, #666666);
    color: #ff9900;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.modal-button-no:hover {
    transform: translateY(-2px);
    background: linear-gradient(45deg, #666666, #888888);
}

/* Volume Monitor Styles */
.volume-container {
    margin: 20px 0;
}

.volume-label {
    font-size: 1.2em;
    margin-bottom: 15px;
    color: #ff6600;
}

.volume-bar-container {
    background: #1a1a1a;
    border: 2px solid #ff6600;
    border-radius: 15px;
    height: 30px;
    margin: 15px 0;
    overflow: hidden;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
}

.volume-bar {
    height: 100%;
    background: linear-gradient(90deg, #ff3300, #ff6600, #ffaa00);
    width: 0%;
    transition: width 0.1s ease;
    box-shadow: 0 0 10px rgba(255, 102, 0, 0.6);
}

.volume-stats {
    margin-top: 15px;
    font-size: 1.1em;
    color: #ff9900;
}

.volume-stats span {
    display: inline-block;
    padding: 5px 15px;
    background: rgba(255, 102, 0, 0.2);
    border-radius: 10px;
    border: 1px solid #ff6600;
}