body {
    margin: 0;
    padding: 30px;
    background: linear-gradient(180deg, #001f3f, #003366, #0066cc, #4d94ff);
    background-size: 400% 400%;
    animation: gradientShift 8s ease-in-out infinite;
    font-family: 'Comic Sans MS', cursive, sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

/* Debug Summary - Game-specific styling */
.debug-summary {
    color: #4d94ff;
    font-family: 'Fredoka One', cursive;
}

.debug-content {
    padding: 12px;
    color: white;
    font-family: Arial, sans-serif;
}

.target-words-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 12px;
    font-family: Arial, sans-serif;
}

.target-words-table th,
.target-words-table td {
    padding: 4px 8px;
    border: 1px solid #4d94ff;
    text-align: left;
}

.target-words-table th {
    background: rgba(77, 148, 255, 0.3);
    font-weight: bold;
}

.target-words-table .matched {
    text-align: center;
    font-size: 16px;
}

/* Target Words Table - Game-specific styling */
.target-words-table .active-word {
    background-color: rgba(0, 102, 204, 0.3);
}

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

/* Debug Controls Area */
.debug-controls {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    margin: 10px 0;
    flex-wrap: wrap;
}

/* Timestamp Display for Debugging */
.timestamp-display {
    background: rgba(255, 255, 255, 0.9);
    color: black;
    font-size: 12pt;
    font-family: 'Courier New', monospace;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #4d94ff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Debug Buttons */
.debug-button {
    background: rgba(77, 148, 255, 0.9);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    min-width: 40px;
}

.debug-button:hover {
    background: rgba(77, 148, 255, 1);
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.debug-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Recognition Counter Display */
.target-word-counter {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(0, 102, 204, 0.9);
    color: white;
    font-size: 12pt;
    font-family: 'Courier New', monospace;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #0066cc;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 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-australian-frame {
    width: 72vw;
    height: 72vh;
    max-width: 1400px;
    position: relative;
    background: linear-gradient(to bottom, #001a33 0%, #003366 30%, #0066cc 70%, #e6f3ff 100%);
    border-radius: 25px;
    box-shadow: 0 10px 30px rgba(77, 148, 255, 0.3);
}

.wavy-border {
    position: absolute;
    top: -72px;
    left: -72px;
    right: -72px;
    bottom: -72px;
    background: linear-gradient(135deg, #4d94ff, #0066cc, #003366, #001f3f, #001a33);
    border-radius: 80px;
    z-index: -1;
}

.wavy-border::before {
    content: '';
    position: absolute;
    top: -30px;
    left: -30px;
    right: -30px;
    bottom: -30px;
    background: linear-gradient(45deg, #001f3f, #4d94ff, #001a33, #0066cc);
    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: -35px;
    left: -35px;
    right: -35px;
    bottom: -35px;
    background: linear-gradient(225deg, #0066cc, #001f3f, #4d94ff, #003366);
    border-radius: 60px;
    z-index: -2;
    clip-path: polygon(
        0% 30%, 3% 5%, 6% 40%, 9% 12%, 12% 35%, 15% 7%, 18% 42%, 21% 15%, 24% 38%, 
        27% 8%, 30% 45%, 33% 18%, 36% 32%, 39% 2%, 42% 48%, 45% 20%, 48% 35%, 
        51% 10%, 54% 40%, 57% 25%, 60% 38%, 63% 5%, 66% 45%, 69% 22%, 72% 32%, 
        75% 12%, 78% 48%, 81% 18%, 84% 35%, 87% 8%, 90% 42%, 93% 25%, 96% 38%, 
        99% 15%, 100% 30%, 
        100% 70%, 97% 95%, 94% 60%, 91% 88%, 88% 65%, 85% 93%, 82% 58%, 79% 85%, 
        76% 68%, 73% 95%, 70% 55%, 67% 82%, 64% 72%, 61% 98%, 58% 62%, 55% 85%, 
        52% 75%, 49% 98%, 46% 52%, 43% 80%, 40% 68%, 37% 95%, 34% 58%, 31% 85%, 
        28% 72%, 25% 98%, 22% 62%, 19% 88%, 16% 68%, 13% 93%, 10% 60%, 7% 88%, 
        4% 65%, 1% 95%, 0% 70%
    );
}

/* Additional decorative element to create more organic blue border */
.wavy-border::first-letter {
    position: absolute;
    top: -25px;
    left: -25px;
    right: -25px;
    bottom: -25px;
    background: conic-gradient(from 45deg, #001f3f, #003366, #0066cc, #4d94ff, #80b3ff, #b3d9ff);
    border-radius: 120px;
    z-index: -3;
    opacity: 0.7;
}

/* Background decorative elements */
.kids-frame-container::before {
    content: '';
    position: absolute;
    top: -60px;
    left: -60px;
    right: -60px;
    bottom: -60px;
    background: radial-gradient(circle at 30% 30%, #001a33 0%, transparent 50%),
                radial-gradient(circle at 70% 70%, #003366 0%, transparent 50%);
    border-radius: 140px;
    z-index: -4;
    opacity: 0.4;
}

/* Frame content styling */
.frame-content {
    position: relative;
    z-index: 1;
    padding: 30px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
    justify-content: space-between;
}

.starry-field {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 25%;
    background: linear-gradient(to top, #001a33 0%, #0066cc 60%, transparent 100%);
    border-radius: 0 0 25px 25px;
    z-index: 0;
}

/* Stars and Southern Cross in the starry field */
.starry-field::before {
    content: '✨';
    position: absolute;
    bottom: 15%;
    left: 15%;
    font-size: 40px;
    opacity: 0.8;
}

.starry-field::after {
    content: '🌟';
    position: absolute;
    bottom: 10%;
    right: 20%;
    font-size: 35px;
    opacity: 0.8;
}

/* Floating Australian elements outside frame */
.outside-floats {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.floater {
    position: absolute;
    font-size: 2rem;
    color: rgba(77, 148, 255, 0.7);
    animation: float 6s ease-in-out infinite;
    pointer-events: none;
}

/* Position floating elements - stars and diverse people */
.floater:nth-child(1) { top: 10%; left: 5%; animation-delay: 0s; }
.floater:nth-child(2) { top: 20%; right: 10%; animation-delay: 1s; }
.floater:nth-child(3) { top: 70%; left: 15%; animation-delay: 2s; }
.floater:nth-child(4) { top: 80%; right: 5%; animation-delay: 3s; }
.floater:nth-child(5) { top: 30%; left: 80%; animation-delay: 4s; }
.floater:nth-child(6) { top: 60%; right: 85%; animation-delay: 5s; }
.floater:nth-child(7) { top: 40%; left: 3%; animation-delay: 2.5s; }
.floater:nth-child(8) { top: 90%; right: 20%; animation-delay: 4.5s; }
.floater:nth-child(9) { top: 25%; left: 70%; animation-delay: 1.5s; }
.floater:nth-child(10) { top: 65%; right: 15%; animation-delay: 3.5s; }
.floater:nth-child(11) { top: 50%; left: 25%; animation-delay: 0.8s; }
.floater:nth-child(12) { top: 15%; right: 70%; animation-delay: 4.2s; }
.floater:nth-child(13) { top: 35%; left: 45%; animation-delay: 1.2s; }
.floater:nth-child(14) { top: 75%; right: 60%; animation-delay: 3.8s; }
.floater:nth-child(15) { top: 55%; left: 90%; animation-delay: 0.3s; }
.floater:nth-child(16) { top: 85%; left: 40%; animation-delay: 5.1s; }
.floater:nth-child(17) { top: 45%; right: 75%; animation-delay: 2.1s; }
.floater:nth-child(18) { top: 95%; left: 65%; animation-delay: 4.8s; }

@keyframes float {
    0% { 
        transform: translateX(0px) translateY(0px) rotate(0deg);
        opacity: 0.4;
    }
    25% { 
        transform: translateX(30px) translateY(-40px) rotate(90deg);
        opacity: 0.7;
    }
    50% { 
        transform: translateX(-20px) translateY(-80px) rotate(180deg);
        opacity: 0.8;
    }
    75% { 
        transform: translateX(-40px) translateY(-30px) rotate(270deg);
        opacity: 0.6;
    }
    100% { 
        transform: translateX(0px) translateY(0px) rotate(360deg);
        opacity: 0.4;
    }
}

/* Inside decorations - stars and diverse people */
.fun-decorations .floater {
    position: absolute;
    font-size: 2.5rem;
    color: #4d94ff;
    animation: bounce 3s ease-in-out infinite;
}

.fun-decorations .floater:nth-child(1) { top: 15%; left: 10%; }
.fun-decorations .floater:nth-child(2) { top: 25%; right: 15%; animation-delay: 0.5s; }
.fun-decorations .floater:nth-child(3) { bottom: 30%; left: 20%; animation-delay: 1s; }
.fun-decorations .floater:nth-child(4) { bottom: 20%; right: 10%; animation-delay: 1.5s; }
.fun-decorations .floater:nth-child(5) { top: 20%; left: 85%; }
.fun-decorations .floater:nth-child(6) { bottom: 25%; right: 80%; animation-delay: 1s; }
.fun-decorations .floater:nth-child(7) { top: 60%; left: 5%; animation-delay: 2s; }
.fun-decorations .floater:nth-child(8) { bottom: 45%; right: 90%; animation-delay: 2.5s; }
.fun-decorations .floater:nth-child(9) { top: 40%; left: 60%; animation-delay: 3s; }
.fun-decorations .floater:nth-child(10) { bottom: 60%; right: 40%; animation-delay: 0.8s; }
.fun-decorations .floater:nth-child(11) { top: 70%; left: 85%; animation-delay: 1.8s; }
.fun-decorations .floater:nth-child(12) { bottom: 35%; right: 65%; animation-delay: 3.2s; }
.fun-decorations .floater:nth-child(13) { top: 80%; left: 30%; animation-delay: 2.2s; }
.fun-decorations .floater:nth-child(14) { bottom: 80%; right: 25%; animation-delay: 4.1s; }
.fun-decorations .floater:nth-child(15) { top: 30%; left: 75%; animation-delay: 1.4s; }
.fun-decorations .floater:nth-child(16) { bottom: 50%; right: 85%; animation-delay: 3.7s; }

.fun-decorations .floater {
    position: absolute;
    font-size: 1.8rem;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Main title styling */
h1 {
    font-size: 2.5rem;
    color: #4d94ff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    margin: 20px 0;
    animation: titleGlow 3s ease-in-out infinite;
}

@keyframes titleGlow {
    0%, 100% { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }
    50% { text-shadow: 2px 2px 8px rgba(77, 148, 255, 0.6), 0 0 10px rgba(77, 148, 255, 0.4); }
}

/* Lyrics display area */
.lyrics-container {
    border-radius: 20px;
    padding: 30px;
    margin: 20px 0;
    box-shadow: 0 8px 25px rgba(0, 102, 204, 0.2);
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 80%;
}

.sentence-display {
    font-size: 3.2rem;
    text-align: center;
    color: #ffffff;
    line-height: 1.4;
    font-weight: bold;
    margin-bottom: 15px;
    word-wrap: break-word;
    word-break: normal;
    overflow-wrap: break-word;
    white-space: normal;
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
    padding: 0 15px;
    overflow: visible;
}

/* Progress bar container */
.progress-container {
    background: #001a33;
    height: 8px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #4d94ff;
}

/* Progress fill */
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4d94ff, #0066cc, #003366);
    width: 0%;
    transition: width 0.1s ease-out;
    border-radius: 10px;
}

/* Word highlighting */
.word {
    transition: all 0.3s ease;
    padding: 2px 4px;
    border-radius: 4px;
    margin: 0 2px;
}

.word.highlighted {
    background: rgba(255, 255, 0, 0.8);
    color: #7C3AED;
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.5);
}

.word.target-word {
    text-shadow: 2px 2px 4px #4d94ff, 
                 -2px -2px 4px #4d94ff, 
                 2px -2px 4px #4d94ff, 
                 -2px 2px 4px #4d94ff,
                 0 0 6px #4d94ff;
}

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

.play-button {
    padding-left: 10pt;
    background: #4d94ff;
    color: white;
}

.play-button.playing {
    background: #0066cc;
    color: white;
    padding-left: 0pt;
}

.restart-button {
    background: #003366;
    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: #3d7bff;
}

.play-button:active {
    background: #2d6bff;
    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: #0052cc;
}

.play-button.playing:active {
    background: #003d99;
    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: #002952;
}

.restart-button:active {
    background: #001f3f;
    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: #1a52cc;
}

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

.restart-button.pressed {
    background: #001a33;
}

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

.back-button:hover {
    background: #3d7bff;
}

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

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .wavy-australian-frame {
        width: 90vw;
        height: 85vh;
    }
    
    .frame-content {
        padding: 20px;
    }
    
    h1 {
        font-size: 1.8rem;
    }
    
    .sentence-display {
        font-size: 1.4rem;
    }
    
    .control-button {
        width: 60px;
        height: 60px;
        font-size: 1.6rem;
    }
}

/* 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 - Australian 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;
}

.australian-modal {
    background: linear-gradient(135deg, #001a33, #4d94ff, #0066cc);
    border: 3px solid #003366;
    border-radius: 20px;
    box-shadow: 0 0 30px rgba(77, 148, 255, 0.8), inset 0 0 20px rgba(255, 255, 255, 0.2);
    max-width: 500px;
    width: 90%;
    color: #ffffff;
}

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

.modal-header h2 {
    margin: 0;
    font-size: 1.8em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    color: #ffffff;
}

.modal-body {
    padding: 30px;
    text-align: center;
    line-height: 1.6;
}

.modal-body p {
    margin: 15px 0;
    font-size: 1.1em;
    color: #ffffff;
    border: 2px dashed #003366;
    padding: 10px 15px;
    border-radius: 10px;
    background: rgba(0, 102, 204, 0.3);
}

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

.modal-button {
    padding: 15px 30px;
    border: 2px solid #003366;
    border-radius: 10px;
    font-size: 1.1em;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 140px;
    font-weight: bold;
}

.modal-button-yes {
    background: linear-gradient(55deg, #4d94ff, #3d7bff);
    color: white;
    box-shadow: 0 4px 15px rgba(77, 148, 255, 0.6);
}

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

.modal-button-no {
    background: linear-gradient(45deg, #0066cc, #003366);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 102, 204, 0.6);
}

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

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

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

.volume-bar-container {
    background: #001a33;
    border: 2px solid #003366;
    border-radius: 15px;
    height: 30px;
    margin: 15px 0;
    overflow: hidden;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

.volume-bar {
    height: 100%;
    background: linear-gradient(90deg, #4d94ff, #0066cc, #003366);
    width: 0%;
    transition: width 0.1s ease;
    box-shadow: 0 0 10px rgba(77, 148, 255, 0.6);
}

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

.volume-stats span {
    display: inline-block;
    padding: 5px 15px;
    background: rgba(0, 102, 204, 0.3);
    border-radius: 10px;
    border: 1px solid #0066cc;
    font-weight: bold;
}