/* Basic Reset & Font Setup */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Cyberpunk Neon Palette */
    --neon-blue: #00ffff;
    --neon-pink: #ff00ff;
    --neon-purple: #9d00ff;
    --neon-green: #39ff14; /* For non-scoreable Hiragana */
    --neon-yellow: #ffff00; /* Hitbox lines / Early Hit */
    --neon-red: #ff1177; /* Hitbox lines / Missed Hiragana */
    --neon-orange: #ff8c00; /* Late Hit */

    --background-dark: #0d0d1a; /* Deep dark blue/purple */
    --text-light: #e0e0ff;
    --accent-dark: #2a2a4a;
    --accent-medium: #4a4a6a;

    /* Fonts */
    --font-title: 'Orbitron', sans-serif;
    --font-body: 'Rajdhani', sans-serif;

    /* Animation */
    --transition-speed: 0.3s;
}

body {
    font-family: var(--font-body);
    background-color: var(--background-dark);
    color: var(--text-light);
    overflow: hidden; /* Prevent scrollbars initially */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-weight: 500; /* Rajdhani looks better slightly bolder */
}

/* Main Containers */
#main-menu, #game-screen {
    width: 95%;
    max-width: 1200px; /* Max width for larger screens */
    height: 90vh; /* Take up most of the viewport height */
    padding: 20px;
    border: 1px solid var(--neon-blue);
    box-shadow: 0 0 15px var(--neon-blue), inset 0 0 10px var(--accent-dark);
    /* background-color: rgba(13, 13, 26, 0.85); */ /* Replaced with gradient */
    background: linear-gradient(to bottom right, #00334d, #33004d); /* Dark blue-purple gradient */
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative; /* For absolute positioning inside */
    /* z-index: 1; */ /* Removed */
}

#game-screen {
    /* Game screen specific layout will be added later */
    background-color: #000; /* Black background for gameplay */
    border-color: var(--neon-purple);
    box-shadow: 0 0 15px var(--neon-purple), inset 0 0 10px #000;
}

/* Main Menu Styling */
#main-menu {
    justify-content: center; /* Center content vertically */
}

.title {
    font-family: var(--font-title);
    font-size: 4rem;
    /* color: var(--neon-pink); */ /* Replaced with gradient */
    /* text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink), 0 0 15px #fff; */ /* Removed text shadow */
    background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple), var(--neon-blue)); /* Blue-Purple-Blue for smooth loop */
    -webkit-background-clip: text; /* Clip gradient to text */
    background-clip: text;
    color: transparent; /* Make text transparent to show gradient */
    background-size: 200% 100%; /* Size for one full B-P-B cycle */
    animation: animate-gradient 5s linear infinite alternate; /* Apply animation with alternate direction */
    margin-bottom: 40px;
    letter-spacing: 2px;
    /* position: relative; */ /* No longer needed */
    /* z-index: 1; */ /* No longer needed */
}

.menu-controls {
    display: flex;
    gap: 15px; /* Reduced gap slightly */
    align-items: center; /* Align items vertically */
    flex-wrap: wrap; /* Allow wrapping to next line */
    justify-content: center; /* Center items horizontally */
    width: 80%; /* Limit width to encourage wrapping */
    margin: 0 auto; /* Center the control group */
}

/* Ensure labels align with their controls (and handle the course/music combo) */
.menu-controls > label,
.menu-controls > div {
    /* display: flex; /* Make label+control pairs flex */ /* Let the div handle flex */
    align-items: center;
    gap: 8px; /* Gap within label/control pair */
}

/* Specific styling for the course selection container */
#course-selection {
    display: flex; /* Make course and music dropdowns side-by-side */
    align-items: center; /* Align items vertically */
    /* gap: 15px; */ /* Removed gap, using margin on child now */
    /* JS will handle overall visibility */
}

.menu-controls label {
    font-size: 1.2rem;
    color: var(--neon-blue);
}

/* Basic Button & Select Styling (Cyberpunk) */
select, button {
    font-family: var(--font-body);
    font-size: 1.1rem;
    padding: 10px 20px;
    background-color: transparent;
    border: 1px solid var(--neon-blue);
    color: var(--neon-blue);
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    box-shadow: inset 0 0 5px rgba(0, 255, 255, 0.3);
    font-weight: 600;
}

select {
    appearance: none; /* Remove default styling */
    background-color: var(--accent-dark); /* Darker background for select */
    padding-right: 30px; /* Space for custom arrow */
    width: 200px; /* Set consistent width */
    /* Add custom arrow later if desired */
}

select option {
    background-color: var(--background-dark);
    color: var(--text-light);
}

button:hover, select:hover {
    background-color: rgba(0, 255, 255, 0.1);
    box-shadow: 0 0 10px var(--neon-blue), inset 0 0 8px rgba(0, 255, 255, 0.5);
    color: #fff;
}

button:active {
    background-color: rgba(0, 255, 255, 0.2);
    box-shadow: 0 0 5px var(--neon-blue), inset 0 0 10px rgba(0, 255, 255, 0.7);
}

/* Custom Select Dropdown Styling */
.custom-select-wrapper {
    position: relative; /* Needed for absolute positioning of options */
    display: inline-block; /* Keep as inline-block to fit within flex row */
    /* min-width: 180px; */ /* Replaced by explicit width */
    width: 200px; /* Set consistent width */
    /* vertical-align: middle; */ /* Remove vertical-align, rely on flex align-items */
    /* position: relative; */ /* Remove relative positioning */
    /* top: -2px; */ /* Remove nudge */
}

/* Explicit margin for Kana music dropdown to match main menu gap */
#kana-music-select-custom {
    margin-left: 15px; /* Apply margin to match outer gap */
    /* margin-top: -2px; */ /* Removed margin nudge */
}

.custom-select-button {
    width: 100%;
    text-align: left;
    padding-right: 30px; /* Space for dropdown arrow */
    position: relative; /* For arrow positioning */
    background-color: var(--accent-dark); /* Match select background */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Simple dropdown arrow */
.custom-select-button::after {
    content: '▼';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8em;
    pointer-events: none; /* Prevent arrow from interfering with clicks */
}

.custom-select-options {
    position: absolute;
    top: 100%; /* Position below the button */
    left: 0;
    right: 0;
    background-color: var(--background-dark);
    border: 1px solid var(--neon-blue);
    border-top: none; /* Avoid double border */
    border-radius: 0 0 4px 4px;
    z-index: 1001; /* Increase z-index significantly to ensure it's above modals/other elements */
    max-height: 150px; /* Limit height */
    overflow-y: auto; /* Add scroll if needed */
    list-style: none;
    padding: 0;
    margin: 0;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}

.custom-select-options li {
    padding: 10px 15px;
    cursor: pointer;
    color: var(--text-light);
    transition: background-color var(--transition-speed);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-select-options li:hover,
.custom-select-options li.selected {
    background-color: var(--accent-medium);
    color: var(--neon-yellow);
}

.custom-select-options li.disabled {
    color: var(--accent-medium);
    cursor: not-allowed;
    background-color: transparent;
}


/* Game Screen Elements (Initial Placeholders) */
#game-info {
    position: absolute;
    top: 10px;
    left: 20px;
    display: flex;
    gap: 30px;
    font-size: 1.2rem;
    color: var(--neon-purple);
    text-shadow: 0 0 3px var(--neon-purple);
    z-index: 20; /* Keep high z-index */
}

/* Hit Feedback Styling */
#hit-feedback {
    position: absolute;
    top: 60px; /* Position below game info */
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-title); /* Use title font */
    font-size: 2.5rem;
    font-weight: bold;
    /* color: var(--neon-yellow); */ /* Color will be set by class */
    /* text-shadow: 0 0 5px var(--neon-yellow), 0 0 10px var(--neon-yellow), 0 0 15px #fff; */ /* Shadow set by class */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.5s ease-out, color 0.1s ease-out, text-shadow 0.1s ease-out; /* Fade out transition */
    pointer-events: none; /* Prevent interaction */
    z-index: 15; /* Below game info, above lyrics */
}

#hit-feedback.show {
    opacity: 1;
}

/* Specific feedback colors */
#hit-feedback.feedback-perfect {
    color: var(--neon-purple);
    text-shadow: 0 0 5px var(--neon-purple), 0 0 10px var(--neon-purple), 0 0 15px #fff;
}
#hit-feedback.feedback-early {
    color: var(--neon-yellow);
    text-shadow: 0 0 5px var(--neon-yellow), 0 0 10px var(--neon-yellow), 0 0 15px #fff;
}
#hit-feedback.feedback-late {
    color: var(--neon-orange);
    text-shadow: 0 0 5px var(--neon-orange), 0 0 10px var(--neon-orange), 0 0 15px #fff;
}


/* Miss Feedback Styling */
#miss-feedback {
    position: absolute;
    /* Position vertically near the English rows (~center of lyrics area) */
    top: 50%;
    /* Position horizontally in the miss zone (left of the static 5px late line) */
    left: 3%; /* Small percentage from the left edge of the game screen */
    /* Remove centering, adjust vertical alignment slightly if needed */
    transform: translateY(-50%); /* Center vertically relative to top: 50% */
    font-family: var(--font-title);
    font-size: 2rem; /* Slightly smaller than hit feedback */
    font-weight: bold;
    color: var(--neon-red); /* Red color for misses */
    text-shadow: 0 0 5px var(--neon-red), 0 0 10px var(--neon-red);
    opacity: 0; /* Hidden by default */
    transition: opacity 0.5s ease-out; /* Fade out transition */
    pointer-events: none; /* Prevent interaction */
    z-index: 15; /* Same level as hit feedback */
}

#miss-feedback.show {
    opacity: 1;
}


/* Video Background Styling */
#game-video {
    display: block; /* Ensure it's not hidden by default display */
    position: absolute; /* Changed back to absolute */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the entire container */
    /* z-index: -100; */ /* Removed z-index, rely on DOM order */
    opacity: 0.7; /* Optional: Make it slightly transparent */
}


#lyrics-display-area {
    /* Ensure lyrics area is above the video */
    position: relative; /* Needed for z-index to apply */
    /* z-index: 5; */ /* Removed z-index */
    flex-grow: 1; /* Take available vertical space */
    width: 100%;
    /* position: relative; */ /* Already relative */
    overflow: hidden; /* Crucial for scrolling effect */
    margin-top: 50px; /* Space below game info */
    margin-bottom: 80px; /* Space above progress bar/keyboard */
    border: 1px dashed var(--accent-medium); /* Temporary border */
}

#lyrics-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Re-adding flexbox for vertical centering */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Removed padding-top */
}

.lyrics-row {
    height: 1.2em; /* Drastically reduced height */
    line-height: 1.2em; /* Drastically reduced line-height */
    white-space: nowrap; /* Prevent wrapping */
    /* Changed back to relative positioning for flexbox layout */
    position: relative;
    font-size: 2.0rem; /* Increased font size by ~50% */
    width: 100%; /* Ensure rows take full width for span positioning */
    /* margin-bottom: 0.1em; */ /* Removed margin for tighter spacing */
}

/* Placeholder styles for rows */
.english-row { color: var(--text-light); }
.hiragana-row { color: var(--neon-blue); } /* Default to blue */

/* Remove background colors from kana rows */
#hiragana-chars-container .hiragana-checkbox-row {
    background-color: transparent !important;
}
#hiragana-chars-container .romaji-text-row {
    background-color: transparent !important;
}

/* Removed explicit top positioning */
/* Remove margin after English block */
#english-row-2 {
    /* margin-bottom: 0.2em; */ /* Removed */
}


#hitbox {
    position: absolute;
    left: 10%; /* Position hitbox on the left */
    top: 0;
    bottom: 0;
    width: 100px; /* Width of the entire hitbox zone */
    z-index: 10; /* Above lyrics-display-area */
    /* border: 1px solid white; */ /* For debugging */
}

.hitbox-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px; /* Thin lines */
}

/* Hitbox Lines - Colors Updated */
/* Leftmost Line (Miss Boundary) */
.line-late { background-color: var(--neon-red); left: 5px; } /* Stays Red */
/* Inner Left Line (Start of Perfect Window) */
.line-perfect-left { background-color: var(--neon-green); left: 25px; } /* Changed from yellow to green */
/* Inner Right Line (End of Perfect Window) */
.line-perfect-right { background-color: var(--neon-green); left: 75px; } /* Stays Green */
/* Rightmost Line (End of Early Window) */
.line-early { background-color: var(--neon-yellow); left: 95px; } /* Changed from green to yellow */
/* Note: Positions are dynamic via JS, except for line-late */

/* Electrified effect for combo bonus */
@keyframes pulse-electric {
  0% { box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.7), 0 0 5px 2px var(--neon-blue); }
  50% { box-shadow: 0 0 6px 2px rgba(255, 255, 255, 1), 0 0 10px 4px var(--neon-blue); }
  100% { box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.7), 0 0 5px 2px var(--neon-blue); }
}

.hitbox-line.electrified {
  animation: pulse-electric 0.5s infinite ease-in-out;
  /* Optionally make the line thicker or brighter */
  /* width: 3px; */
  /* filter: brightness(1.5); */
}


#hps-control {
    /* Removed absolute positioning */
    /* display: none; */ /* Hide by default - JS handles this now */
    align-items: center;
    gap: 10px;
    color: var(--neon-green);
    /* Removed margin-left, rely on parent gap */
}
/* Removed .hps-control-visible class */

/* Track Selection Styling */
#track-selection {
    /* display: none; */ /* Hide by default - JS handles this now */
    /* Removed margin-left, rely on parent gap */
    padding: 10px;
    /* border: 1px dashed var(--accent-medium); */ /* Removed border */
    border-radius: 4px;
    max-height: 150px; /* Limit height */
    overflow-y: auto; /* Add scroll if needed */
    /* background-color: rgba(42, 42, 74, 0.5); */ /* Removed background */
    min-width: 200px; /* Give it some base width */
}
/* Removed .track-selection-visible class */
#track-selection label {
    display: block;
    margin-bottom: 5px;
    color: var(--neon-green);
    font-size: 1rem;
    font-weight: bold;
}
#track-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
#track-list li {
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 3px;
    margin-bottom: 3px;
    transition: background-color var(--transition-speed);
    color: var(--text-light);
}
#track-list li:hover {
    background-color: var(--accent-medium);
    color: var(--neon-yellow);
}
#track-list li.selected {
    background-color: var(--neon-blue);
    color: var(--background-dark);
    font-weight: bold;
}


#hps-control input[type="range"] {
    cursor: pointer;
    width: 150px;
}
#hps-control span {
    font-weight: bold;
    min-width: 30px; /* Ensure space for value */
}

/* HPS Slider Track Styling */
#hps-control input[type="range"] {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 200px; /* Explicit width */
    height: 8px; /* Track height */
    background: var(--accent-dark); /* Fallback background */
    border-radius: 5px;
    outline: none;
    border: 1px solid var(--accent-medium);
}

#hps-control input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: linear-gradient(to right, var(--neon-pink), var(--neon-blue));
    border-radius: 5px;
    border: 1px solid var(--accent-medium);
}

#hps-control input[type="range"]::-moz-range-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: linear-gradient(to right, var(--neon-pink), var(--neon-blue));
    border-radius: 5px;
    border: 1px solid var(--accent-medium);
}

/* HPS Slider Thumb Styling */
#hps-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--neon-blue);
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: var(--text-light);
    cursor: pointer;
    margin-top: -6px; /* Adjust vertical position */
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

#hps-control input[type="range"]::-moz-range-thumb {
    border: 1px solid var(--neon-blue);
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: var(--text-light);
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

/* Scroll Speed Slider Container */
#scroll-speed-control {
    align-items: center;
    gap: 10px;
    color: var(--neon-pink); /* Use a different color maybe? Pink? */
}

/* Scroll Speed Slider Track Styling (Copy from HPS) */
#scroll-speed-control input[type="range"] {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 200px; /* Explicit width */
    height: 8px; /* Track height */
    background: var(--accent-dark); /* Fallback background */
    border-radius: 5px;
    outline: none;
    border: 1px solid var(--accent-medium);
    cursor: pointer; /* Add cursor */
}

#scroll-speed-control input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: linear-gradient(to right, var(--neon-pink), var(--neon-blue));
    border-radius: 5px;
    border: 1px solid var(--accent-medium);
}

#scroll-speed-control input[type="range"]::-moz-range-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: linear-gradient(to right, var(--neon-pink), var(--neon-blue));
    border-radius: 5px;
    border: 1px solid var(--accent-medium);
}

/* Scroll Speed Slider Thumb Styling (Copy from HPS) */
#scroll-speed-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--neon-blue);
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: var(--text-light);
    cursor: pointer;
    margin-top: -6px; /* Adjust vertical position */
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

#scroll-speed-control input[type="range"]::-moz-range-thumb {
    border: 1px solid var(--neon-blue);
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: var(--text-light);
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

#scroll-speed-control span {
    font-weight: bold;
    min-width: 30px; /* Ensure space for value */
}


#progress-bar-container {
    position: absolute;
    bottom: 90px; /* Increased bottom value further */
    left: 10%;
    right: 10%;
    height: 10px;
    background-color: var(--accent-dark);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--accent-medium);
    z-index: 10; /* Ensure above video */
}

#progress-bar {
    width: 0%; /* Starts empty */
    height: 100%;
    background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple));
    border-radius: 5px;
    transition: width 0.1s linear; /* Smooth progress update */
}

#keyboard-display {
    position: absolute;
    bottom: 10px; /* Adjust bottom position */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 5px;
    border-radius: 4px;
    width: auto; /* Adjust width based on content */
    max-width: 85%; /* Increased max width for wider layout */
    z-index: 10; /* Ensure above video */
}

.keyboard-row {
    display: flex;
    justify-content: center;
    gap: 3px;
}

.keyboard-key {
    padding: 2px 6px;
    min-width: 25px; /* Minimum key width */
    text-align: center;
    background-color: var(--accent-dark);
    border: 1px solid var(--accent-medium);
    border-radius: 3px;
    color: var(--text-light);
    font-size: 0.8rem;
    transition: all 0.1s ease;
}

.keyboard-key.active {
    background-color: var(--neon-blue);
    color: var(--background-dark);
    box-shadow: 0 0 8px var(--neon-blue);
    transform: scale(1.1);
}


/* Hiragana Character Styling (Placeholders) */
.hiragana-char {
    display: inline-block; /* Needed for transforms/positioning */
    margin: 0 1px; /* Spacing */
    padding: 0 2px;
    border-radius: 3px;
    transition: color var(--transition-speed), transform var(--transition-speed);
}

.hiragana-blue { color: var(--neon-blue); text-shadow: 0 0 5px var(--neon-blue); }
.hiragana-green { color: var(--neon-green); text-shadow: 0 0 5px var(--neon-green); }
.hiragana-hit { color: var(--neon-purple); transform: scale(1.1); }
.hiragana-miss { color: var(--neon-red); text-decoration: line-through; }

/* Add subtle background animation */
@keyframes pulse-glow {
    0% { box-shadow: 0 0 15px var(--neon-blue), inset 0 0 10px var(--accent-dark); }
    50% { box-shadow: 0 0 25px var(--neon-blue), inset 0 0 15px var(--accent-dark); }
    100% { box-shadow: 0 0 15px var(--neon-blue), inset 0 0 10px var(--accent-dark); }
}

#main-menu {
    /* animation: pulse-glow 5s infinite ease-in-out; */ /* Removed pulse animation */
}

/* Start Button Shimmer Animation */
@keyframes shimmer {
    0% { box-shadow: inset 0 0 5px rgba(0, 255, 255, 0.3), 0 0 5px rgba(0, 255, 255, 0.1); }
    50% { box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.6), 0 0 15px rgba(0, 255, 255, 0.5); }
    100% { box-shadow: inset 0 0 5px rgba(0, 255, 255, 0.3), 0 0 5px rgba(0, 255, 255, 0.1); }
}

#start-game-btn.start-active {
    /* animation: shimmer 0.8s ease-in-out; */ /* Removed shimmer */
    box-shadow: 0 0 15px var(--neon-blue), inset 0 0 8px rgba(0, 255, 255, 0.5); /* Added constant blue glow */
    border-color: var(--neon-blue); /* Ensure border stays blue */
    color: #fff; /* Make text white for better contrast */
}

#start-game-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* Hiragana Options in Main Menu */
#hiragana-options {
    /* display: none; */ /* JS handles visibility */
    width: 100%; /* Take full width within controls */
    padding: 15px;
    margin-top: 15px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items */
    text-align: center; /* Added for button centering */
    gap: 10px;
}

#kana-modal-title,
#confirm-characters-btn {
  display: none !important;
}

#hiragana-options label {
    color: var(--neon-green); /* Match HPS label color */
    font-size: 1.1rem;
}

#hiragana-track-select-main {
    /* width: 90%; */ /* Remove fixed width */
    max-width: 180px; /* Reduced max width */
    /* JS will handle visibility */
}

/* Restored #open-characters-modal-btn styles */
#open-characters-modal-btn {
    /* width: 90%; */ /* Removed explicit width to allow centering */
    max-width: 250px; /* Reduced max width */
    border: none; /* Removed border */
    background-color: transparent; /* Removed background */
    color: var(--neon-pink);
}
#open-characters-modal-btn:disabled {
    border-color: var(--accent-medium);
    color: var(--accent-medium);
    cursor: not-allowed;
    background-color: transparent;
    box-shadow: none;
}
#open-characters-modal-btn:not(:disabled):hover {
    background-color: rgba(255, 0, 255, 0.1);
    box-shadow: 0 0 10px var(--neon-pink), inset 0 0 8px rgba(255, 0, 255, 0.5);
    color: #fff;
}


#character-selection-status {
    font-size: 0.9em;
    color: var(--text-light);
    margin-top: 5px;
    min-height: 1em; /* Reserve space */
}

/* Kana Type Toggle Buttons (Now inside Modal) */
#kana-type-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px; /* Added margin back */
    width: 100%; /* Full width to space out buttons */
}

/* Center the tabs group */
.kana-tab-group {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}

/* Arrange: Select All | tabs | Deselect All */
#kana-type-toggle > button#hiragana-select-all {
    order: 1;
    flex-shrink: 0;
}

#kana-type-toggle > .kana-tab-group {
    order: 2;
}

#kana-type-toggle > button#hiragana-deselect-all {
    order: 3;
    flex-shrink: 0;
}

.kana-toggle-btn {
    padding: 5px 15px; /* Smaller padding */
    font-size: 1rem; /* Slightly smaller font */
    border-color: var(--accent-medium); /* Default border */
    color: var(--accent-medium); /* Default color */
    box-shadow: none; /* No inset shadow by default */
}

.kana-toggle-btn.active {
    border-color: var(--neon-pink); /* Active border */
    color: var(--neon-pink); /* Active color */
    background-color: rgba(255, 0, 255, 0.1); /* Slight pink background */
    box-shadow: 0 0 8px var(--neon-pink), inset 0 0 5px rgba(255, 0, 255, 0.2); /* Pink glow */
}

/* Katakana tab yellow when active */
#kana-toggle-katakana.active {
    color: var(--neon-yellow);
    border-color: var(--neon-yellow);
}

/* Deselect All button to far right */
#hiragana-options button#hiragana-deselect-all {
    margin-left: auto;
}

.kana-toggle-btn:not(.active):hover {
    border-color: var(--neon-blue);
    color: var(--neon-blue);
    background-color: rgba(0, 255, 255, 0.1);
    box-shadow: 0 0 5px var(--neon-blue);
}


/* Pause Menu Styling */
#pause-menu {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7); /* Dark semi-transparent overlay */
    display: flex; /* Use flex to center the box */
    justify-content: center;
    align-items: center;
    z-index: 100; /* Ensure it's on top of everything */
}

.pause-box {
    background-color: var(--background-dark);
    border: 1px solid var(--neon-pink);
    box-shadow: 0 0 15px var(--neon-pink);
    padding: 30px 40px;
    border-radius: 8px;
    text-align: center;
}

.pause-box p {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: var(--text-light);
}

.pause-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* Reuse button styles, maybe add specific colors */
#pause-yes {
    border-color: var(--neon-green);
    color: var(--neon-green);
}
#pause-yes:hover {
     background-color: rgba(57, 255, 20, 0.1); /* Neon green glow */
     box-shadow: 0 0 10px var(--neon-green), inset 0 0 8px rgba(57, 255, 20, 0.5);
     color: #fff;
}
#pause-no {
     border-color: var(--neon-red);
     color: var(--neon-red);
}
#pause-no:hover {
     background-color: rgba(255, 17, 119, 0.1); /* Neon red glow */
     box-shadow: 0 0 10px var(--neon-red), inset 0 0 8px rgba(255, 17, 119, 0.5);
     color: #fff;
}


/* Modal Styles */
.modal-overlay {
    position: fixed; /* Stay in place */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* Dark semi-transparent background */
    display: flex; /* Reverted from !important */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure it's on top */
}

/* Class to explicitly hide modals */
.modal-hidden {
    display: none !important;
}

.modal-content {
    background: linear-gradient(to bottom right, #1a001a, #001a33); /* Dark purple-blue gradient */
    padding: 30px;
    border-radius: 8px;
    border: 1px solid var(--neon-purple);
    box-shadow: 0 0 25px var(--neon-purple);
    width: 80%;
    max-width: 800px; /* Limit max width */
    max-height: 85vh; /* Limit max height */
    overflow-y: auto; /* Allow scrolling if content overflows */
    position: relative; /* Make close button relative to this */
    color: var(--text-light);
}

.modal-content h2 {
    font-family: var(--font-title);
    color: var(--neon-pink);
    text-align: center;
    margin-bottom: 20px;
}

.modal-close-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--neon-red);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    z-index: 1001;
}
.modal-close-btn:hover {
    color: #ff4d4d; /* brighter red on hover */
}

.modal-section {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dashed var(--accent-medium);
}
.modal-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.modal-section label {
    display: block;
    margin-bottom: 8px;
    color: var(--neon-blue);
    font-weight: bold;
}

.modal-section select {
    width: 100%; /* Make select dropdown full width */
}

/* --- Styles for elements *within* the modal --- */

.hiragana-selection-controls {
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
}

#hiragana-tabs-container {
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    border-bottom: 1px solid var(--accent-medium);
    padding-bottom: 10px;
}

#hiragana-tabs-container button {
    padding: 5px 10px;
    font-size: 0.9rem;
    /* Reuse .hiragana-tab-btn styles from below */
}

#hiragana-chars-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    background-color: transparent !important;
    border-radius: 4px;
    max-height: 250px; /* Limit height */
    overflow-y: auto; /* Add scroll */
}

/* Remove horizontal lines in kana modal */
#hiragana-chars-container .romaji-text-row {
    border-top: none !important;
}

#hiragana-chars-container .romaji-text-row:last-of-type {
    border-top: none !important;
}

/* Make English under Hiragana green */
#hiragana-chars-container .romaji-text-row:nth-of-type(3) .romaji-text-item {
    color: var(--neon-green);
    font-size: 2.4rem;
    font-weight: bold;
}

/* Force all green romaji text in Hiragana menu to be large */
#hiragana-chars-container .romaji-text-item {
    font-size: 2.4rem !important;
    font-weight: bold !important;
}

/* Also make any additional English rows green */
#hiragana-chars-container .romaji-text-row .romaji-text-item.english-translation {
    color: var(--neon-green);
}

.modal-section {
    border-bottom: none !important;
}

#hiragana-chars-container hr {
    display: none !important;
}

/* Style for active tab (applies to buttons inside #hiragana-tabs-container) */
#hiragana-tabs-container button.active {
    background-color: var(--neon-purple);
    color: var(--text-light);
    box-shadow: 0 0 8px var(--neon-purple);
}

/* Style for completed tab glow (applies to buttons inside #hiragana-tabs-container) */
#hiragana-tabs-container button.tab-complete {
    border-color: var(--neon-pink);
    box-shadow: 0 0 10px var(--neon-pink), inset 0 0 5px rgba(255, 0, 255, 0.3);
    animation: pulse-pink 1.5s infinite ease-in-out;
}

@keyframes pulse-pink {
    0% { box-shadow: 0 0 10px var(--neon-pink), inset 0 0 5px rgba(255, 0, 255, 0.3); }
    50% { box-shadow: 0 0 15px var(--neon-pink), inset 0 0 8px rgba(255, 0, 255, 0.5); }
    100% { box-shadow: 0 0 10px var(--neon-pink), inset 0 0 5px rgba(255, 0, 255, 0.3); }
}

/* Container for the tab-specific "Select All" (inside #hiragana-chars-container) */
#hiragana-chars-container .tab-select-all-container {
    padding-bottom: 5px;
    margin-bottom: 5px;
}
#hiragana-chars-container .tab-select-all-container label {
    font-weight: bold;
    color: var(--neon-blue);
    font-size: 1rem;
}
#hiragana-chars-container .tab-select-all-container input[type="checkbox"] {
    margin-right: 5px;
}

/* Styling for the character rows (inside #hiragana-chars-container) */
#hiragana-chars-container .hiragana-checkbox-row,
#hiragana-chars-container .romaji-text-row {
    display: flex; /* Arrange items horizontally */
    justify-content: space-around; /* Distribute items evenly */
    align-items: center; /* Align items vertically */
    width: 100%;
    padding: 5px 0; /* Add some padding */
}

#hiragana-chars-container .romaji-text-row {
    margin-top: 5px; /* Space between hiragana and romaji rows */
    border-top: 1px dashed var(--accent-medium); /* Separator line */
    padding-top: 8px;
}

/* Styling for items within the rows (inside #hiragana-chars-container) */
#hiragana-chars-container .hiragana-checkbox-item,
#hiragana-chars-container .romaji-text-item {
    flex: 1; /* Allow items to grow and shrink */
    text-align: center; /* Center content within each item */
    min-width: 40px; /* Ensure minimum width for spacing */
    padding: 0 5px; /* Add horizontal padding */
}

#hiragana-chars-container .hiragana-checkbox-item label {
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--text-light);
    display: inline-flex; /* Keep checkbox and text together */
    align-items: center;
    gap: 4px;
}

#hiragana-chars-container .hiragana-checkbox-item input[type="checkbox"] {
    cursor: pointer;
    transform: scale(1.1);
}

#hiragana-chars-container .romaji-text-item {
    font-size: 0.85rem;
    color: var(--accent-medium);
    font-style: italic;
    /* text-align: center; */ /* Already centered by parent */
}


/* Style for indeterminate checkbox */
input[type="checkbox"]:indeterminate {
    background-color: var(--accent-medium); /* Indicate partial selection */
    border-color: var(--neon-blue);
    box-shadow: 0 0 5px var(--neon-blue);
}


.modal-actions { /* Keep for Report Card */
    margin-top: 20px;
    text-align: center;
}

/* Removed #start-practice-btn styles */

/* JIS Input Toggle Styling */
#jis-toggle-option {
    display: flex; /* Use flex for alignment */
    align-items: center;
    justify-content: center; /* Center horizontally */
    gap: 8px; /* Space between checkbox and label */
    margin-top: 15px; /* Add some space above */
}

#jis-toggle-option label {
    color: var(--neon-pink); /* Match other Kana options */
    font-size: 1rem;
    cursor: pointer;
}

#jis-toggle-option input[type="checkbox"] {
    cursor: pointer;
    transform: scale(1.1); /* Make checkbox slightly larger */
    accent-color: var(--neon-pink); /* Style the checkmark color */
}

/* JIS Remapping Info Text */
#jis-remapping-info p {
    font-size: 0.8em;
    color: var(--neon-yellow); /* Use yellow for info text */
    margin-top: 5px; /* Space below the toggle */
    font-style: italic;
}


/* Add more animations and specific styles later */

@keyframes animate-gradient {
  0% { background-position: 0% 50%; }
  100% { background-position: 50% 50%; } /* Animate only half the width for seamless loop */
}

/* Report Card Modal Styles */
#report-card .modal-content {
    /* Reuse existing modal styles, maybe adjust width/height if needed */
    max-width: 600px; /* Slightly smaller than character select */
}

#report-card h2 {
    color: var(--neon-green); /* Green title for improvement */
    margin-bottom: 15px;
}

#report-card p {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: var(--text-light);
}

#report-card #report-final-score {
    font-weight: bold;
    color: var(--neon-yellow);
}

#report-card .modal-section h3 {
    color: var(--neon-blue);
    margin-bottom: 10px;
    font-size: 1.1rem;
}

#report-card #missed-list {
    list-style: none; /* Remove default bullet points */
    padding: 0;
    margin: 0;
    max-height: 200px; /* Limit height and allow scroll */
    overflow-y: auto;
    background-color: rgba(0,0,0,0.2); /* Slight background for list */
    border-radius: 4px;
    padding: 10px;
}

#report-card #missed-list li {
    color: var(--text-light);
    margin-bottom: 8px;
    font-size: 1rem;
    border-bottom: 1px dashed var(--accent-medium);
    padding-bottom: 5px;
}

#report-card #missed-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

#report-card .modal-actions {
    margin-top: 25px;
}

#report-card #close-report-btn {
    /* Reuse standard button styles, maybe add specific color */
    border-color: var(--neon-blue);
    color: var(--neon-blue);
}

#report-card #close-report-btn:hover {
    background-color: rgba(0, 255, 255, 0.1);
    box-shadow: 0 0 10px var(--neon-blue), inset 0 0 8px rgba(0, 255, 255, 0.5);
    color: #fff;
}

/* Radicals Modal Styling */
#radicals-tabs-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--accent-medium);
    padding-bottom: 8px;
}

#radicals-tabs-container button {
    padding: 3px 8px;
    font-size: 0.8rem;
    border-radius: 4px;
    border: 1px solid var(--neon-blue);
    background-color: transparent;
    color: var(--neon-blue);
    cursor: pointer;
    transition: all 0.2s ease;
}

#radicals-tabs-container button:hover {
    background-color: rgba(0, 255, 255, 0.1);
    box-shadow: 0 0 5px var(--neon-blue);
    color: #fff;
}

#radicals-tabs-container button.active {
    background-color: var(--neon-purple);
    color: var(--text-light);
    box-shadow: 0 0 8px var(--neon-purple);
}

#radicals-tabs-container button.tab-complete {
    border-color: var(--neon-pink);
    box-shadow: 0 0 10px var(--neon-pink), inset 0 0 5px rgba(255, 0, 255, 0.3);
    animation: pulse-pink 1.5s infinite ease-in-out;
}

#radicals-chars-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    background-color: rgba(0,0,0,0.2);
    border-radius: 4px;
    max-height: 250px;
    overflow-y: auto;
}

#radicals-chars-container .hiragana-checkbox-row,
#radicals-chars-container .romaji-text-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    padding: 5px 0;
}

#radicals-chars-container .hiragana-checkbox-item {
    flex: 0 0 auto;
    text-align: center;
    min-width: 30px;
}

#radicals-chars-container .hiragana-checkbox-item label {
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--text-light);
}

#radicals-chars-container .romaji-text-item {
    font-size: 0.8rem;
    color: var(--accent-medium);
    font-style: italic;
}

/* Stretch radicals, romaji, and English rows */
#radicals-chars-container .hiragana-checkbox-row,
#radicals-chars-container .romaji-text-row {
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: nowrap;
}

#radicals-chars-container .hiragana-checkbox-item,
#radicals-chars-container .romaji-text-item {
    flex: 1;
    text-align: center;
}

/* Romaji row green */
#radicals-chars-container .romaji-text-row:nth-of-type(2) .romaji-text-item {
    color: var(--neon-green);
    font-style: normal;
}

/* English row white */
#radicals-chars-container .romaji-text-row:nth-of-type(3) .romaji-text-item {
    color: #ffffff;
    font-style: normal;
}

/* Remove horizontal line from all romaji rows */
#hiragana-chars-container .romaji-text-row {
    border-top: none !important;
}

/* Make the bottom row of English green */
#hiragana-chars-container .romaji-text-row:last-of-type .romaji-text-item {
    color: var(--neon-green) !important;
    font-style: normal;
}

/* Glow animation for completed radical tabs */
@keyframes glow-pulse {
  0% { box-shadow: 0 0 5px var(--neon-green), 0 0 10px var(--neon-green); }
  50% { box-shadow: 0 0 15px var(--neon-green), 0 0 25px var(--neon-green); }
  100% { box-shadow: 0 0 5px var(--neon-green), 0 0 10px var(--neon-green); }
}

.tab-complete-glow {
  animation: glow-pulse 1.5s infinite ease-in-out;
  border-color: var(--neon-green) !important;
  color: var(--neon-green) !important;
}

/* Radicals top row style */
.radical-char {
  color: white;
  font-size: 2rem;
}

/* Hiragana with green underline */
.hiragana-char {
  /* No underline by default */
}

.radicals-mode .hiragana-char {
  border-bottom: 2px solid var(--neon-green);
}

/* Scroll animation for radicals and hiragana in Radicals mode */
@keyframes scroll-left {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.radical-scroll, .hiragana-scroll {
  position: absolute;
  white-space: nowrap;
  animation: scroll-left 10s linear infinite;
}

/* --- Quiz Styles --- */

#quiz-tab-btn {
    /* Inherits base button styles */
    /* Positioned via flex order in the main menu controls */
    padding: 10px 20px; /* Match other main menu buttons */
    font-size: 1.1rem; /* Match other main menu buttons */
    border-color: var(--neon-yellow); /* Change to yellow */
    color: var(--neon-yellow); /* Change to yellow */
    box-shadow: inset 0 0 5px rgba(255, 255, 0, 0.3); /* Yellow shadow */
    /* Add margin if needed, but flex gap should handle spacing */
    /* margin-right: 15px; */
}

#quiz-tab-btn:hover {
    background-color: rgba(255, 255, 0, 0.1); /* Yellow hover */
    box-shadow: 0 0 10px var(--neon-yellow), inset 0 0 8px rgba(255, 255, 0, 0.5); /* Yellow hover */
    color: #000; /* Darker text on yellow hover */
}

/* Quiz Modal uses existing .modal-overlay */
#quiz-modal .modal-content {
    /* Inherits base modal content styles */
    max-width: 800px; /* Increased width */
    min-height: 400px; /* Ensure minimum height */
    display: flex;
    flex-direction: column;
}

.quiz-content {
    /* Specific padding/layout if needed, inherits base for now */
    flex-grow: 1; /* Allow content to fill modal */
    display: flex;
    flex-direction: column;
}

.quiz-controls {
    display: flex;
    justify-content: space-between; /* Space out toggle and show answers */
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--accent-medium);
}

.quiz-toggle {
    display: inline-flex; /* Group buttons together */
    border: 1px solid var(--neon-blue);
    border-radius: 4px;
    overflow: hidden; /* Clip button borders */
}

.quiz-toggle-btn {
    /* Inherits base button styles */
    border: none; /* Remove individual borders */
    border-radius: 0; /* Remove individual radius */
    padding: 8px 15px;
    font-size: 1rem;
    background-color: transparent;
    color: var(--neon-blue);
    box-shadow: none; /* Remove inset shadow */
}

.quiz-toggle-btn:not(:last-child) {
    border-right: 1px solid var(--neon-blue); /* Add separator */
}

.quiz-toggle-btn.active {
    background-color: var(--neon-blue);
    color: var(--background-dark);
    font-weight: bold;
}

.quiz-toggle-btn:hover:not(.active) {
    background-color: rgba(0, 255, 255, 0.1);
    color: #fff;
}

#quiz-show-answers-btn {
    /* Inherits base button styles */
    border-color: var(--neon-yellow);
    color: var(--neon-yellow);
    box-shadow: inset 0 0 5px rgba(255, 255, 0, 0.3);
}

#quiz-show-answers-btn:hover {
    background-color: rgba(255, 255, 0, 0.1);
    box-shadow: 0 0 10px var(--neon-yellow), inset 0 0 8px rgba(255, 255, 0, 0.5);
    color: #000;
}

#quiz-area {
    flex-grow: 1; /* Take remaining space */
    overflow-y: auto; /* Allow scrolling if content exceeds height */
    padding: 10px;
    background-color: rgba(13, 13, 26, 0.5); /* Slightly darker background */
    border-radius: 4px;
}

.quiz-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--accent-medium);
}

.quiz-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.quiz-question {
    flex: 1; /* Take up available space */
    margin-right: 15px;
    font-size: 1.1rem;
    color: var(--text-light);
}

/* .quiz-input-container was modified previously, adding .quiz-answer-container */
/* Add .quiz-answer-container if it doesn't exist */
.quiz-answer-container { /* New container for input+feedback+answer */
   display: flex;
   flex-direction: column; /* Stack input and answer vertically */
   flex: 1.5; /* Give more space */
   position: relative; /* Needed for absolute positioning of feedback */
}

.quiz-input-container {
    display: flex;
    align-items: center;
    width: 100%; /* Take full width of answer container */
    /* Removed flex: 1.5 */
}

.quiz-input {
    font-family: var(--font-body);
    font-size: 1.1rem;
    padding: 8px 12px;
    background-color: var(--accent-dark);
    border: 1px solid var(--accent-medium);
    color: var(--text-light);
    border-radius: 4px;
    flex-grow: 1; /* Input takes available space in container */
    margin-right: 10px;
    transition: border-color var(--transition-speed);
}

.quiz-input:focus {
    outline: none;
    border-color: var(--neon-blue);
    box-shadow: 0 0 5px var(--neon-blue);
}

.quiz-feedback { /* Position feedback absolutely to the right */
   position: absolute;
   right: -30px; /* Adjust as needed */
   top: 50%;
   transform: translateY(-50%);
   font-size: 1.5rem; /* Larger feedback icon */
   width: 25px; /* Fixed width for alignment */
   text-align: center;
   /* Remove margin-left if it existed */
}

.quiz-feedback.correct {
    color: var(--neon-green);
}

.quiz-feedback.incorrect {
    color: var(--neon-red);
}

.quiz-correct-answer { /* Style for answer below input */
   display: block; /* Make it take its own line */
   width: calc(100% - 35px); /* Match input width approx (adjust as needed) */
   margin-top: 5px; /* Space below input */
   margin-left: 0; /* Remove left margin */
   font-size: 0.9rem;
   color: var(--neon-green);
   font-style: italic;
   display: none; /* Hidden by default */
}

.quiz-correct-answer.show {
    display: inline;
}

/* Style for when answers are shown */
.quiz-input.show-answer {
    background-color: rgba(57, 255, 20, 0.1); /* Light green background */
    border-color: var(--neon-green);
}