@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Balsamiq+Sans:wght@400;700&display=swap');
/* CSS Variables */
:root {
    --color-primary: #16a34a; /* Green */
    --color-secondary: #ef4444; /* Red */
    --color-accent: #facc15; /* Yellow */
    --color-text-dark: #333;
    --color-text-light: white;
    --color-border-light: #d1d5db;
    --color-bg-light: #f8f8f8;
    --color-bg-paper: #ffffff;
    /* backgrounds */
    --color-footer: #e6e9e5;
    --color-alphabet-chart-description: #f8e4e4;
    --color-alphabet-chart-grid: #fcd5d5;
    --color-alphabet-chart-special-grid: #d0fae0;
    --color-alphabet-sorting-description: #e6e9e5;
    --color-alphabet-sorting-grid: #fbedd3;
    --color-alphabet-sorting-controls: #fbedd3;
    --color-alphabet-sorting-all-description: #d4eeee;
    --color-alphabet-sorting-all-grid: #d4eeee;
    --color-alphabet-sorting-all-controls: #d4eeee;
    --color-alphabet-learn-description: #f3f1f1;
    --color-alphabet-learn-grid: #f3f1f1;
    --color-alphabet-learng-controls: #f3f1f1;
    --color-alphabet-sound-matching-description: #d1efdd;
    --color-alphabet-sound-matching-grid: #d1efdd;
    --color-alphabet-sound-matching-controls: #d1efdd;
    --color-numbers-chart-description: #e6e9e5;
    --color-numbers-chart-grid: white;
    --color-numbers-sorting-description: #fbe7e7;
    --color-numbers-sorting-grid: #f3f1f1;
    --color-numbers-sorting-controls: #fbe7e7;
}

body {
    font-family: 'Balsamiq Sans' !important;
    background-color: #fce4ec; /* Light pink background */
}

.hkb-big-buttons {
    min-height: 7rem;
}

.hidden {
    display: none !important;
}

.no-underline {
    text-decoration: none;
}

button,
input[type="button"],
input[type="submit"] {
    /* center text */
    display: inline-flex; /* or `flex` if you want block-level buttons */
    align-items: center; /* vertical centering */
    justify-content: center; /* horizontal centering */
    text-align: center; /* fallback for older browsers */
    /* prevent text selection on any device */
    -webkit-user-select: none; /* Safari/Chrome */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    user-select: none; /* standard */
    /* optional: prevent callouts & highlight on iOS/Android */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-tap-highlight-color: transparent;
    font-family: 'Balsamiq Sans' !important;
}

.desc-div-with-image {
    position: relative;
    overflow: hidden; /* ensure pseudo stays clipped */
    width: 100%;
    max-height: 10rem;
}

    .desc-div-with-image::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: url('https://habeshakb.com/habesha-kb-bg.jpg') center/cover no-repeat;
        opacity: 0.5; /* ← only this layer is transparent */
        z-index: 0;
    }

    .desc-div-with-image > * {
        position: relative;
        z-index: 1; /* put your real content above the faded bg */
    }

.hkb-gradient-background-1 {
    background: linear-gradient(to right, #8a2be2, #4b0082); /* Blue Violet to Indigo */
}

.hkb-gradient-background-2 {
    background: linear-gradient(to right, #FF69B4, #FFB6C1);
}

.hkb-gradient-background-3 {
    background: linear-gradient(to right, #32CD32, #7CFC00);
}

.hkb-gradient-background-4 {
    background: linear-gradient(to right, #00CED1, #20B2AA);
}

.hkb-gradient-background-5 {
    background: linear-gradient(to right, #FFD700, #FFA500);
}

.hkb-gradient-background-6 {
    background: linear-gradient(to right, #00BFFF, #87CEFA);
}

.hkb-gradient-background-7 {
    background: linear-gradient(to right, #DA70D6, #EE82EE);
}

.hkb-gradient-background-8 {
    background: linear-gradient(to right, #FF6347, #FF7F50);
}

.shuffle-text {
    font-size: 1.5rem;
    text-align: center;
    font-weight: bold;
    letter-spacing: .5rem;
    color: darkviolet;
}

.learn-grid {
    padding: 2rem 1rem;
}

.hkb-center {
    text-align: center;
}
/* Main App Container Styles (initially hidden) */
#app-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 2rem 0.5rem;
    box-sizing: border-box;
}

/* Outer Frame (Red Border) */
.outer-border-frame {
    border: .75rem solid var(--color-secondary);
    background-color: transparent;
    border-radius: 1rem;
    max-width: 1050px;
    width: 98%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    align-items: center;
    margin-top: 55px;
    overflow: hidden;
}

/* Main Content Container (Yellow Border) */
.hkb-container {
    position: relative;
    max-width: 1050px;
    width: 100%;
    background-color: var(--color-bg-paper);
    border-radius: 1rem;
    padding: 1rem;
    box-sizing: border;
    border: .75rem solid var(--color-accent);
    overflow: hidden;
}

.hkb-content-container {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    /*  fall back to the classic 100vh for older browsers */
    min-height: 100vh;
}

/* Section Title Styling - Now acts as the main header for each section */
.hkb-content-title {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    padding: 2rem;
    text-align: center;
    font-size: 2.2rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: -2rem;
    margin: -1rem -2rem -2rem -2rem;
    width: calc(100% + 4rem);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

.hkb-content-body {
    display: flex;
    flex-direction: column;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 0.5rem;
    padding: 1rem;
    margin: 1rem;
    text-align: center;
}

.hkb-content-full-width-container {
    padding: 1rem;
    margin: -2rem;
    width: calc(100% + 4rem);
}

.hkb-content-body-text {
    padding: 1rem;
    color: #006400;
    justify-content: center;
}

.hkb-content-body-block {
    border: 1px solid var(--color-primary);
    border-radius: 0.5rem;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 1rem;
}


.landing-interactive-item {
    display: flex;
    align-items: center;
    background-color: #fae48f;
    border-radius: 0.75rem;
    padding: 0.5rem;
    margin-bottom: 0.75rem;
    transition: background-color 0.2s ease-in-out;
    max-width: 10rem;
}

    .landing-interactive-item:hover {
        background-color: #f8e080;
    }


.landing-play-button {
    background-color: white; /* Red */
    color: black; /* Black text for contrast on red */
    border-radius: 9999px; /* Fully rounded */
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 4rem;
    flex-shrink: 0;
    margin-right: 1rem;
    transition: background-color 0.2s ease-in-out;
}

    .landing-play-button:hover {
        background-color: #b1b3b5; /* Darker red on hover */
    }

/* Simple play icon SVG */
.landing-play-icon {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

/* Alphabet Series Row (Each row in the alphabet chart) */
.alphabet-series-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
}
/* Specific styling for the special characters grid to match image (more columns) */
.special-chars-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(55px, 8rem));
    gap: 0.25rem;
}

/* Numbers Row - Adjusted for responsiveness */
.numbers-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(4rem, 8rem));
    gap: 0.25rem;
    padding: 0.8rem;
}

.dynamic-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 0.5rem;
    padding: 0.8rem;
}

.fidel-first-ordering-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
    gap: 0.3rem;
    padding: 0.2rem;
}

.numbers-puzzle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(2rem, 5rem));
    gap: 0.3rem;
    padding: 0.2rem;
}

/* Individual Character Button Styling (Cells) */
.char-button {
    background-color: #ffffff; /* Default white, assigned by JS */
    border: 1px solid var(--color-border-light);
    color: var(--color-text-dark);
    font-size: 3rem;
    font-weight: 600;
    padding: 0.5rem;
    border-radius: 0.3rem;
    cursor: pointer;
    transition: all 0.1s ease-in-out;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: 1;
}

    .char-button:hover {
        background-color: var(--color-grid-alphabet); /* Use a grid background color for hover */
        border-color: var(--color-primary);
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .char-button:active {
        background-color: var(--color-primary);
        color: var(--color-text-light);
        border-color: var(--color-primary);
        transform: translateY(0);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    /* Class for active teaching highlight */
    .char-button.teaching-active {
        outline: 3px solid var(--color-primary);
        background-color: var(--color-accent);
        transform: scale(1.05);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

/* Floating Navigation Bar */
.floating-nav {
    max-width: 1040px;
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    gap: .5rem;
    background-color: rgba(var(--color-accent-rgb, 252, 211, 77), 0.8);
    border-radius: 0.75rem;
    padding: .25rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    width: calc(100% - 40px); /* (20 gap, 40 padding, 20 border) */
    justify-content: center;
    font-size: 1.1rem;
}
    /* Hamburger menu for small screens */
    .floating-nav #hamburger-menu {
        display: none; /* Hidden on large screens */
        background: none;
        border: none;
        color: var(--color-primary);
        cursor: pointer;
        padding: 0.5rem;
    }
    /* Navigation items container */
    .floating-nav #nav-items-container {
        display: flex; /* Flex by default for large screens */
        flex-direction: row;
        gap: .25rem;
        align-items: center;
    }
    /* Navigation Group (for dropdowns) */
    .floating-nav .nav-group {
        position: relative;
    }

    .floating-nav .nav-group-toggle {
        background-color: var(--color-primary);
        color: var(--color-text-light);
        padding: 0.5rem;
        border-radius: 0.5rem;
        font-weight: 200;
        border: 1px solid var(--color-primary);
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        line-height: 1.2;
        text-align: center;
    }

        .floating-nav .nav-group-toggle:hover {
            background-color: color-mix(in srgb, var(--color-primary) 80%, black); /* Darken primary on hover */
            transform: scale(1.05);
        }
    /* Dropdown menu for groups */
    .floating-nav .nav-dropdown {
        display: none; /* Hidden by default */
        position: absolute;
        top: 100%; /* Position below the toggle button */
        left: 0;
        background-color: rgba(var(--color-accent-rgb, 252, 211, 77), 0.95);
        border-radius: 0.5rem;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: .25rem;
        flex-direction: column;
        gap: .1rem;
        min-width: 180px; /* Ensure dropdown is wide enough */
        z-index: 1002; /* Above other nav elements */
    }

        .floating-nav .nav-dropdown.active {
            display: flex; /* Show when active */
        }

    .floating-nav .nav-button { /* General style for all nav buttons */
        background-color: var(--color-primary);
        color: var(--color-text-light);
        padding: 0.25rem;
        border-radius: 0.5rem;
        border: 1px solid var(--color-primary);
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        line-height: 1.2;
        text-align: center;
    }

        .floating-nav .nav-button:hover {
            background-color: color-mix(in srgb, var(--color-primary) 80%, black);
            transform: scale(1.05);
        }

        .floating-nav .nav-button.active-nav {
            background-color: var(--color-secondary);
            border-color: color-mix(in srgb, var(--color-secondary) 80%, black);
            transform: scale(1.05);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

    .floating-nav .sub-nav-button { /* Specific style for sub-menu buttons */
        background-color: var(--color-primary); /* Sub-buttons also green */
        border-color: var(--color-primary);
        font-size: 1rem; /* Slightly smaller font for sub-items */
        padding: 0.15rem;
    }

        .floating-nav .sub-nav-button:hover {
            background-color: color-mix(in srgb, var(--color-primary) 80%, black);
            transform: scale(1.02);
        }

        .floating-nav .sub-nav-button.active-nav {
            background-color: var(--color-secondary);
            border-color: color-mix(in srgb, var(--color-secondary) 80%, black);
        }

.puzzle-item {
    background-color: #ffffff; /* Default white */
    border: 2px solid var(--color-primary);
    color: var(--color-text-dark);
    font-size: 3rem;
    font-weight: 600;
    padding: 1rem;
    border-radius: 0.5rem;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease-in-out;
}

    .puzzle-item:hover {
        background-color: var(--color-grid-alphabet); /* Use a grid background color for hover */
        border-color: var(--color-primary);
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .puzzle-item.dragging {
        opacity: 0.5;
        border-style: dashed;
    }
    /* New styles for correct/incorrect puzzle items */
    .puzzle-item.correct-order {
        background-color: color-mix(in srgb, var(--color-primary) 10%, white);
        border-color: var(--color-primary);
        color: var(--color-text-dark);
    }

    .puzzle-item.incorrect-order {
        background-color: color-mix(in srgb, var(--color-secondary) 10%, white);
        border-color: var(--color-secondary);
        color: var(--color-text-dark);
    }

.puzzle-controls {
    margin: 1rem;
    text-align: center;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
}

    .puzzle-controls button {
        background-color: var(--color-primary);
        color: var(--color-text-light);
        padding: 0.75rem 1.5rem;
        border-radius: 0.75rem;
        font-size: 1.5rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border: none;
        margin: 1rem;
        line-height: 1.2;
    }

        .puzzle-controls button:hover {
            background-color: color-mix(in srgb, var(--color-primary) 80%, black);
            transform: translateY(-2px);
        }

/* Footer Styling */
.footer {
    margin-top: 3rem;
    text-align: center;
    color: #6b7280;
    font-size: 1.5rem;
}

/* Remove underline from nav-button and sub-nav-button links */
.nav-button,
.sub-nav-button,
.nav-button:link,
.nav-button:visited,
.sub-nav-button:link,
.sub-nav-button:visited {
    text-decoration: none;
}

.padding-2 {
    padding: 2rem;
}

.padding-1 {
    padding: 1rem;
}


.padding-p-5 {
    padding: .5rem;
}

.padding-ver-2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hkb-content-title {
        font-size: 1.8rem;
        margin: -1rem -1rem 2rem -1rem;
        width: calc(100% + 2rem);
    }

    .hkb-content-full-width-container {
        padding: 0.5rem;
        margin: -1rem -1rem 2rem -1rem;
        width: calc(100% + 2rem);
    }

    .outer-border-frame {
        margin-top: 60px;
        border: .5rem solid var(--color-secondary);
    }

    .hkb-container {
        border: .5rem solid var(--color-accent);
        padding: 1rem;
    }

    .char-button {
        font-size: 2.5rem;
        padding: 0.25rem;
    }

    .alphabet-series-row, .numbers-row {
        gap: 0.15rem;
    }

    .special-chars-row {
        grid-template-columns: repeat(auto-fit, minmax(40px, 2fr));
    }

    .numbers-row {
        grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    }

    .puzzle-item {
        font-size: 3rem;
        padding: 1rem;
    }

    /* Floating Navigation Bar for smaller screens */
    .floating-nav {
        position: fixed;
        top: 20px;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        max-width: 1040px;
        width: 95%;
        transform: none;
        display: flex;
        justify-content: center;
        align-items: stretch; /*Stretch buttons to full width*/
        gap: 5px;
        justify-content: flex-start; /*Align items to start */
        flex-direction: column; /*Stack vertically for mobile */
        margin-bottom: 0;
    }

        .floating-nav #hamburger-menu {
            display: block; /* Show hamburger */
            align-self: flex-end; /* Align to the right */
        }

        .floating-nav #nav-items-container {
            flex-direction: column;
            width: 100%;
            gap: 5px;
            display: none; /* Hidden by default, toggled by JS */
        }

            .floating-nav #nav-items-container.active {
                display: flex; /* Show when active */
            }

        .floating-nav .nav-group {
            width: 100%; /* Full width for groups */
        }

        .floating-nav .nav-group-toggle {
            width: 100%;
        }

        .floating-nav .nav-dropdown {
            position: static; /* Remove absolute positioning */
            width: 100%;
            box-shadow: none;
            background-color: rgba(var(--color-accent-rgb, 252, 211, 77), 0.5); /* Lighter background for dropdown */
            border-radius: 0.5rem;
            padding: 5px;
        }

    .puzzle-controls button {
        font-size: 0.9rem;
        padding: 0.6rem 1.2rem;
    }

    .modal-content {
        padding: 1.5rem;
        font-size: 0.9rem;
    }

        .modal-content h3 {
            font-size: 1.5rem;
        }
}

@media (max-width: 480px) {
    .hkb-big-buttons {
        min-height: 3rem;
    }

    .hkb-content-title {
        font-size: 1.4rem;
        margin: -0.5rem;
        width: calc(100% + 1rem);
    }

    .hkb-content-full-width-container {
        padding: 0.05rem;
        margin: -0.5rem;
        width: calc(100% + 1rem);
    }

    .outer-border-frame {
        margin-top: 40px;
        border: .25rem solid var(--color-secondary);
    }

    .hkb-container {
        border: .25rem solid var(--color-accent);
        padding: 0.5rem;
    }

    .char-button {
        font-size: 1.5rem;
        padding: 0.05rem;
    }

    .numbers-row {
        grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
    }

    .hkb-content-body {
        grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
        gap: 0.3rem;
        padding: 0.5rem;
    }

    .puzzle-item {
        font-size: 2.5rem;
        padding: 0.4rem;
    }

    .floating-nav {
        top: 5px;
        width: 98%;
    }

        .floating-nav .sub-nav-button {
            width: 90%;
        }

    .puzzle-controls button {
        font-size: 0.8rem;
    }
}


.landing-card {
    background-color: #ffffff; /* White card background for readability */
    border-radius: 1.5rem; /* More rounded corners */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Standard shadow */
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-width: 4px; /* Added border width */
    border-style: solid; /* Added border style */
    border-color: #16a34a; /* All green borders for cards */
}

.green-border {
    border-width: 4px;
    border-style: solid;
    border-color: #16a34a;
}

.hkb-learn-fidel-body-layout {
    background: linear-gradient(to bottom right, #e0f7fa, #ede7f6); /* Light blue to light purple gradient */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* Navigation container (buttons and dropdown) */
.hkb-learn-fidel-nav-section {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem; /* Gap between elements */
    margin-bottom: 2rem; /* Margin bottom */
}


/* Navigation buttons (previous/next) */
.hkb-learn-fidel-nav-btn {
    padding: 0.75rem 1.5rem; /* py-3 px-6 */
    background-color: var(--color-primary);
    color: white;
    border-radius: 0.5rem;
    border: none; /* Remove default button border */
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: bold;
    transition: background-color 0.3s ease;
    align-items: center;
    justify-content: center;
}

    .hkb-learn-fidel-nav-btn:hover {
        background-color: #35db72; /* Indigo-600 */
    }

    .hkb-learn-fidel-nav-btn:focus {
        outline: none;
        box-shadow: 0 0 0 0.25rem #058032; /* Focus ring */
    }

    .hkb-learn-fidel-nav-btn[disabled] {
        opacity: 0.65; /* Disabled state opacity */
        cursor: not-allowed;
        pointer-events: none; /* Prevent click when disabled */
    }

/* Dropdown select element */
.hkb-learn-fidel-dropdown-select {
    padding: 0.75rem; /* p-3 */
    border: 1px solid #d1d5db; /* border border-gray-300 */
    border-radius: 0.5rem; /* rounded-lg */
    font-size: 1.5rem; /* text-xl */
    background-color: white; /* bg-white */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    cursor: pointer;
    width: auto; /* w-auto */
    appearance: none; /* Remove default system dropdown arrow */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem; /* Make space for custom arrow */
}

    .hkb-learn-fidel-dropdown-select:focus {
        outline: none;
        border-color: #003300; /* Focus border color */
        box-shadow: 0 0 0 0.25rem #034403; /* Focus ring */
    }

/* Container for family letter buttons */
.hkb-learn-fidel-family-buttons-grid {
    justify-content: center; /* Center items when horizontal */
    display: grid;
    grid-template-columns: repeat(7, .5fr);
    gap: 0.5rem;
}

/* Individual family letter buttons */
.hkb-learn-fidel-family-btn {
    padding: 0.25rem;
    background-color: #f7db6b;
    color: black;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    font-size: 2rem;
    font-weight: bold;
    transition: background-color 0.3s ease;
    align-items: center;
    justify-content: center;
}

    .hkb-learn-fidel-family-btn:hover {
        background-color: #f6b10c;
    }

    .hkb-learn-fidel-family-btn:focus {
        outline: none;
        box-shadow: 0 0 0 0.25rem #f89952; /* Focus ring */
    }

/* Amharic-specific font fallback */
/*.hkb-learn-fidel-amharic-text {
    font-family: "Noto Sans Ethiopic", "Segoe UI Historic", " serif";*/ /* Fallback fonts for Amharic characters */
/*}*/


.hkb-fidel-family-ordering-puzzle-box {
    position: relative; /* Needed for overlay positioning */
    background-color: transparent;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around; /* Distribute letters evenly */
    align-items: center;
    gap: .5rem; /* Reduced gap between letters */
}

.hkb-fidel-family-ordering-letter-tile {
    flex-shrink: 0; /* Prevent shrinking of tiles */
    display: flex;
    padding: 1.5rem;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    font-weight: bold;
    border-radius: 10px;
    cursor: grab; /* Indicate draggable */
    transition: background-color 0.3s ease, transform 0.2s ease, border 0.2s ease;
    user-select: none; /* Prevent text selection */
    border: 2px solid transparent;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .hkb-fidel-family-ordering-letter-tile:hover {
        transform: translateY(-3px);
    }

.hkb-fidel-family-ordering-letter-incorrect {
    background-color: #ffcccc; /* Slightly red */
    color: #a00;
}

.hkb-fidel-family-ordering-letter-correct {
    background-color: #ccffcc; /* Light green */
    color: #0a0;
}

.hkb-fidel-family-ordering-letter-dragging {
    opacity: 0.5; /* Visual feedback for dragging */
    border: 2px dashed #007bff;
}

.hkb-fidel-family-ordering-controls {
    margin: 1rem 3rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;
}

/* Overlay for completion feedback */
.puzzle-overlay {
    position: fixed; /* Changed to fixed to cover entire viewport */
    top: 0;
    left: 0;
    width: 100vw; /* Cover full viewport width */
    height: 100vh; /* Cover full viewport height */
    background-color: rgba(0, 255, 0, 0.5); /* Green with 50% transparency */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 4rem;
    z-index: 9999 !important; /* High z-index to ensure it's on top of everything */
    position: fixed !important;
    pointer-events: none;
    animation: hkb-fidel-family-ordering-fade-in 0.5s forwards;
    pointer-events: auto; /* Allow mouse events on the overlay itself */
}

.hkb-feedback-checkmark {
    font-size: 6rem;
    animation: hkb-fidel-family-ordering-pop-in 0.5s forwards;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hkb-fidel-family-ordering-letter-tile {
        font-size: 2.8rem;
        padding: .75rem;
    }

    .hkb-fidel-family-ordering-puzzle-box {
        max-width: 650px;
    }
}

@media (max-width: 576px) {
    .hkb-learn-fidel-family-buttons-grid {
        gap: .2rem;
    }

    .hkb-fidel-family-ordering-letter-tile {
        font-size: 3rem;
        padding: .05rem;
        min-width: 6rem;
    }

    .hkb-fidel-family-ordering-puzzle-box {
        max-width: 350px; /* Adjust max-width to fit 7 small tiles */
        flex-direction: column;
    }

    .hkb-feedback-checkmark {
        font-size: 4rem;
    }

    .numbers-row {
        display: grid;
        grid-template-columns: repeat(5, minmax(1rem, 5rem));
    }

    .numbers-puzzle-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(1rem, 5rem));
    }

    .hkb-learn-fidel-family-btn {
        font-weight: normal;
    }
}


/* Main container for the game */
.hkb-fidel-soundMatch-container {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 90%;
    width: 800px; /* Max width for larger screens */
    box-sizing: border-box;
    position: relative; /* For puzzle area overlay */
    overflow: hidden; /* For puzzle area feedback */
}

/* Header styling */
.hkb-fidel-soundMatch-header h1 {
    color: #2c3e50;
    margin-bottom: 25px;
    font-size: 2.5em;
    font-weight: 700;
}

/* Puzzle area layout */
.hkb-fidel-soundMatch-puzzle-area {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    margin-bottom: 30px;
    /* Changed to nowrap to always keep columns side-by-side */
    flex-wrap: nowrap;
}

/* Column styling */
.hkb-fidel-soundMatch-amharic-column,
.hkb-fidel-soundMatch-english-column {
    flex: 1;
    /* Removed min-width to allow columns to shrink on small screens */
    /* min-width: 200px; */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Button styling */
.hkb-fidel-soundMatch-button {
    background-color: #e6e9e5;
    border: none;
    padding: 15px 25px;
    border-radius: 10px;
    font-size: 1.8em;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-weight: 600;
    color: #333; /* Slightly darker text for contrast */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60px; /* Ensure consistent height */
}

    .hkb-fidel-soundMatch-button:hover:not(:disabled) {
        /* Adjusted hover color to be a slightly darker shade of the new background */
        background-color: #90EE90;
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }

    .hkb-fidel-soundMatch-button:active:not(:disabled) {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .hkb-fidel-soundMatch-button.hkb-fidel-soundMatch-selected {
        border: 3px solid #28a745; /* Green border for selected */
        box-shadow: 0 0 15px rgba(40, 167, 69, 0.5);
        background-color: #D4EDDA; /* Lighter green for selected background */
        color: #1a5e2e; /* Darker green text for contrast */
    }

    .hkb-fidel-soundMatch-button:disabled {
        cursor: not-allowed;
        /* opacity: 0.7;*/
        box-shadow: none;
    }

/* Control buttons styling */
.hkb-fidel-soundMatch-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    flex-wrap: wrap;
    padding: 1rem .5rem;
}

.hkb-fidel-soundMatch-control-button {
    /* Changed control button background to green */
    background-color: var(--color-primary);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-weight: 2rem;
}

    .hkb-fidel-soundMatch-control-button:hover:not(:disabled) {
        /* Adjusted hover color for green buttons */
        background-color: #218838;
        transform: translateY(-1px);
    }

    .hkb-fidel-soundMatch-control-button:disabled {
        background-color: #cccccc;
        cursor: not-allowed;
        box-shadow: none;
    }

/* Feedback Overlays */
.hkb-fidel-soundMatch-overlay {
    position: fixed; /* For full page overlays */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    pointer-events: none; /* Allow clicks to pass through by default */
    opacity: 0;
    transition: opacity 0.3s ease;
}

    .hkb-fidel-soundMatch-overlay.hkb-fidel-soundMatch-visible {
        opacity: 1;
        pointer-events: auto; /* Enable clicks when visible */
    }

/* Success feedback overlay (for correct match within puzzle area) */
.hkb-fidel-soundMatch-feedback-overlay {
    position: absolute; /* Relative to .hkb-fidel-soundMatch-container */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(144, 238, 144, 0.5); /* Light green, 50% transparency */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 500; /* Below full page overlays, above puzzle content */
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    border-radius: 15px; /* Match container border-radius */
}

    .hkb-fidel-soundMatch-feedback-overlay.hkb-fidel-soundMatch-visible {
        opacity: 1;
        pointer-events: auto;
    }

.hkb-fidel-soundMatch-feedback-icon {
    font-size: 6em;
    color: #28a745; /* Green checkmark */
    text-shadow: 0 0 15px rgba(40, 167, 69, 0.7);
}


/* Error feedback overlay (full page) */
.hkb-fidel-soundMatch-error-overlay {
    background-color: rgba(255, 0, 0, 0.5); /* Red, 50% transparency */
}

.hkb-fidel-soundMatch-error-icon {
    font-size: 6em;
    color: #dc3545; /* Red X */
    text-shadow: 0 0 15px rgba(220, 53, 69, 0.7);
}

/* Game complete overlay (full page) */
.hkb-fidel-soundMatch-game-complete-overlay {
    background-color: rgba(0, 128, 0, 0.7); /* Darker green, more opaque */
}

.hkb-fidel-soundMatch-game-complete-text {
    font-size: 4em;
    color: white;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    font-weight: bold;
    animation: hkb-fidel-soundMatch-scale-up 1s ease-out forwards;
}

/* Shake animation for error */
@keyframes hkb-fidel-soundMatch-shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    50% {
        transform: translateX(10px);
    }

    75% {
        transform: translateX(-10px);
    }

    100% {
        transform: translateX(0);
    }
}

.hkb-fidel-soundMatch-shake-active {
    animation: hkb-fidel-soundMatch-shake 0.3s ease-in-out;
    animation-iteration-count: 3; /* Repeat 3 times for 0.9s total */
}

/* Fireworks/Confetti (simplified for CSS only) */
.hkb-fidel-soundMatch-firework {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: yellow;
    border-radius: 50%;
    opacity: 0;
    animation: hkb-fidel-soundMatch-firework-burst 1s forwards;
    filter: blur(1px);
}

@keyframes hkb-fidel-soundMatch-firework-burst {
    0% {
        transform: scale(0) translateY(0);
        opacity: 1;
    }

    50% {
        transform: scale(1) translateY(-20px);
        opacity: 0.8;
    }

    100% {
        transform: scale(0.5) translateY(-50px);
        opacity: 0;
    }
}

/* Confetti effect (CSS only, simple particles) */
.hkb-fidel-soundMatch-confetti {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: var(--confetti-color);
    border-radius: 50%;
    opacity: 0;
    animation: hkb-fidel-soundMatch-confetti-fall 3s forwards;
    filter: blur(0.5px);
}

@keyframes hkb-fidel-soundMatch-confetti-fall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* Media queries for responsiveness */
@media (max-width: 768px) {
    .hkb-fidel-soundMatch-header h1 {
        font-size: 2em;
    }

    .hkb-fidel-soundMatch-button {
        font-size: 1.5em;
        padding: 12px 20px;
    }

    .hkb-fidel-soundMatch-control-button {
        padding: 10px 20px;
    }

    .hkb-fidel-soundMatch-feedback-icon,
    .hkb-fidel-soundMatch-error-icon {
        font-size: 4em;
    }

    .hkb-fidel-soundMatch-game-complete-text {
        font-size: 2.5em;
    }
}

@media (max-width: 480px) {
    .hkb-fidel-soundMatch-container {
        padding: 20px;
    }

    .hkb-fidel-soundMatch-header h1 {
        font-size: 1.8em;
    }

    .hkb-fidel-soundMatch-button {
        font-size: 1.3em;
        padding: 10px 15px;
    }

    .hkb-fidel-soundMatch-controls {
        flex-direction: row;
        gap: 10px;
    }

    .hkb-fidel-soundMatch-feedback-icon,
    .hkb-fidel-soundMatch-error-icon {
        font-size: 3em;
    }

    .hkb-fidel-soundMatch-game-complete-text {
        font-size: 2em;
    }
}

.hkb-each-letter-container {
    background-color: #ffffff;
    border-radius: 20px; /* Rounded corners */
    padding: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    text-align: center;
    position: relative;
    max-width: 100vw;
    width: 100%;
    display: flex;
    flex-direction: column; /* Arrange content wrapper and any future elements vertically */
    align-items: center;
    justify-content: center;
    max-height: 60vh;
}

.hkb-each-letter-content-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
}

.hkb-each-letter-display {
    font-size: 20vw; /* Responsive font size */
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s ease-out; /* Smooth transition for click feedback */
    display: inline-block; /* Required for transform */
    line-height: 1; /* Adjust line height for better vertical centering */
    text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); /* Subtle text shadow */
    padding: 2rem;
}

    .hkb-each-letter-display:active {
        transform: scale(0.95); /* Shrink slightly on click */
    }

/* Arrow navigation styling */
.hkb-each-letter-arrow {
    position: absolute;
    cursor: pointer;
    padding: .1rem;
    border-radius: 50%; /* Circular background */
    background-color: rgba(22, 163, 74, 0.7); /* Green with transparency */
    transition: all 0.3s ease; /* Smooth transition for all properties */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10; /* Ensure arrows are above other elements */
}

    .hkb-each-letter-arrow:hover {
        /* No transform: scale here to keep them in place */
        filter: brightness(1.2); /* Make it brighter on hover */
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25); /* More prominent shadow on hover */
    }

    .hkb-each-letter-arrow svg {
        width: 40px; /* Size of the arrow icon */
        height: 40px;
        fill: #ffffff; /* White arrow color */
    }

    /* Styling for disabled arrows */
    .hkb-each-letter-arrow.hkb-each-letter-disabled {
        pointer-events: none; /* Disable click events */
        opacity: 0.4; /* Visually dim the arrow */
        background-color: rgba(128, 128, 128, 0.5); /* Grey out when disabled */
        cursor: default;
        transform: none; /* No hover transform when disabled */
        box-shadow: none; /* No shadow when disabled */
        filter: none; /* No brightness filter when disabled */
    }

/* Positioning for each arrow relative to .hkb-each-letter-content-wrapper */
.hkb-each-letter-arrow-up {
    top: -1rem;
    left: 50%;
    transform: translateX(-50%);
}

.hkb-each-letter-arrow-right {
    right: -1rem;
    top: 50%;
    transform: translateY(-50%);
}

.hkb-each-letter-arrow-down {
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
}

.hkb-each-letter-arrow-left {
    left: -1rem;
    top: 50%;
    transform: translateY(-50%);
}

/* Responsive adjustments for arrows */
@media (max-width: 768px) {
    .hkb-each-letter-arrow svg {
        width: 30px;
        height: 30px;
    }

    .hkb-each-letter-arrow {
        padding: .1rem;
    }

    .hkb-each-letter-arrow-up {
        top: -1rem;
    }

    .hkb-each-letter-arrow-right {
        right: -1rem;
    }

    .hkb-each-letter-arrow-down {
        bottom: -1rem;
    }

    .hkb-each-letter-arrow-left {
        left: -1rem;
    }


    .hkb-each-letter-container {
        max-height: 50vh;
    }

    .hkb-each-letter-content-wrapper {
        min-height: 25vh;
    }
}

@media (max-width: 480px) {
    .hkb-each-letter-display {
        font-size: 40svw;
    }

    .hkb-each-letter-container {
        max-height: 50svh;
    }

    .hkb-each-letter-content-wrapper {
        min-height: 45svh;
    }
}

/* New wrapper to contain the entire application and prevent overflow */
.hkb-fnv-app-wrapper {
    width: 100%;
    min-height: 40svh;
    /*  fall back to the classic 70vh for older browsers */
    min-height: 40vh;
    background-color: #a7d7c5;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    overflow: hidden; /* CRITICAL: Prevents anything from spilling out */
    border: .25rem solid #90be6d;
    border-radius: 1rem; /* Added border-radius for consistency */
    display: flex; /* Use flexbox to center content vertically */
    align-items: center;
}

/* Main content card inside the wrapper */
.hkb-fnv-main-container {
    align-items: center;
    text-align: center;
    padding: clamp(1rem, 4vw, 2rem); /* Responsive padding */
    border-radius: 25px;
    width: 100%;
}

/* Icon styling with responsive font size */
.hkb-fnv-icon-display {
    font-size: clamp(6rem, 25vmin, 11rem); /* Scales with viewport, won't overflow */
    margin-bottom: 1rem;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    /* Animation is now controlled by JS */
}

/* NEW: Styling for images to make them consistent with icons */
.hkb-fnv-image-display {
    width: 10rem;
    height: 10rem;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    width: auto;
    max-width: 100%; /* Prevent overflow */
    object-fit: contain; /* Scale image nicely */
    border-radius: 20px; /* Optional: rounded corners for images */
    margin-bottom: 1rem;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    /* Animation is now controlled by JS */
}

    .hkb-fnv-icon-display:hover, .hkb-fnv-image-display:hover {
        transform: scale(1.1);
    }

@keyframes hkbWordNavigatorBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-15px);
    }

    60% {
        transform: translateY(-7px);
    }
}

/* Styling for the name labels */
.hkb-fnv-name {
    cursor: pointer;
    transition: transform 0.2s;
    display: block; /* Ensures each name is on a new line */
    padding: 0.1rem;
    word-wrap: break-word; /* Prevents long text from overflowing */
    /* Animation is now controlled by JS */
}

    .hkb-fnv-name:hover {
        transform: scale(1.05);
        animation-play-state: paused;
    }

/* Amharic name specific styling with responsive font size */
.hkb-fnv-amharic-name {
    font-size: clamp(2rem, 8vmin, 3rem);
}

/* English name specific styling with responsive font size */
.hkb-fnv-english-name {
    font-size: clamp(1.5rem, 6vmin, 2.5rem);
    font-family: 'Balsamiq Sans' !important;
}

/* Navigation buttons styling with responsive font size */
.hkb-fnv-nav-btn {
    font-size: clamp(2rem, 7vmin, 2.8rem);
    background: none;
    border: none;
    color: #f67280;
    transition: transform 0.2s, color 0.2s;
    padding: 0; /* Remove default padding */
}

    .hkb-fnv-nav-btn:hover {
        transform: scale(1.2);
        color: #c06c84;
    }

    .hkb-fnv-nav-btn:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

/* --- TEXT ANIMATIONS --- */
@keyframes hkbWordNavigatorWiggle {
    0%, 100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(3deg);
    }

    75% {
        transform: rotate(-3deg);
    }
}

@keyframes hkbWordNavigatorPulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

@keyframes hkbWordNavigatorShake {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translate(-2px, 0) rotate(-1deg);
    }

    20%, 40%, 60%, 80% {
        transform: translate(2px, 0) rotate(1deg);
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

@keyframes hkbWordNavigatorTada {
    from {
        transform: scale3d(1, 1, 1);
    }

    10%, 20% {
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }

    30%, 50%, 70%, 90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%, 60%, 80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

@keyframes hkbWordNavigatorSwing {
    20% {
        transform: rotate3d(0, 0, 1, 15deg);
    }

    40% {
        transform: rotate3d(0, 0, 1, -10deg);
    }

    60% {
        transform: rotate3d(0, 0, 1, 5deg);
    }

    80% {
        transform: rotate3d(0, 0, 1, -5deg);
    }

    to {
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

@keyframes hkbWordNavigatorRubberBand {
    from {
        transform: scale3d(1, 1, 1);
    }

    30% {
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        transform: scale3d(1.05, 0.95, 1);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

@keyframes hkbWordNavigatorJello {
    from, 11.1%, to {
        transform: translate3d(0, 0, 0);
    }

    22.2% {
        transform: skewX(-12.5deg) skewY(-12.5deg);
    }

    33.3% {
        transform: skewX(6.25deg) skewY(6.25deg);
    }

    44.4% {
        transform: skewX(-3.125deg) skewY(-3.125deg);
    }

    55.5% {
        transform: skewX(1.5625deg) skewY(1.5625deg);
    }

    66.6% {
        transform: skewX(-0.78125deg) skewY(-0.78125deg);
    }

    77.7% {
        transform: skewX(0.390625deg) skewY(0.390625deg);
    }

    88.8% {
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    }
}

@keyframes hkbWordNavigatorHeartBeat {
    0% {
        transform: scale(1);
    }

    14% {
        transform: scale(1.2);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.2);
    }

    70% {
        transform: scale(1);
    }
}

@keyframes hkbWordNavigatorFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes hkbWordNavigatorFlash {
    from, 50%, to {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0.3;
    }
}
/* only non‐disabled buttons get the pulse */
.drag-hint-btn:not(:disabled), .click-hint-btn:not(:disabled) {
    cursor: grab;
    animation: hint-pulse 5s ease-in-out infinite;
}

    /* only non‐disabled buttons wiggle on hover */
    .drag-hint-btn:not(:disabled):hover {
        animation: hint-wiggle 2s ease-in-out infinite;
    }

/* pulse keyframes */
@keyframes hint-pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* wiggle keyframes */
@keyframes hint-wiggle {
    0%, 100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-4deg);
    }

    75% {
        transform: rotate(4deg);
    }
}

.hkb-c-container-wrapper {
    width: 100%;
    height: max(27vw, 27vh);
    position: relative;
    overflow: hidden;
    border-radius: 8px; /* Rounded corners for the container */
}

.hkb-c-inner {
    position: relative; /* Ensure absolute children are positioned relative to this */
    width: 100%;
    height: 100%;
}

.hkb-c-carousel-item {
    display: flex; /* Used to center the inner content wrapper */
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer; /* Indicate clickable item */
}

/* New class for the actual visible item content, taking 75% of space */
.hkb-c-item-content-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px; /* Moved here */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Moved here */
    transition: background-color 0.3s ease; /* For color change on click animation */
    background-color: #f8f8f8; /* Default background for the 75% block */
    /* Dynamic font size to make text/icon fill 75% of its wrapper */
    font-size: min(24vw, 24vh); /* Adjust '12' to fine-tune visual 75% fill */
    /*line-height: 1;*/ /* Ensure single line for better sizing control */
    text-align: center;
    overflow: hidden; /* Hide overflow if text is too large */
    white-space: nowrap; /* Prevent text from wrapping */
}

.hkb-c-carousel-item.hkb-c-active {
    transform: translateX(0);
}

.hkb-c-carousel-item.hkb-c-prev {
    transform: translateX(-100%);
}

.hkb-c-carousel-item.hkb-c-next {
    transform: translateX(100%);
}

/* Animation for clickable items, now applied to the content wrapper */
.hkb-c-item-content-wrapper.hkb-c-clicked-animation {
    animation: hkb-c-pulse 0.3s ease-out;
}

@keyframes hkb-c-pulse {
    0% {
        transform: scale(1);
        background-color: #f8f8f8;
    }

    50% {
        transform: scale(1.05);
        background-color: #e0e0e0;
    }
    /* Subtle background change on pulse */
    100% {
        transform: scale(1);
        background-color: #f8f8f8;
    }
}

.hkb-c-carousel-controls {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    z-index: 10;
}

.hkb-c-control-btn {
    background-color: rgba(0, 0, 0, 0.6); /* Slightly darker for better contrast */
    color: white;
    border: none;
    cursor: pointer;
    font-size: 1.5em;
    border-radius: 50%; /* Circular buttons */
    width: 50px; /* Fixed width for circular shape */
    height: 50px; /* Fixed height for circular shape */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Button shadow */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

    .hkb-c-control-btn:hover {
        background-color: rgba(0, 0, 0, 0.8);
        transform: scale(1.05); /* Slight scale on hover */
    }

/* Responsive adjustments */
@media (max-width: 768px) {
    .hkb-c-control-btn {
        padding: 8px 12px;
        font-size: 1.2em;
        width: 40px;
        height: 40px;
        margin: 0 8px;
    }
}

.hkb-ord-container {
    margin-top: 1rem;
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    width: 100%;
    text-align: center;
    position: relative;
    overflow: hidden; /* For shake animation */
    min-height: 90svh;
    /*  fall back to the classic 100vh for older browsers */
    min-height: 80vh;
}

.hkb-ord-solution-row {
    min-height: 10rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 1rem;
    background-color: transparent;
    --hkb-ord-solution-row-font-size: clamp(1rem, 3vw, 2rem);
    --hkb-ord-solution-row-min-width: clamp(1rem, 2vw, 3rem);
    --hkb-ord-solution-row-height: clamp(1rem, 2vw, 63rem);
}

.hkb-ord-solution-item {
    max-height: var(--hkb-ord-button-max-height, 4rem);
    padding: var(--hkb-ord-button-padding, 1rem);
    font-size: var(--hkb-ord-button-font-size, 3rem);
    border-radius: 8px;
    background-color: #e9ecef;
    color: #343a40;
    border: 1px solid #ced4da;
    transition: transform 0.2s ease-out;
}

.hkb-ord-game-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
    background-color: transparent;
}

.hkb-ord-button {
    min-width: var(--hkb-ord-button-min-width, 6rem);
    height: var(--hkb-ord-button-height, 6rem);
    font-size: var(--hkb-ord-button-font-size, 3.5rem);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: black;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, background-color 0.3s ease-out;
    position: relative;
    overflow: hidden;
    background-size: 200% 200%;
    background-position: 0% 0%;
}

    .hkb-ord-button:hover {
        transform: translateY(-5px) scale(1.03);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
    }

    .hkb-ord-button:active {
        transform: translateY(0) scale(0.98);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }

/* Random Animations for Buttons */
@keyframes hkb-ord-bounce-in {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    60% {
        opacity: 1;
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes hkb-ord-fade-slide-in {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hkb-ord-rotate-fade-in {
    0% {
        opacity: 0;
        transform: rotate(-90deg) scale(0.8);
    }

    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

@keyframes hkb-ord-pop-in {
    0% {
        opacity: 0;
        transform: scale(0.2);
    }

    80% {
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.hkb-ord-anim-bounce-in {
    animation: hkb-ord-bounce-in 0.8s ease-out forwards;
}

.hkb-ord-anim-fade-slide-in {
    animation: hkb-ord-fade-slide-in 0.7s ease-out forwards;
}

.hkb-ord-anim-rotate-fade-in {
    animation: hkb-ord-rotate-fade-in 0.9s ease-out forwards;
}

.hkb-ord-anim-pop-in {
    animation: hkb-ord-pop-in 0.6s ease-out forwards;
}

/* Control Buttons */
.hkb-ord-controls {
    display: flex;
    justify-content: center;
    gap: clamp(.5rem, 2vw, 1rem);
    margin-top: 1rem;
}

.hkb-ord-control-btn {
    background-color: var(--color-primary);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 0.75rem;
    font-size: clamp(1.5rem, 3.5vw, 3rem);
    cursor: pointer;
    transition: background-color 0.3s ease-out, transform 0.2s ease-out;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

    .hkb-ord-control-btn:hover {
        background-color: #045823;
        transform: translateY(-2px);
    }

    .hkb-ord-control-btn:active {
        transform: translateY(0);
    }

/* Feedback Overlay */
.hkb-ord-feedback-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 0, 0, 0.5); /* Red, 50% transparency */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
    font-size: 3rem;
    font-weight: bold;
    border-radius: 15px; /* Match container */
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

    .hkb-ord-feedback-overlay.hkb-ord-show {
        opacity: 1;
        visibility: visible;
    }

    .hkb-ord-feedback-overlay.hkb-ord-incorrect {
        background-color: rgba(255, 0, 0, 0.4); /* Red tint for incorrect */
    }

.hkb-ord-red-x {
    font-size: 8em;
    color: red;
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hkb-ord-feedback-overlay.hkb-ord-incorrect .hkb-ord-red-x {
    display: block;
}

/* Shake animation for incorrect feedback */
@keyframes hkb-ord-shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    50% {
        transform: translateX(10px);
    }

    75% {
        transform: translateX(-10px);
    }

    100% {
        transform: translateX(0);
    }
}

.hkb-ord-shake-animation {
    animation: hkb-ord-shake 0.3s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

@media (max-width: 768px) {
    .hkb-ord-solution-item {
        font-size: 1.5rem;
        padding: .5rem;
    }

    .hkb-ord-solution-row {
        gap: .25rem;
    }

    .hkb-ord-button {
        min-width: var(--hkb-ord-button-min-width, 5rem);
        height: var(--hkb-ord-button-height, 5rem);
        font-size: var(--hkb-ord-button-font-size, 2.5rem);
    }
}

@media (max-width: 480px) {
    .hkb-ord-solution-item {
        font-size: 1rem;
        padding: .25rem;
    }

    .hkb-ord-solution-row {
        min-height: 5rem;
        gap: .15rem;
    }

    .hkb-ord-button {
        min-width: var(--hkb-ord-button-min-width, 4rem);
        height: var(--hkb-ord-button-height, 4rem);
        font-size: var(--hkb-ord-button-font-size, 2rem);
    }
}

.hkb-background-pattern-1 {
    background-image: radial-gradient(circle, #FFC0CB 5%, transparent 2%), radial-gradient(circle, #FFD700 5%, transparent 2%), radial-gradient(circle, #7FFFD4 5%, transparent 2%), radial-gradient(circle, #FF4500 5%, transparent 2%);
    background-size: 50px 50px,50px 50px,50px 50px,50px 50px;
    background-position: 0 0,10px 10px,5px 5px,15px 15px;
}

/* --- Main Quiz Container --- */
.hkn-im-q-container {
    width: 100%;
    background-color: var(--hkn-im-q-card-bg);
    border-radius: var(--hkn-im-q-radius);
    box-shadow: var(--hkn-im-q-shadow);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- Image Styles & Animation --- */
.hkn-im-q-image-container {
    height: 10rem;
    position: relative;
    overflow: clip;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hkn-im-q-image {
    position: static;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    margin: auto;
    display: block;
    font-size: 8rem;
}

@keyframes hkn-im-q-image-zoom {
    0% {
        transform: scale(1) rotate(0deg);
    }

    100% {
        transform: scale(1.15) rotate(2deg);
    }
}

/* --- Options Styles & Animation --- */
.hkn-im-q-options-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(10rem, 40rem));
    gap: 1.5rem;
    padding: 1.5rem;
    justify-content: center;
}

.hkn-im-q-option-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hkn-im-q-option {
    flex-grow: 1;
    padding: 1rem 1.5rem;
    font-size: 1.5rem;
    font-weight: bold;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.3s;
    animation: hkn-im-q-option-fade-in 1.5s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

    .hkn-im-q-option:hover:not(:disabled) {
        transform: scale(1.15);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }

    .hkn-im-q-option:disabled {
        cursor: not-allowed;
    }

    /* Staggered animation for options */
    .hkn-im-q-option:nth-child(1) {
        animation-delay: 0.2s;
    }

    .hkn-im-q-option:nth-child(2) {
        animation-delay: 0.4s;
    }

    .hkn-im-q-option:nth-child(3) {
        animation-delay: 0.6s;
    }

    .hkn-im-q-option:nth-child(4) {
        animation-delay: 0.8s;
    }

@keyframes hkn-im-q-option-fade-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hkn-im-q-audio-btn {
    background: #e0e0e0;
    color: #555;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
}

    .hkn-im-q-audio-btn:hover {
        background: #cccccc;
        transform: scale(1.1);
    }

/* --- Controls --- */
.hkn-im-q-controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
}

.hkn-im-q-control-btn {
    background: #6cf60c;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    color: #555;
}

    .hkn-im-q-control-btn:hover:not(:disabled) {
        transform: scale(1.2) rotate(10deg);
        background-color: #18db60;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    .hkn-im-q-control-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* --- Feedback Overlay --- */
.hkn-im-q-feedback-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15rem;
    color: white;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

    .hkn-im-q-feedback-overlay.hkn-im-q-show {
        opacity: 1;
        pointer-events: all;
    }

    .hkn-im-q-feedback-overlay.hkn-im-q-incorrect {
        background-color: rgba(220, 53, 69, 0.5);
    }

/* --- Fireworks Animation --- */
.hkn-im-q-fireworks-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 11;
}

.hkn-im-q-firework {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    opacity: 1;
}

@media (max-width: 768px) {
}

@media (max-width: 480px) {
    .hkn-im-q-options-container {
        grid-template-columns: repeat(1, minmax(8rem, 15rem));
    }
}

/* Shake animation for incorrect moves */
@keyframes hkb-take-me-home-shake {
    0% {
        transform: translateX(0);
    }

    10% {
        transform: translateX(-5px) rotate(0.5deg);
    }

    20% {
        transform: translateX(5px) rotate(-0.5deg);
    }

    30% {
        transform: translateX(-5px) rotate(0.5deg);
    }

    40% {
        transform: translateX(5px) rotate(-0.5deg);
    }

    50% {
        transform: translateX(-5px) rotate(0.5deg);
    }

    60% {
        transform: translateX(5px) rotate(-0.5deg);
    }

    70% {
        transform: translateX(-5px) rotate(0.5deg);
    }

    80% {
        transform: translateX(5px) rotate(-0.5deg);
    }

    90% {
        transform: translateX(-5px) rotate(0.5deg);
    }

    100% {
        transform: translateX(0);
    }
}

.hkb-take-me-home-shake-effect {
    animation: hkb-take-me-home-shake 0.8s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Bounce-in animation for successful moves feedback */
@keyframes hkb-take-me-home-bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.hkb-take-me-home-bounce-in-effect {
    animation: hkb-take-me-home-bounceIn 0.7s forwards;
}

/* Fireworks effect */
.hkb-take-me-home-firework {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    pointer-events: none;
    animation: hkb-take-me-home-firework-burst 1s forwards;
    z-index: 99; /* Below feedback overlay */
}

@keyframes hkb-take-me-home-firework-burst {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    10% {
        opacity: 1;
        transform: scale(0.5);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.5);
    }

    100% {
        opacity: 0;
        transform: scale(2.5);
    }
}

/* Full-page overlay for feedback */
.hkb-take-me-home-overlay-feedback {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* On top of everything */
    opacity: 0;
    pointer-events: none; /* Allows clicks to pass through when hidden */
    transition: opacity 0.3s ease-in-out;
}

    .hkb-take-me-home-overlay-feedback.hkb-take-me-home-show {
        opacity: 1;
        pointer-events: auto; /* Block clicks when visible */
    }

.hkb-take-me-home-overlay-feedback-icon {
    font-size: 15rem; /* Large icon size */
    font-weight: bold;
    color: white; /* Icon color */
    text-shadow: 0 0 20px rgba(0,0,0,0.5); /* Optional shadow for pop */
    animation: hkb-take-me-home-bounceIn 0.7s forwards; /* Apply bounce to the icon itself */
}

.hkb-take-me-home-overlay-success {
    background-color: rgba(76, 175, 80, 0.5); /* Green with 50% opacity */
}

.hkb-take-me-home-overlay-error {
    background-color: rgba(244, 67, 54, 0.5); /* Red with 50% opacity */
}

/* Final Celebration Text Overlay */
.hkb-take-me-home-final-celebration-text {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Same as feedback overlay */
    background-color: rgba(0, 0, 0, 0.7); /* Dark overlay */
    color: white;
    font-size: 15vw; /* Approximately 75% of screen width for text */
    font-weight: bold;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
    text-shadow: 0 0 20px rgba(255,255,255,0.8);
}

    .hkb-take-me-home-final-celebration-text.hkb-take-me-home-show {
        opacity: 1;
        pointer-events: auto;
    }


.hkb-take-me-home-puzzle-container {
    background-color: #fff; /* White background for the main container */
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    padding: 30px;
    max-width: 1200px;
    width: 100%;
    border: 5px solid #388E3C; /* Green border */
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center; /* <-- Add this line to center child grid vertically */
}

.hkb-take-me-home-puzzle-pieces-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(3rem, 8rem)); /* 5 columns */
    justify-items: center;
    align-items: center;
    min-height: 4rem;
    background-color: #fff; /* White background for puzzle pieces grid */
    border-radius: 15px;
    margin-bottom: .25rem; /* Space before the line */
    border-bottom: none; /* Removed dashed border */
    gap: .5rem;
}

.hkb-take-me-home-puzzle-piece {
    background-color: #FBC02D; /* Yellow */
    color: #1B5E20; /* Dark Green text */
    border-radius: .5rem;
    padding: 2rem;
    font-size: 3rem; /* Default for large screens */
    font-weight: 700;
    cursor: pointer; /* Changed to pointer for tapping */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
    text-align: center;
    user-select: none;
    line-height: 1; /* Adjust line height to center text vertically */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5rem; /* Default for large screens */
    height: 5rem; /* Default for large screens */
}

    .hkb-take-me-home-puzzle-piece:active {
        transform: scale(1.05);
    }

.hkb-take-me-home-drop-targets-grid {
    display: flex; /* Changed to flex for single target */
    justify-content: center;
    align-items: center;
    background-color: #fff; /* White background for drop targets grid */
    padding: 25px;
    border-radius: 15px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
    min-height: 180px; /* Ensure enough space for collected pieces */
}

.hkb-take-me-home-drop-target {
    background-color: #8BC34A; /* Lighter Green */
    color: #1B5E20; /* Dark Green text for base letter */
    border-radius: 15px; /* Rectangular */
    padding: 0; /* Remove padding to allow full control of inner elements */
    font-size: 3rem; /* Base font size for the container */
    font-weight: 700;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border: 3px solid #388E3C; /* Solid Darker Green border */
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    /* Grid for collected pieces arrangement */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    grid-template-rows: repeat(3, 1fr); /* 3 rows */
    align-items: center; /* Center items in their cells */
    justify-items: center; /* Center items in their cells */

    width: 160px; /* Fixed width for consistency */
    height: 160px; /* Fixed height for consistency */
    position: relative; /* For absolute positioning of feedback */
    overflow: hidden; /* Crucial to keep collected pieces within bounds */
}

.hkb-take-me-home-drop-target-base-letter { /* New class for the base letter itself */
    grid-area: 2 / 2; /* Center cell of the 3x3 grid */
    font-size: 2.5rem; /* Slightly smaller to make room */
    font-weight: 700;
    color: #D32F2F; /* Keep base letter color (Red) */
    line-height: 1;
    margin: 5px; /* Small margin to separate from collected pieces */
    z-index: 2; /* Ensure it's above collected pieces */
}


.hkb-take-me-home-drop-target.hkb-take-me-home-drag-over {
    background-color: #689F38; /* Darker green on drag over */
    border-color: #FBC02D; /* Darker yellow border */
}

.hkb-take-me-home-collected-piece {
    font-size: 1.2rem; /* Smaller font */
    font-weight: 400;
    color: #1B5E20; /* Dark Green text for collected piece */
    background-color: #FFFDE7; /* Very light yellow background for collected piece */
    padding: 3px 6px;
    border-radius: 8px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    /* Initial state for animation */
    opacity: 0;
    transform: scale(0);
    animation: hkb-take-me-home-bounceIn 0.5s forwards; /* Animation when collected */
    z-index: 1; /* Below base letter */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hkb-take-me-home-puzzle-pieces-grid {
        grid-template-columns: repeat(auto-fit, minmax(2rem, 5rem));
    }

    .hkb-take-me-home-puzzle-piece {
        padding: 1.5rem;
        font-size: 2rem;
        width: 3rem;
        height: 3rem;
    }

    .hkb-take-me-home-drop-target {
        font-size: 2rem; /* Adjusted for smaller screen */
        width: 120px; /* Adjusted for smaller screen */
        height: 120px; /* Adjusted for smaller screen */
        min-height: 120px;
    }

    .hkb-take-me-home-drop-target-base-letter {
        font-size: 1.8rem; /* Adjusted for smaller screen */
    }

    .hkb-take-me-home-overlay-feedback-icon {
        font-size: 10rem;
    }

    .hkb-take-me-home-collected-piece {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .hkb-take-me-home-puzzle-pieces-grid {
        grid-template-columns: repeat(auto-fit, minmax(1rem, 3.5rem)); /* 5 columns */
    }

    .hkb-take-me-home-puzzle-piece {
        padding: 1rem;
        font-size: 1.5rem;
        width: 2rem;
        height: 2rem;
    }

    .hkb-take-me-home-drop-target {
        font-size: 1.5rem; /* Adjusted for smallest screen */
        width: 100px;
        height: 100px; /* Adjusted for smallest screen */
        min-height: 100px;
    }

    .hkb-take-me-home-drop-target-base-letter {
        font-size: 1.5rem;
    }

    .hkb-take-me-home-puzzle-container {
        padding: 15px;
        margin: 20px auto;
    }

    .hkb-take-me-home-overlay-feedback-icon {
        font-size: 7rem;
    }

    .hkb-take-me-home-collected-piece {
        font-size: 0.9rem;
        padding: 2px 4px;
    }
}

.cookie-consent-banner {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-bg-paper, #fff);
    color: var(--color-text-dark, #333);
    border: 2px solid var(--color-primary, #16a34a);
    border-radius: 1rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    padding: 1rem 2rem;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.1rem;
    max-width: 90vw;
}

    .cookie-consent-banner a {
        color: var(--color-primary, #16a34a);
        text-decoration: underline;
    }

.cookie-consent-btn {
    background: var(--color-primary, #16a34a);
    color: var(--color-text-light, #fff);
    border: none;
    border-radius: 0.5rem;
    padding: 0.5rem 1.2rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}

    .cookie-consent-btn:hover {
        background: var(--color-secondary, #ef4444);
    }

@media (max-width: 600px) {
    .cookie-consent-banner {
        flex-direction: column;
        font-size: 1rem;
        padding: 1rem;
        bottom: 10px;
    }

    .cookie-consent-btn {
        width: 100%;
        margin-top: 0.5rem;
    }
}

.hkb-card-emoji {
    font-size: 4rem;
    letter-spacing: 0; /* Add this line to remove extra space between letters */
}


.font-size-2 {
    font-size: 2rem;
}
.font-size-3 {
    font-size: 3rem;
}
.font-size-4 {
    font-size: 4rem;
}
.font-size-5 {
    font-size: 5rem;
}
.font-size-7 {
    font-size: 7rem;
}
.font-size-10 {
    font-size: 10rem;
}
.font-size-15 {
    font-size: 15rem;
}
.font-size-20 {
    font-size: 20rem;
}

.hkb-match-quiz-outer-container {
    background-color: #f0f9ff; /* Light blue background */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    margin: 0;
    margin-top:1rem;
    overflow: hidden; /* Prevent scroll for confetti */
    width: 100%;
    padding:.25rem;
}
.hkb-match-quiz-container {
    width: 100%;
    max-width: 1200px;
    min-height: 60vh;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 1rem .25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden; /* For shake effect */
}

.hkb-match-quiz-header {
    font-size: 2.5rem;
    font-weight: bold;
    color: #1e40af; /* Dark blue */
    margin-bottom: 2rem;
    text-align: center;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #bfdbfe, #93c5fd); /* Light blue gradient */
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.hkb-match-quiz-game-area {
    display: flex; /* Keep as flex */
    justify-content: space-around;
    width: 100%;
    flex-grow: 1;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.hkb-match-quiz-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: calc(50% - 0.75rem); /* Adjusted for two columns with gap */
    /* Removed min-width to allow shrinking on small screens */
}

/* New container for each row item (button + audio icon) */
.hkb-match-quiz-item-row {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Space between button and icon */
    width: 100%; /* Take full width of its column */
}

.hkb-match-quiz-button {
    background-color: #e0f2fe; /* Light blue */
    color: #1e40af;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    font-size: 1.5rem; /* Default font size */
    font-weight: 600;
    cursor: pointer;
    border: 2px solid #93c5fd;
    transition: all 0.3s ease-in-out;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60px; /* Ensure consistent height */
    flex-grow: 1; /* Allow button to take available space */
    /* Removed position: relative; and padding-right; */
}

    .hkb-match-quiz-button:hover:not(.hkb-match-quiz-matched):not(.hkb-match-quiz-selected) {
        background-color: #dbeafe; /* Lighter blue on hover */
        transform: translateY(-5px) scale(1.05);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        border-color: #60a5fa;
    }

    .hkb-match-quiz-button.hkb-match-quiz-selected {
        background-color: #60a5fa; /* Blue for selected */
        color: white;
        border-color: #3b82f6;
        transform: scale(1.02);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }

    .hkb-match-quiz-button.hkb-match-quiz-matched {
        color: white;
        border: 2px solid transparent; /* Remove border when matched */
        cursor: default;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        transform: none; /* Remove hover transform */
        pointer-events: none; /* Disable clicks on matched items */
    }

/* Configurable colors for matched items */
.hkb-match-quiz-color-0 {
    background-color: #f87171;
}
/* Red */
.hkb-match-quiz-color-1 {
    background-color: #fbbf24;
}
/* Amber */
.hkb-match-quiz-color-2 {
    background-color: #4ade80;
}
/* Green */
.hkb-match-quiz-color-3 {
    background-color: #60a5fa;
}
/* Blue */
.hkb-match-quiz-color-4 {
    background-color: #a78bfa;
}
/* Purple */
.hkb-match-quiz-color-5 {
    background-color: #f472b6;
}
/* Pink */
.hkb-match-quiz-color-6 {
    background-color: #2dd4bf;
}
/* Teal */
.hkb-match-quiz-color-7 {
    background-color: #facc15;
}
/* Yellow */
/* Add more colors if needed */

.hkb-match-quiz-controls {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.hkb-match-quiz-control-button {
    background-color: #22c55e; /* Green */
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

    .hkb-match-quiz-control-button:hover:not(:disabled) {
        background-color: #16a34a; /* Darker green on hover */
        transform: translateY(-3px) scale(1.03);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }

    .hkb-match-quiz-control-button:disabled {
        background-color: #a7f3d0; /* Lighter green when disabled */
        cursor: not-allowed;
        opacity: 0.7;
        box-shadow: none;
        transform: none;
    }

/* Shake effect for mismatch */
@keyframes hkb-match-quiz-shake {
    0%, 100% {
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }

    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}

.hkb-match-quiz-shake {
    animation: hkb-match-quiz-shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Overlay for mismatch 'X' */
.hkb-match-quiz-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 0, 0, 0.5); /* 50% transparent red */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10em;
    color: white; /* Default color for X, overridden below */
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    border-radius: 20px; /* Match container border-radius */
}

    .hkb-match-quiz-overlay.hkb-match-quiz-show {
        opacity: 1;
        visibility: visible;
    }

/* Styling for the 'X' within the overlay */
.hkb-match-quiz-x {
    font-weight: 900; /* Make it bold */
    color: #b91c1c; /* Darker red for the X itself */
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Optional: add a subtle shadow for better visibility */
}


/* Confetti animation */
.hkb-match-quiz-confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 2000;
}

.hkb-match-quiz-confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: var(--confetti-color);
    border-radius: 50%;
    opacity: 0;
    animation: hkb-match-quiz-confetti-fall var(--confetti-duration) forwards ease-out;
}

@keyframes hkb-match-quiz-confetti-fall {
    0% {
        transform: translate(var(--start-x), var(--start-y)) rotateZ(0deg);
        opacity: 1;
    }

    100% {
        transform: translate(var(--end-x), var(--end-y)) rotateZ(720deg);
        opacity: 0;
    }
}

/* Styling for the audio button (now next to the main button) */
.hkb-match-quiz-audio-btn {
    background-color: #93c5fd; /* Light blue */
    border: none;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease-in-out;
    padding: 0; /* Remove default button padding */
    flex-shrink: 0; /* Prevent shrinking */
}

    .hkb-match-quiz-audio-btn:hover {
        background-color: #60a5fa; /* Darker blue on hover */
        transform: scale(1.1);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .hkb-match-quiz-audio-btn svg {
        width: 1.25rem;
        height: 1.25rem;
        color: white;
    }

/* Responsive adjustments */
@media (max-width: 768px) {
    .hkb-match-quiz-container {
    }

    .hkb-match-quiz-header {
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
    }
    /* Ensure columns remain side-by-side */
    .hkb-match-quiz-game-area {
        flex-direction: row; /* Explicitly keep row direction */
        gap: 0.5rem; /* Reduce gap on smaller screens */
    }

    .hkb-match-quiz-column {
        width: calc(50% - 0.25rem); /* Adjusted for smaller gap */
        /* min-width is removed, allowing it to shrink */
    }

    .hkb-match-quiz-button {
        font-size: 1rem; /* Smaller font size to fit */
        padding: 0.6rem 0.8rem;
        min-height: 50px;
    }

    .hkb-match-quiz-control-button {
        font-size: 0.9rem;
        padding: 0.5rem 0.8rem;
    }

    .hkb-match-quiz-overlay {
        font-size: 5em;
    }

    .hkb-match-quiz-audio-btn {
        width: 1.8rem;
        height: 1.8rem;
    }

        .hkb-match-quiz-audio-btn svg {
            width: 0.9rem;
            height: 0.9rem;
        }

    .hkb-match-quiz-item-row {
        gap: 0.3rem; /* Smaller gap on small screens */
    }
}

@media (max-width: 480px) {
    .hkb-match-quiz-header {
        font-size: 1.5rem;
    }

    .hkb-match-quiz-button {
        font-size: 0.85rem; /* Even smaller font size for very small screens */
        padding: 0.4rem 0.6rem;
        min-height: 40px;
    }

    .hkb-match-quiz-audio-btn {
        width: 1.6rem;
        height: 1.6rem;
    }

        .hkb-match-quiz-audio-btn svg {
            width: 0.8rem;
            height: 0.8rem;
        }

    .hkb-match-quiz-control-button {
        font-size: 0.8rem;
        padding: 0.4rem 0.7rem;
    }

    .hkb-match-quiz-overlay {
        font-size: 4em;
    }
}

/* Responsive nav for hamburger menu */
@media (max-width: 768px) {
    .floating-nav {
        flex-direction: row;
        align-items: stretch;
    }

    #nav-items-container {
        display: none;
        width: 100%;
        margin-top: 0.5rem;
    }

        #nav-items-container.expanded {
            display: flex !important;
        }

    .nav-home-btn,
    .hamburger-container {
        display: inline-block;
        vertical-align: middle;
    }

    .floating-nav > .nav-home-btn,
    .floating-nav > .hamburger-container {
        width: auto;
        display: inline-block;
        display: inline-block;
    }

    .floating-nav {
        flex-direction: column;
        align-items: stretch;
    }

    .floating-nav-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
}