/*
 * @file styles.css
 * @description Main stylesheet for the BaseFlowArena application. Defines the visual appearance, layout, and responsive behavior for all UI components, including the background, panels, word display, tooltips, modals, beat player, and more. Utilizes CSS variables for theme consistency and supports advanced features such as animations, flexbox/grid layouts, and responsive design. Dependencies include Google Fonts (Orbitron, Roboto) and FontAwesome for icons. This file is critical for the application's modern, interactive, and accessible look and feel.
 */

/* Import Google Fonts - Retro terminal + original fonts */
@import url('https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&family=Share+Tech+Mono&family=Orbitron:wght@400;700&family=Roboto:wght@400;700&display=swap');

/* --- Base & Variables --- */
/* Underground 90s Hip-Hop / CRT Terminal Theme */
:root {
    --bg-color: #0a0a0a; /* Deep black */
    --panel-bg: rgba(10, 15, 10, 0.95); /* Dark with slight green tint */
    --panel-bg-opaque: rgb(10, 15, 10);
    --border-color: rgba(51, 255, 51, 0.3); /* Phosphor green border */
    --primary-accent: #33ff33; /* Terminal green */
    --secondary-accent: #00ffcc; /* Cyan accent */
    --text-color: #33ff33; /* Phosphor green */
    --text-bright: #66ff66; /* Bright phosphor */
    --highlight-color: #ffff00; /* Graffiti yellow */
    --red-color: #ff3333;
    --green-color: #33ff33;
    --disabled-color: #1a3a1a;

    --beat-interval: 0.5s; /* Updated by JS */
    --cycle-duration: 10s; /* Updated by JS */

    --font-main: 'VT323', 'Share Tech Mono', monospace;
    --font-display: 'VT323', monospace; /* Retro terminal font */
    --font-pixel: 'Press Start 2P', monospace; /* For small UI elements */

    /* CRT Effect Variables */
    --scanline-opacity: 0.08;
    --phosphor-glow: 0 0 10px rgba(51, 255, 51, 0.8), 0 0 20px rgba(51, 255, 51, 0.4), 0 0 30px rgba(51, 255, 51, 0.2);
    --crt-curvature: 3px;
}

/* --- Theme Variables --- */
/* Classic Theme - Now Underground 90s CRT */
[data-theme="classic"] {
    --bg-color: #0a0a0a;
    --panel-bg: rgba(10, 15, 10, 0.95);
    --panel-bg-opaque: rgb(10, 15, 10);
    --border-color: rgba(51, 255, 51, 0.3);
    --primary-accent: #33ff33;
    --secondary-accent: #00ffcc;
    --text-color: #33ff33;
    --text-bright: #66ff66;
    --highlight-color: #ffff00;
    --red-color: #ff3333;
    --green-color: #33ff33;
    --disabled-color: #1a3a1a;
    --font-main: 'VT323', 'Share Tech Mono', monospace;
    --font-display: 'VT323', monospace;
    --scanline-opacity: 0.08;
    --phosphor-glow: 0 0 10px rgba(51, 255, 51, 0.8), 0 0 20px rgba(51, 255, 51, 0.4), 0 0 30px rgba(51, 255, 51, 0.2);
}

/* Dark Theme (Amber Phosphor CRT) */
[data-theme="dark"] {
    --bg-color: #0a0808;
    --panel-bg: rgba(15, 10, 8, 0.95);
    --panel-bg-opaque: rgb(15, 10, 8);
    --border-color: rgba(255, 176, 0, 0.3);
    --primary-accent: #ffb000;
    --secondary-accent: #ff6600;
    --text-color: #ffb000;
    --text-bright: #ffcc33;
    --highlight-color: #ff3300;
    --red-color: #ff4444;
    --green-color: #44ff44;
    --disabled-color: #3a2a1a;
    --font-main: 'VT323', 'Share Tech Mono', monospace;
    --font-display: 'VT323', monospace;
    --scanline-opacity: 0.08;
    --phosphor-glow: 0 0 10px rgba(255, 176, 0, 0.8), 0 0 20px rgba(255, 176, 0, 0.4), 0 0 30px rgba(255, 176, 0, 0.2);
}

/* Light Theme (Modern, Minimalist, Engaging) */
[data-theme="light"] {
    --bg-color: #F7FAFC;
    --panel-bg: rgba(255, 255, 255, 0.98);
    --panel-bg-opaque: #FFFFFF;
    --border-color: #E2E8F0;
    --primary-accent: #10B981; /* Emerald/Teal */
    --secondary-accent: #F59E42; /* Orange/Amber */
    --text-color: #22223B;
    --text-bright: #111827;
    --highlight-color: #2563EB; /* Blue for highlights */
    --red-color: #EF4444;
    --green-color: #22C55E;
    --disabled-color: #CBD5E1;
}

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

/* --- Three.js Canvas Background --- */
#bg-canvas {
    position: fixed; /* Fixed position to stay in background */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Send it to the back */
    display: block; /* Avoid potential extra space */
}

/* Remove focus outline on mouse click; preserve for keyboard nav */
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
    outline: none;
    box-shadow: inherit;
}

/* --- Main Layout & Structure --- */
body {
    /* Dark background with subtle green tint */
    background: linear-gradient(to bottom, rgba(5, 10, 5, 0.95), rgba(0, 5, 0, 0.98));
    font-family: var(--font-main);
    font-size: 18px; /* Larger base size for VT323 */
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 8px;
    overflow-x: hidden; /* Prevent horizontal scroll */
    position: relative; /* Needed for z-index context */
    z-index: 1; /* Keep body content above background canvas */
}

/* --- CRT Scanline Overlay --- */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, var(--scanline-opacity)) 0px,
        rgba(0, 0, 0, var(--scanline-opacity)) 1px,
        transparent 1px,
        transparent 3px
    );
    pointer-events: none;
    z-index: 9999;
}

/* --- CRT Vignette Effect --- */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        transparent 60%,
        rgba(0, 0, 0, 0.4) 100%
    );
    pointer-events: none;
    z-index: 9998;
}

/* --- CRT Screen Flicker Animation --- */
@keyframes crt-flicker {
    0% { opacity: 1; }
    92% { opacity: 1; }
    93% { opacity: 0.9; }
    94% { opacity: 1; }
    97% { opacity: 0.95; }
    100% { opacity: 1; }
}

/* Apply subtle flicker to main content */
.main-content-area {
    animation: crt-flicker 8s infinite;
}

/* --- Chromatic Aberration Effect --- */
@keyframes chromatic-shift {
    0%, 100% {
        text-shadow: var(--phosphor-glow);
    }
    25% {
        text-shadow:
            -1px 0 0 rgba(255, 0, 0, 0.4),
            1px 0 0 rgba(0, 255, 255, 0.4),
            var(--phosphor-glow);
    }
    75% {
        text-shadow:
            1px 0 0 rgba(255, 0, 0, 0.3),
            -1px 0 0 rgba(0, 255, 255, 0.3),
            var(--phosphor-glow);
    }
}

/* --- Glitch Effect for Word Transitions --- */
@keyframes text-glitch {
    0% {
        transform: translate(0);
        clip-path: inset(0 0 0 0);
    }
    10% {
        transform: translate(-2px, 1px);
        clip-path: inset(20% 0 60% 0);
    }
    20% {
        transform: translate(2px, -1px);
        clip-path: inset(60% 0 20% 0);
    }
    30% {
        transform: translate(-1px, 2px);
        clip-path: inset(40% 0 40% 0);
    }
    40%, 100% {
        transform: translate(0);
        clip-path: inset(0 0 0 0);
    }
}

.glitch-active {
    animation: text-glitch 0.3s ease-out;
}

/* --- Graffiti Drip Effect --- */
@keyframes paint-drip {
    0% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        transform: scaleY(1);
    }
    50% {
        clip-path: polygon(0 0, 100% 0, 100% 105%, 0 100%);
    }
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        transform: scaleY(1);
    }
}

/* --- Urban Accent Classes --- */
.accent-yellow { color: #ffff00 !important; }
.accent-magenta { color: #ff00ff !important; }
.accent-cyan { color: #00ffcc !important; }
.accent-orange { color: #ff6600 !important; }

/* --- Graffiti Tag Style for Headers --- */
.graffiti-tag {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: relative;
    display: inline-block;
}

.graffiti-tag::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,
        var(--primary-accent) 0%,
        var(--highlight-color) 50%,
        var(--secondary-accent) 100%
    );
    transform: skewX(-15deg);
}

/* --- VHS Noise Overlay (subtle) --- */
@keyframes vhs-noise {
    0%, 100% { background-position: 0 0; }
    10% { background-position: -5% -10%; }
    20% { background-position: -15% 5%; }
    30% { background-position: 7% -25%; }
    40% { background-position: -5% 25%; }
    50% { background-position: -15% 10%; }
    60% { background-position: 15% 0%; }
    70% { background-position: 0% 15%; }
    80% { background-position: 3% 35%; }
    90% { background-position: -10% 10%; }
}

/* --- Retro Border Style --- */
.retro-border {
    border: 2px solid var(--primary-accent);
    box-shadow:
        0 0 5px var(--primary-accent),
        inset 0 0 5px rgba(51, 255, 51, 0.1);
}

/* --- Spray Paint Glow on Hover --- */
.spray-glow:hover {
    text-shadow:
        0 0 10px var(--highlight-color),
        0 0 20px var(--highlight-color),
        0 0 30px var(--highlight-color),
        0 0 40px var(--highlight-color);
    transition: text-shadow 0.2s ease;
}

.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: var(--panel-bg);
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0, 255, 255, 0.1);
    position: relative;
    z-index: 10;
}

.game-header h1 {
    margin: 0;
    font-size: 1.8em;
    font-family: var(--font-display);
    color: var(--primary-accent);
    text-shadow: 0 0 5px var(--primary-accent);
}

/* --- Theme Controls Styling --- */
.theme-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.theme-button {
    background: var(--panel-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.theme-button:hover {
    background: rgba(0, 0, 0, 0.2);
    border-color: var(--primary-accent);
    color: var(--primary-accent);
}

.theme-button.active {
    background: var(--primary-accent);
    color: var(--panel-bg-opaque);
    border-color: var(--primary-accent);
}

.randomize-container {
    position: relative;
}

.randomize-btn {
    background: var(--secondary-accent);
    color: var(--text-bright);
    border-color: var(--secondary-accent);
}

.randomize-btn:hover {
    background: rgba(255, 0, 255, 0.8);
    border-color: var(--secondary-accent);
    color: var(--text-bright);
}

.randomize-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--panel-bg-opaque);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    min-width: 280px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: none;
    margin-top: 5px;
}

.randomize-dropdown.show {
    display: block;
}

.randomize-dropdown h4 {
    margin: 0 0 15px 0;
    color: var(--primary-accent);
    font-size: 1em;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

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

.color-option {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.color-option:hover {
    background: rgba(0, 0, 0, 0.1);
}

.color-option input[type="checkbox"] {
    margin: 0;
}

.color-preview {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    display: inline-block;
}

.randomize-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.randomize-actions .theme-button {
    flex: 1;
    justify-content: center;
}

.copy-btn {
    background: var(--highlight-color);
    color: var(--text-bright);
    border-color: var(--highlight-color);
}

.copy-btn:hover {
    background: rgba(249, 168, 38, 0.8);
    border-color: var(--highlight-color);
    color: var(--text-bright);
}

.stats-display {
    display: flex;
    gap: 30px;
}

.stat-item {
    text-align: right;
}

.stat-label {
    display: block;
    font-size: 0.8em;
    color: var(--text-color);
    opacity: 0.7;
}

.stat-value {
    font-family: var(--font-display);
    font-size: 1.6em;
    color: var(--highlight-color);
    font-weight: bold;
    transition: transform 0.3s ease-out, color 0.3s ease-out; /* For pulse */
}

/* Gamification Pulse Animations */
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.pulse { animation: pulse 0.3s ease-out; }

@keyframes pulse-grow { 0%, 100% { transform: scale(1); color: var(--highlight-color); } 50% { transform: scale(1.25); color: var(--green-color); } }
.pulse-grow { animation: pulse-grow 0.4s ease-out; }


/* --- Main Game Area --- */
.game-arena {
    display: flex;
    flex-grow: 1; /* Takes remaining height */
    gap: 10px;
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.control-panel {
    flex: 0 0 240px; /* Fixed width for side panels */
    background-color: var(--panel-bg);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 15px; /* Spacing between control groups/panels inside */
    height: fit-content; /* Adjust height based on content */
}

.center-stage {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.panel { /* General styling for inner panels (like transcript, bpm, frequency, rng) */
    background-color: rgba(0, 0, 0, 0.3); /* Darker inner panel */
    padding: 15px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    width: 100%; /* Make inner panels take full width of their container */
}
.panel h3 { /* Headers inside panels */
    font-size: 1.1em;
    margin-bottom: 10px;
    color: var(--secondary-accent);
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 5px;
}


h2 { /* Headers for main panels/sections */
    font-family: var(--font-display);
    color: var(--primary-accent);
    margin-bottom: 10px; /* Reduced bottom margin */
    text-shadow: 0 0 5px var(--primary-accent);
    font-size: 1.3em;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}
h2 .fas { color: var(--secondary-accent); }

/* --- Buttons & Controls --- */
button, select, input[type="number"], input[type="range"] {
    font-family: var(--font-main);
    padding: 8px 12px;
    border-radius: 5px;
    border: 1px solid var(--primary-accent);
    background-color: transparent;
    color: var(--primary-accent);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
    font-size: 0.9em;
    vertical-align: middle; /* Align controls nicely */
}

button:hover, select:hover {
    background-color: rgba(0, 255, 255, 0.1);
    box-shadow: 0 0 8px var(--primary-accent);
    color: var(--text-bright);
}

button:active {
    transform: scale(0.96);
    background-color: rgba(0, 255, 255, 0.2);
}
button:disabled, select:disabled, input:disabled {
    border-color: var(--disabled-color);
    color: var(--disabled-color);
    cursor: not-allowed;
    background-color: transparent;
    box-shadow: none;
    opacity: 0.6;
}
button:disabled:hover {
    background-color: transparent;
    box-shadow: none;
}

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5'%3E%3Cpath fill='%2300ffff' d='M0 0l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}
select:disabled {
    border-color: var(--disabled-color);
    color: var(--disabled-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5'%3E%3Cpath fill='%236c757d' d='M0 0l5 5 5-5z'/%3E%3C/svg%3E");
}


input[type="number"] {
    max-width: 60px;
    text-align: center;
    border-color: var(--text-color);
    color: var(--text-color);
    background-color: rgba(0,0,0,0.2);
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* Syllable filter specific styling */
#min-syllables, #max-syllables {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    text-align: center;
    font-size: 0.9em;
    padding: 6px 8px;
}

input[type="range"] {
    cursor: pointer;
    accent-color: var(--primary-accent); /* Style the slider */
    margin: 0 10px;
    flex-grow: 1;
    padding: 0; /* Remove padding for range */
    border: none; /* Remove border for range */
    background: transparent; /* Remove background for range */
}

.icon-button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; }
.icon-button .fas, .icon-button .far { font-size: 1.1em; min-width: 1.1em; text-align: center; } /* Ensure icon takes space */
.icon-button .btn-text { display: inline; }
.small-button { padding: 5px 8px; font-size: 0.8em;}
.tiny-button { padding: 3px 6px; font-size: 0.7em;}
.large-button { padding: 12px 18px; font-size: 1.1em;}

.red-button { border-color: var(--red-color); color: var(--red-color); }
.red-button:hover { background-color: rgba(255, 69, 0, 0.1); box-shadow: 0 0 8px var(--red-color); }


.control-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.control-group label { font-weight: bold; color: var(--secondary-accent); display: inline-flex; align-items: center; gap: 5px; min-width: 50px;} /* Ensure label takes some width */

/* --- Center Stage Styling --- */
.word-display-wrapper {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin-bottom: 10px;
}

#feedback-message {
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    height: 14px;
    line-height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    pointer-events: none;
}
#feedback-message.success {
    color: var(--green-color);
    text-shadow: 0 0 8px var(--green-color);
    background-color: rgba(0, 255, 0, 0.1);
}
#feedback-message.error {
    color: var(--red-color);
    text-shadow: 0 0 8px var(--red-color);
     background-color: rgba(255, 69, 0, 0.1);
}

/* --- NEW WORD DISPLAY UNIT (Three-Cell Layout) --- */
#word-display-unit {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 30px 60px 1fr 60px 22px 30px;
    grid-template-areas:
        ". up ."
        ". synonyms ."
        "left word right"
        ". definition ."
        ". toggle ."
        ". down .";
    position: relative;
    background: linear-gradient(145deg, var(--panel-bg), rgba(42, 42, 74, 0.9));
    border: 2px solid var(--primary-accent);
    border-radius: 10px;
    padding: 0 60px;
    margin-bottom: 0;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3), inset 0 0 15px rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 1000px;
    min-height: 400px;
    box-sizing: border-box;
}

/* Grid placement for navigation arrows */
.word-nav-arrow {
    background: transparent;
    border: none;
    color: var(--primary-accent);
    padding: 10px;
    cursor: pointer;
    font-size: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, transform 0.2s;
}

.word-nav-arrow:disabled {
    color: var(--disabled-color);
    cursor: not-allowed;
    opacity: 0.4;
    transform: none;
}

.word-nav-arrow:disabled:hover {
    color: var(--disabled-color);
    transform: none;
}

.word-nav-arrow.side-arrow.left-arrow {
    grid-area: left;
    font-size: 2.5em;
    justify-self: center;
    align-self: center;
}
.word-nav-arrow.side-arrow.right-arrow {
    grid-area: right;
    font-size: 2.5em;
    justify-self: center;
    align-self: center;
}
.word-nav-arrow.top-bottom-arrow.up-arrow {
    grid-area: up;
    font-size: 1.7em;
    min-width: 36px;
    min-height: 28px;
    max-width: 40px;
    max-height: 32px;
    justify-self: center;
    align-self: start;
    margin-top: -4px;
}
.word-nav-arrow.top-bottom-arrow.down-arrow {
    grid-area: down;
    font-size: 1.7em;
    min-width: 36px;
    min-height: 28px;
    max-width: 40px;
    max-height: 32px;
    justify-self: center;
    align-self: end;
    margin-bottom: -2px;
}

.word-nav-arrow.top-bottom-arrow.rhyme-sort-toggle {
    grid-area: toggle;
    font-size: 1.05em;
    padding: 0 3px;
    min-width: 24px;
    min-height: 20px;
    max-width: 28px;
    max-height: 24px;
    justify-self: center;
    align-self: end;
    color: var(--secondary-accent);
    background: none;
    border: none;
    border-radius: 6px;
    margin-bottom: 0;
    margin-top: -2px;
    transition: color 0.18s, transform 0.18s, box-shadow 0.18s;
}

.word-nav-arrow.top-bottom-arrow.rhyme-sort-toggle:hover {
    color: var(--highlight-color);
    background: rgba(0,255,255,0.07);
    transform: scale(1.10);
    box-shadow: 0 0 3px var(--highlight-color);
}

.word-nav-arrow:hover {
    animation: chevron-pulse 0.4s cubic-bezier(.4,2,.6,1);
}

@keyframes chevron-pulse {
    0% { transform: scale(1); color: var(--primary-accent); }
    50% { transform: scale(1.25); color: var(--highlight-color); }
    100% { transform: scale(1); color: var(--primary-accent); }
}

/* Grid placement for content cells */
.word-display-cell.top-cell {
    grid-area: synonyms;
    min-height: 44px;
    padding: 0.5em 1em;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    display: flex;
    align-items: center;
    justify-content: center;
}
.word-display-cell.middle-cell {
    grid-area: word;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 255, 255, 0.5);
    border-radius: 12px;
    position: relative;
}

/* Search buttons row at bottom left of middle cell */
.search-buttons-row {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

/* Override absolute positioning for search buttons in the row */
.search-buttons-row .word-action-icon,
.search-buttons-row .word-action-icon.search-icon,
.search-buttons-row .word-action-icon.reverse-search-icon {
    position: static !important;
    transform: none !important;
    opacity: 1;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
}

.search-buttons-row .word-action-icon:hover {
    transform: scale(1.1);
    background-color: rgba(255, 255, 255, 0.1);
}

/* Position rhyme button in the same row as search buttons */
#find-rhymes-button {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    font-size: 13px;
    font-family: Verdana, sans-serif;
    color: rgb(111, 251, 179);
    background-color: rgb(0, 0, 0);
}

/* Hide rhymes button during search modes */
.word-display-cell.middle-cell.search-mode #find-rhymes-button,
.word-display-cell.middle-cell.reverse-search-mode #find-rhymes-button {
    display: none;
}

.word-display-cell.bottom-cell {
    grid-area: definition;
    min-height: 44px;
    padding: 0.5em 1em;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Animation stage for clean room animation context */
#animation-stage {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Two-slot animation system */
.word-slot {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease-in-out;
    font-family: var(--font-display);
    font-weight: bold;
    color: var(--text-bright);
    text-shadow: 0 0 10px #fff, 0 0 15px var(--primary-accent);
}

/* Initial state for the 'next' slot, ready to slide in from the right */
#word-slot-next {
    transform: translateX(100%);
}

/* Animation trigger classes */
#animation-stage.is-sliding-left #word-slot-current {
    transform: translateX(-100%);
}
#animation-stage.is-sliding-left #word-slot-next {
    transform: translateX(0);
}

#animation-stage.is-sliding-right #word-slot-current {
    transform: translateX(100%);
}
#animation-stage.is-sliding-right #word-slot-next {
    transform: translateX(0);
}

#animation-stage.is-sliding-up #word-slot-current {
    transform: translateY(-100%);
}
#animation-stage.is-sliding-up #word-slot-next {
    transform: translateY(0);
}

#animation-stage.is-sliding-down #word-slot-current {
    transform: translateY(100%);
}
#animation-stage.is-sliding-down #word-slot-next {
    transform: translateY(0);
}

/* Remove obsolete 3D, absolute, and z-index styles from arrows/content */
.word-content-container,
#word-display-unit {
    perspective: none !important;
    transform-style: flat !important;
    z-index: auto !important;
}

/* Updated word display styles for the middle cell */
#word-display {
    font-family: 'Roboto', var(--font-display);
    font-size: 28px;
    font-weight: bold;
    color: rgb(234, 197, 118);
    text-shadow: var(--phosphor-glow);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.4s ease-out, opacity 0.4s ease-out, transform 0.4s ease-out, font-size 0.2s ease-out;
    animation: chromatic-shift 4s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    line-height: 1;
    margin: 0;
    padding: 0;
    text-align: center;
    word-break: break-word;
    overflow-wrap: break-word;
    /* Ensure text fits within cell bounds */
    max-width: 100%;
    max-height: 100%;
    /* Ensure proper positioning relative to action buttons */
    position: relative;
    z-index: 1;
}

#word-display.shrink-word { animation: shrink-pulse var(--cycle-duration, 10s) linear forwards; }
@keyframes shrink-pulse {
    0% { opacity: 1; transform: scale(1); color: var(--text-bright); }
    85% { opacity: 0.8; transform: scale(0.8); color: var(--text-bright); }
    100% { opacity: 0; transform: scale(0.7); color: var(--green-color); }
}

/* Split-flap display animation - letters flip in from direction based on navigation */
#word-display .flip-letter {
    display: inline-block;
    opacity: 0;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 0.05em 0.08em;
    margin: 0 1px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Direction classes - all letters same direction */
#word-display.flip-from-top .flip-letter {
    transform: translateY(-120%);
    filter: blur(4px);
    animation: flip-from-top 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

#word-display.flip-from-bottom .flip-letter {
    transform: translateY(120%);
    filter: blur(4px);
    animation: flip-from-bottom 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes flip-from-top {
    0% { opacity: 0; transform: translateY(-120%); filter: blur(4px); }
    40% { opacity: 1; filter: blur(2px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes flip-from-bottom {
    0% { opacity: 0; transform: translateY(120%); filter: blur(4px); }
    40% { opacity: 1; filter: blur(2px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Stagger delays for each letter position */
#word-display .flip-letter:nth-child(1) { animation-delay: 0ms; }
#word-display .flip-letter:nth-child(2) { animation-delay: 20ms; }
#word-display .flip-letter:nth-child(3) { animation-delay: 40ms; }
#word-display .flip-letter:nth-child(4) { animation-delay: 60ms; }
#word-display .flip-letter:nth-child(5) { animation-delay: 80ms; }
#word-display .flip-letter:nth-child(6) { animation-delay: 100ms; }
#word-display .flip-letter:nth-child(7) { animation-delay: 120ms; }
#word-display .flip-letter:nth-child(8) { animation-delay: 140ms; }
#word-display .flip-letter:nth-child(9) { animation-delay: 160ms; }
#word-display .flip-letter:nth-child(10) { animation-delay: 180ms; }
#word-display .flip-letter:nth-child(11) { animation-delay: 200ms; }
#word-display .flip-letter:nth-child(12) { animation-delay: 220ms; }
#word-display .flip-letter:nth-child(13) { animation-delay: 240ms; }
#word-display .flip-letter:nth-child(14) { animation-delay: 260ms; }
#word-display .flip-letter:nth-child(15) { animation-delay: 280ms; }

/* Voice-match dissolve exit — mirrors flip entrance but in reverse */
#word-display.dissolve-exit .flip-letter {
    animation: dissolve-char 0.35s ease-out forwards;
}
@keyframes dissolve-char {
    0%   { opacity: 1; transform: translateY(0); filter: blur(0); }
    60%  { opacity: 0.3; filter: blur(2px); }
    100% { opacity: 0; transform: translateY(40%) scale(0.7); filter: blur(4px); }
}

/* Search suggestion flip animation with segment borders */
.suggestion-item .flip-letter {
    display: inline-block;
    opacity: 0;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    padding: 0.02em 0.05em;
    margin: 0 0.5px;
}

.suggestion-item.selected.flip-from-top .flip-letter {
    transform: translateY(-100%);
    filter: blur(3px);
    animation: flip-from-top-fast 140ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.suggestion-item.selected.flip-from-bottom .flip-letter {
    transform: translateY(100%);
    filter: blur(3px);
    animation: flip-from-bottom-fast 140ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes flip-from-top-fast {
    0% { opacity: 0; transform: translateY(-100%); filter: blur(3px); }
    50% { opacity: 1; filter: blur(1px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes flip-from-bottom-fast {
    0% { opacity: 0; transform: translateY(100%); filter: blur(3px); }
    50% { opacity: 1; filter: blur(1px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Stagger for search suggestions */
.suggestion-item .flip-letter:nth-child(1) { animation-delay: 0ms; }
.suggestion-item .flip-letter:nth-child(2) { animation-delay: 15ms; }
.suggestion-item .flip-letter:nth-child(3) { animation-delay: 30ms; }
.suggestion-item .flip-letter:nth-child(4) { animation-delay: 45ms; }
.suggestion-item .flip-letter:nth-child(5) { animation-delay: 60ms; }
.suggestion-item .flip-letter:nth-child(6) { animation-delay: 75ms; }
.suggestion-item .flip-letter:nth-child(7) { animation-delay: 90ms; }
.suggestion-item .flip-letter:nth-child(8) { animation-delay: 105ms; }
.suggestion-item .flip-letter:nth-child(9) { animation-delay: 120ms; }
.suggestion-item .flip-letter:nth-child(10) { animation-delay: 135ms; }

/* Invisible selectable overlay — lets user highlight/right-click the full word */
.word-select-overlay {
    position: absolute;
    inset: 0;
    color: transparent !important;
    text-shadow: none !important;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    cursor: text;
    -webkit-user-select: text;
    user-select: text;
}
/* Prevent selecting the decorative letter spans underneath */
#word-display .flip-letter {
    -webkit-user-select: none;
    user-select: none;
}

/* Fallback for non-animated display */
#word-display.no-animate {
    opacity: 1 !important;
}

/* Updated word info content styles for top and bottom cells */
.word-info-content {
    width: 100%;
    text-align: center;
    color: var(--primary-accent);
    background: rgba(0,0,0,0.25);
    border: 1.5px solid var(--primary-accent);
    border-radius: 7px;
    font-family: var(--font-main);
    font-weight: 500;
    letter-spacing: 0.01em;
    margin: 0;
    opacity: 0;
    filter: blur(6px);
    transition: opacity 0.7s cubic-bezier(.4,2,.6,1), filter 0.7s cubic-bezier(.4,2,.6,1);
    padding: 7px 18px;
    box-shadow: 0 0 12px 0 rgba(0,255,255,0.13);
    pointer-events: auto;
    user-select: text;
    overflow-wrap: break-word;
    white-space: pre-line;
    /* Dynamic font sizing to prevent overflow */
    font-size: clamp(0.8em, 2vw, 1.2em);
    line-height: 1.3;
    max-height: 100%;
    overflow: hidden;
    z-index: 2; /* Above cells but below navigation arrows */
}

.word-info-content.visible {
    opacity: 1;
    filter: blur(0);
    z-index: 2;
}

/* Specific styles for synonyms content */
#synonyms-content {
    font-size: clamp(0.9em, 2.5vw, 1.1em);
    line-height: 1.4;
    max-height: 100%;
    overflow: hidden;
    display: block;
    word-break: break-word;
}

/* Specific styles for definition content */
#definition-content {
    display: block;
    /* Remove nowrap to allow text wrapping */
    white-space: normal;
    overflow: hidden;
    /* Remove text-overflow ellipsis since we're allowing wrapping */
    font-size: clamp(0.9em, 2.5vw, 1.1em);
    transition: font-size 0.3s cubic-bezier(.4,2,.6,1);
    max-height: 100%;
    /* Allow text to wrap to second line */
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* Ensure text doesn't overflow the cell */
    max-width: 100%;
}

#definition-content.shrink {
    font-size: 0.8em;
}

/* Beat Player Panel Styles */
#beat-player-panel {
    margin-bottom: 15px;
}

.beat-display {
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--primary-accent);
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 12px;
    text-align: center;
    color: var(--primary-accent);
    font-size: 0.9em;
    font-weight: 500;
    min-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    word-break: break-word;
    line-height: 1.3;
}

.beat-controls {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    justify-content: center;
}

.beat-controls .large-button {
    flex: 1;
    max-width: 120px;
}

.beat-navigation {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    justify-content: center;
}

.beat-navigation .small-button {
    flex: 1;
    max-width: 60px;
}

.beat-volume-control {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.beat-volume-control label {
    font-size: 0.9em;
    min-width: 70px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.volume-slider {
    flex: 1;
    height: 6px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--primary-accent);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
    transition: box-shadow 0.2s ease;
}

.volume-slider::-webkit-slider-thumb:hover {
    box-shadow: 0 0 12px var(--primary-accent);
}

.volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--primary-accent);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
    transition: box-shadow 0.2s ease;
}

.volume-slider::-moz-range-thumb:hover {
    box-shadow: 0 0 12px var(--primary-accent);
}

/* Responsive adjustments for beat player */
@media (max-width: 768px) {
    .beat-display {
        font-size: 0.85em;
        padding: 6px 10px;
    }
    
    .beat-controls .large-button {
        max-width: 100px;
        font-size: 1em;
    }
    
    .beat-navigation .small-button {
        max-width: 50px;
    }
    
    .beat-volume-control label {
        min-width: 60px;
        font-size: 0.85em;
    }
}

@media (max-width: 480px) {
    .beat-display {
        font-size: 0.8em;
        padding: 5px 8px;
    }
    
    .beat-controls {
        gap: 6px;
    }
    
    .beat-controls .large-button {
        max-width: 90px;
        font-size: 0.9em;
        padding: 8px 12px;
    }
    
    .beat-navigation {
        gap: 6px;
    }
    
    .beat-navigation .small-button {
        max-width: 45px;
        font-size: 0.8em;
    }
    
    .beat-volume-control {
        gap: 6px;
    }
    
    .beat-volume-control label {
        min-width: 55px;
        font-size: 0.8em;
    }
    
    .volume-slider {
        height: 5px;
    }
    
    .volume-slider::-webkit-slider-thumb {
        width: 14px;
        height: 14px;
    }
    
    .volume-slider::-moz-range-thumb {
        width: 14px;
        height: 14px;
    }
}

/* Word Action Icons - Repositioned for new three-cell layout */
.word-action-icon {
    position: absolute;
    background: none;
    border: none;
    font-size: 1.4em;
    cursor: pointer;
    color: #666;
    padding: 5px;
    transition: color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    opacity: 0.6;
    z-index: 5;
}

.word-action-icon:hover { 
    opacity: 1; 
    transform: scale(1.1); 
}

/* Override general hover rule for means-like icon to respect pinned state */
.word-action-icon.means-like-icon.pinned {
    color: var(--highlight-color) !important;
    opacity: 1 !important;
    animation: none;
    box-shadow: 0 0 8px var(--highlight-color);
    border-radius: 50%;
    background-color: rgba(249, 168, 38, 0.1);
}

.word-action-icon.means-like-icon.pinned:hover {
    color: var(--highlight-color) !important;
    opacity: 1 !important;
    transform: scale(1.1);
    box-shadow: 0 0 12px var(--highlight-color);
    animation: shimmer 1.5s ease-in-out infinite;
}

/* Blacklist icon - upper-left corner of middle cell */
.word-action-icon.blacklist-icon { 
    top: 8px;
    left: 8px;
    transform: none;
}

.word-action-icon.blacklist-icon:hover {
    transform: scale(1.1);
 }

/* Favorite icon - upper-right corner of middle cell */
.word-action-icon.favorite-icon { 
    top: 8px;
    right: 8px;
    transform: none;
}

.word-action-icon.favorite-icon:hover {
    transform: scale(1.1);
}

/* Definition/Synonym icon - bottom-center of middle cell */
.word-action-icon.means-like-icon {
    position: absolute;
    bottom: 8px;
    right: 8px;
    left: auto;
    transform: none;
    z-index: 20;
    transition: color 0.2s, transform 0.2s;
}

.word-action-icon.means-like-icon:hover {
    transform: none;
}

/* Unpinned tooltip state - starts dim */
.word-action-icon.means-like-icon:not(.pinned) {
    color: var(--secondary-accent);
    opacity: 0.7;
}

.word-action-icon.means-like-icon:not(.pinned):hover {
    color: var(--primary-accent);
    opacity: 1;
    animation: pulse-grow-book 0.35s cubic-bezier(.4,2,.6,1), shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { 
        opacity: 0.6; 
        color: var(--text-color); 
    }
    50% {
        opacity: 0.8; 
        color: var(--highlight-color); 
    }
}

.word-action-icon.means-like-icon:not(.pinned) i.fa-book {
    animation: pulse-grow-book 2s ease-in-out infinite;
}

.word-action-icon.means-like-icon.pinned i.fa-book-open {
    animation: none;
}

.word-action-icon.means-like-icon.pinned i.fa-random {
    animation: none;
}

.word-action-icon.means-like-icon.pinned i.fa-paragraph {
    animation: none;
}

@keyframes pulse-grow-book {
    0% { transform: scale(1); }
    40% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

/* Word Subtext */
.word-subtext {
    position: absolute;
    bottom: 25px; /* Position above the means-like icon */
    left: 50%;
    transform: translateX(-50%);
    color: var(--secondary-accent);
    font-size: 0.9em;
    font-style: italic;
    text-align: center;
    max-width: 80%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 5;
}

.word-subtext.visible {
    opacity: 1;
}

/* Active states for action icons */
.word-action-icon.blacklist-icon.active { 
    color: var(--red-color); 
    opacity: 1; 
}

.word-action-icon.favorite-icon .far { 
    display: inline; 
}

.word-action-icon.favorite-icon .solid-star { 
    display: none; 
}

.word-action-icon.favorite-icon.active { 
    color: var(--highlight-color); 
    opacity: 1; 
}

.word-action-icon.favorite-icon.active .far { 
    display: none; 
}

.word-action-icon.favorite-icon.active .solid-star { 
    display: inline; 
}

/* Responsive adjustments for the new word display unit */
@media (max-width: 1200px) {
    .game-arena { 
        flex-direction: column; 
    }
    
    .control-panel { 
        flex: 0 0 auto; 
        width: 100%; 
        flex-direction: row; 
        flex-wrap: wrap; 
        justify-content: space-around; 
    }
    
    .panel-left { 
        order: 2; 
    }
    
    .panel-right { 
        order: 3; 
    }
    
    .center-stage { 
        order: 1; 
        width: 100%; 
    }
    
    .word-nav-arrow.side-arrow { 
        font-size: 2em; 
    }
    
    .word-display-wrapper {
        max-width: 600px;
    }
    
    #feedback-message {
        font-size: 1em;
        padding: 4px 12px;
    }
    
    #word-display-unit {
        height: 350px;
        padding: 0 60px;
    }

    .word-display-cell.middle-cell {
        min-height: 120px;
    }
}

@media (max-width: 768px) {
    body { 
        padding: 10px; 
    }
    
    .game-header {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        padding: 10px;
    }

    .theme-controls {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    
    .theme-button {
        font-size: 0.8em;
        padding: 6px 10px;
    }
    
    .randomize-dropdown {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        right: auto;
        min-width: 90vw;
        max-width: 320px;
    }
    
    .stats-display { 
        justify-content: center; 
        gap: 20px; 
    }
    
    .stat-value { 
        font-size: 1.4em; 
    }
    
    h1 { 
        font-size: 1.5em; 
    }
    
    .word-display-wrapper {
        max-width: 500px;
    }
    
    #feedback-message {
        font-size: 0.9em;
        padding: 3px 10px;
    }
    
    #word-display-unit {
        padding: 0 60px;
        height: 300px;
        max-width: 600px;
    }

    .word-display-cell.middle-cell {
        min-height: 100px;
    }
    
    .icon-button .btn-text { 
        display: none; 
    }
    
    .icon-button { 
        padding: 8px; 
    }
    
    .activation-button .btn-text,
    .large-button .btn-text { 
        display: inline; 
    }
    
    .large-button { 
        padding: 12px; 
        font-size: 1em;
    }
    
    .control-panel { 
        padding: 10px; 
    }
    
    .control-group { 
        justify-content: center; 
    }
    
    #rng-display-area { 
        margin-top: 10px; 
    }
    
    .rng-slot { 
        font-size: 1.5em; 
        width: 2em; 
        height: 1.7em; 
        line-height: 1.6em; 
    }
    
    #rhyme-results-list li {
        font-size: 0.9em;
        padding: 8px 10px;
    }
    
    .word {
        font-size: 2.5rem;
        line-height: 1.2;
    }
    
    .synonyms, .definition {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    h1 { 
        font-size: 1.3em;
    }
    
    .stat-value { 
        font-size: 1.2em; 
    }
    
    .word-display-wrapper {
        max-width: 400px;
    }
    
    #feedback-message {
        font-size: 0.8em;
        padding: 2px 8px;
    }
    
    #word-display-unit {
        height: 250px;
        padding: 0 40px;
    }

    .word-display-cell.middle-cell {
        min-height: 80px;
    }
    
    .word-nav-arrow.side-arrow { 
        font-size: 1.5em; 
        left: 5px; 
        right: 5px; 
    }
    
    .word-action-icon { 
        font-size: 1.2em; 
    }
    
    .word-action-icon.blacklist-icon { 
        left: 2px; 
    }
    
    .word-action-icon.favorite-icon { 
        right: 2px; 
    }
    
    .bpm-display-group { 
        flex-direction: column; 
        gap: 5px; 
    }
    
    #bpm-display { 
        font-size: 2em; 
    }
    
    .bpm-main-controls .large-button { 
        font-size: 1em; 
        padding: 10px 15px;
    }
    
    #new-transcript { 
        font-size: 0.85em; 
    }
    
    .control-group label { 
        min-width: auto; 
    }
    
    .activation-button { 
        font-size: 1em; 
        padding: 10px; 
        flex-basis: 48%; 
    }
    
    #timed-cycle-options { 
        flex-wrap: wrap; 
        justify-content: center; 
    }
    
    #rng-display-area { 
        margin-top: 10px; 
    }
    
    .rng-slot { 
        font-size: 1.3em; 
        width: 1.8em; 
        height: 1.6em; 
        line-height: 1.5em; 
    }
    
    #rhyme-results-list li {
        font-size: 0.85em;
        padding: 6px 8px;
    }
}

/* Activation Controls */
.activation-controls {
    margin-top: 10px;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    width: 100%;
    max-width: 1000px;
}

.activation-controls h2 {
    margin-bottom: 15px;
    font-size: 1.2em;
}

.activation-buttons {
    justify-content: space-around;
    margin-bottom: 15px;
}

/* Activation Panel Layout */
.activation-panel {
    margin-bottom: 0;
}

.activation-buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: flex-start;
}

/* Slider container takes full width to appear below buttons */
.timed-cycle-slider-container {
    width: 100%;
    display: none; /* Hidden by default to prevent FOUC */
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    margin-top: 5px;
}

.timed-cycle-slider-container label {
    color: var(--secondary-accent);
    font-size: 1.2em;
}

.timed-cycle-slider-container input[type="range"] {
    flex: 1;
    max-width: 200px;
}

.timed-cycle-slider-container input[type="number"] {
    width: 60px;
    text-align: center;
}

.activation-button {
    flex-basis: 45%;
    justify-content: center;
    border-width: 2px;
    background-color: #333;
    color: #999;
    border-color: #555;
    position: relative;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.activation-button .light {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #555;
    border-radius: 50%;
    margin-right: 8px;
    transition: all 0.3s ease;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);
    vertical-align: middle;
}

 .activation-button i {
     margin-right: 8px;
 }

.activation-button.active {
    background-color: var(--primary-accent);
    color: var(--panel-bg-opaque);
    border-color: var(--primary-accent);
    box-shadow: 0 0 12px var(--primary-accent);
    font-weight: bold;
}

.activation-button#voice-mode-button.active {
    background-color: var(--red-color);
    border-color: var(--red-color);
    color: #fff;
    box-shadow: 0 0 15px var(--red-color);
    animation: pulse-on-air-glow 1.5s infinite ease-in-out;
}

.activation-button#voice-mode-button.active .light {
    background-color: #fff;
    box-shadow: 0 0 8px #fff, 0 0 12px var(--red-color);
}

@keyframes pulse-on-air-glow {
    0% { box-shadow: 0 0 10px var(--red-color); }
    50% { box-shadow: 0 0 20px var(--red-color); }
    100% { box-shadow: 0 0 10px var(--red-color); }
}

/* Activation Panel Button Styles (same as activation-button) */
.activation-panel-button {
    flex: 0 0 auto;
    min-width: 160px;
    padding: 12px 20px;
    justify-content: center;
    border-width: 2px;
    background-color: #333;
    color: #999;
    border-color: #555;
    position: relative;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.activation-panel-button .light {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #555;
    border-radius: 50%;
    margin-right: 8px;
    transition: all 0.3s ease;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);
    vertical-align: middle;
}

.activation-panel-button i {
    margin-right: 8px;
}

.activation-panel-button.active {
    background-color: var(--primary-accent) !important;
    color: var(--panel-bg-opaque) !important;
    border-color: var(--primary-accent) !important;
    box-shadow: 0 0 12px var(--primary-accent), inset 0 3px 8px rgba(0, 0, 0, 0.4) !important;
    font-weight: bold !important;
    transform: translateY(2px) !important;
}

.activation-panel-button#voice-mode-button.active {
    background-color: var(--red-color) !important;
    border-color: var(--red-color) !important;
    color: #fff !important;
    box-shadow: 0 0 15px var(--red-color), inset 0 3px 8px rgba(0, 0, 0, 0.4) !important;
    animation: pulse-on-air-glow 1.5s infinite ease-in-out !important;
    transform: translateY(2px) !important;
}

.activation-panel-button#voice-mode-button.active .light {
    background-color: var(--green-color) !important;
    box-shadow: 0 0 8px var(--green-color), 0 0 12px var(--green-color) !important;
}

#timed-cycle-options {
    align-items: center;
    background-color: rgba(0,0,0,0.2);
    padding: 10px;
    border-radius: 4px;
}

#timed-cycle-options label {
    color: var(--secondary-accent);
    min-width: auto;
    margin-right: 5px;
    font-weight: normal;
}

/* Transcript Area */
.transcript-area {
    width: 100%;
    max-width: 1000px;
    height: 350px;
    display: flex;
    flex-direction: column;
    padding: 6px 10px 4px;
}

.transcript-area h2 {
    margin-bottom: 5px;
}

/* Ticker inline in Live Feed h2 */
.transcript-area .led-ticker-wrap {
    flex: 1;
    height: 24px;
    margin-bottom: 0;
    border-radius: 3px;
}
.transcript-area .led-ticker-wrap .ticker-belt {
    font-size: 22px;
    font-family: 'Roboto', sans-serif;
    color: rgb(217, 140, 89);
    background-color: rgb(72, 5, 40);
}

#new-transcript {
    flex-grow: 1;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 5px;
    color: var(--green-color);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95em;
    display: flex;
    flex-direction: column-reverse;
    overflow-y: auto;
    border: 1px solid rgba(0, 80, 0, 0.7);
    box-shadow: inset 0 0 10px rgba(0, 255, 0, 0.2);
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}
#new-transcript::-webkit-scrollbar { width: 6px; }
#new-transcript::-webkit-scrollbar-track { background: transparent; }
#new-transcript::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 3px;
}
#new-transcript::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

#new-transcript div {
    margin-bottom: 3px;
    padding: 2px 4px;
    border-radius: 3px;
    opacity: 1;
    color: var(--green-color);
    transition: opacity 0.3s ease, color 0.3s ease;
    word-wrap: break-word;
}

#new-transcript div.interim {
    color: rgba(0, 255, 0, 0.65);
}

/* Transcript clickable words */
.transcript-word {
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    border-bottom: 1px solid rgba(51, 255, 51, 0.3);
    transition: background 0.15s ease;
}

.transcript-word:hover {
    background: rgba(51, 255, 51, 0.1);
}

.transcript-word.selected {
    background: rgba(51, 255, 51, 0.2);
    border: 1px solid rgba(51, 255, 51, 0.5);
    color: var(--text-bright);
}

/* Filler phrases flagged by the filler ticker — penalty treatment so the user
   can see the habit words they're trying to drop. Red, strikethrough, and a
   subtle red underline/background to make them feel "bad". */
.transcript-word-filler {
    color: var(--red-color, #ff4500);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    background: rgba(255, 69, 0, 0.1);
    border-bottom: 1px solid rgba(255, 69, 0, 0.5);
    text-shadow: 0 0 4px rgba(255, 69, 0, 0.4);
}

.transcript-word-filler:hover {
    background: rgba(255, 69, 0, 0.22);
}

/* Recent Words Tray */
/* Fixed-slot pill tray — flex-wrap, variable-width pills */
#recent-words-tray {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 2px;
    padding: 2px 4px;
    height: 50px;
    min-height: 50px;
    max-height: 50px;
    overflow: hidden;
    border-top: 1px solid rgba(0, 80, 0, 0.4);
    background: rgba(0, 0, 0, 0.3);
}

/* Slot base */
.tray-slot {
    height: 22px;
    line-height: 20px;
    border-radius: 11px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8em;
    box-sizing: border-box;
    user-select: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    padding: 0 6px;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.6s ease;
}

/* Empty placeholder — collapsed, takes no space */
.tray-slot--empty {
    display: none;
}

/* Occupied slot */
.tray-slot--occupied {
    cursor: pointer;
    border: 1px solid rgba(51, 255, 51, 0.3);
    background: rgba(51, 255, 51, 0.05);
    color: var(--green-color);
    justify-content: center;
    text-align: center;
}

.tray-slot--occupied:hover {
    background: rgba(51, 255, 51, 0.15);
    border-color: rgba(51, 255, 51, 0.6);
}
.tray-slot--occupied.selected {
    background: rgba(51, 255, 51, 0.5);
    border-color: rgba(51, 255, 51, 0.9);
    color: #000;
    font-weight: bold;
}

/* Most-recent pill — persistent subtle indicator */
.tray-slot--newest {
    border-color: rgba(255, 255, 255, 0.5);
}

/* Heat flash on new pill — fades from bright to subtle over 2s */
@keyframes pill-heat {
    0%   { box-shadow: 0 0 8px 2px rgba(255, 200, 60, 0.9); border-color: rgba(255, 200, 60, 0.9); }
    40%  { box-shadow: 0 0 5px 1px rgba(255, 200, 60, 0.5); border-color: rgba(255, 200, 60, 0.6); }
    100% { box-shadow: none; border-color: rgba(255, 255, 255, 0.5); }
}
.tray-slot--hot {
    animation: pill-heat 2s ease-out forwards;
}

/* POS color tints */
.pos-noun    { border-color: rgba(100, 180, 255, 0.4); background: rgba(100, 180, 255, 0.08); }
.pos-noun:hover    { border-color: rgba(100, 180, 255, 0.7); background: rgba(100, 180, 255, 0.18); }
.pos-verb    { border-color: rgba(255, 180, 80, 0.4);  background: rgba(255, 180, 80, 0.08); }
.pos-verb:hover    { border-color: rgba(255, 180, 80, 0.7);  background: rgba(255, 180, 80, 0.18); }
.pos-adjective { border-color: rgba(200, 130, 255, 0.4); background: rgba(200, 130, 255, 0.08); }
.pos-adjective:hover { border-color: rgba(200, 130, 255, 0.7); background: rgba(200, 130, 255, 0.18); }
.pos-adverb  { border-color: rgba(80, 220, 200, 0.4);  background: rgba(80, 220, 200, 0.08); }
.pos-adverb:hover  { border-color: rgba(80, 220, 200, 0.7);  background: rgba(80, 220, 200, 0.18); }

/* Newest indicator overrides POS border when hot/newest */
.tray-slot--hot, .tray-slot--newest { border-color: rgba(255, 255, 255, 0.5); }

/* Pill inner elements */
.pill-label {
    pointer-events: none;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.pill-ban {
    margin-left: 3px;
    opacity: 0;
    font-size: 0.8em;
    line-height: 1;
    transition: opacity 0.15s ease;
}
.tray-slot--occupied:hover .pill-ban { opacity: 0.4; }
.pill-ban:hover { opacity: 1 !important; color: #ff4444; }

/* Feed footer */
.feed-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0 8px;
    height: 0;
    overflow: visible;
    position: relative;
}
.feed-clear-btn {
    position: absolute;
    right: 4px;
    bottom: 4px;
    background: none;
    border: none;
    color: rgba(51, 255, 51, 0.3);
    font-size: 0.75em;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    transition: color 0.15s ease;
}
.feed-clear-btn:hover { color: rgba(51, 255, 51, 0.8); }

/* Transcript body layout — transcript + mic meters side by side */
.transcript-body {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 4px;
}

.transcript-body #new-transcript {
    flex: 1;
    min-width: 0;
}

/* Segmented VU-style mic level meters */
.mic-meter {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 8px;
    flex-shrink: 0;
    padding: 4px 0;
}
.mic-meter-seg {
    flex: 1;
    min-height: 2px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.06);
    transition: background 0.06s, box-shadow 0.06s;
}
.mic-meter-seg.lit-green  { background: #33ff33; box-shadow: 0 0 3px #33ff33; }
.mic-meter-seg.lit-yellow { background: #ffdd00; box-shadow: 0 0 3px #ffdd00; }
.mic-meter-seg.lit-red    { background: #ff2222; box-shadow: 0 0 4px #ff2222; }


/* BPM Panel */
.bpm-main-controls {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
    padding: 15px 0;
    min-height: 70px;
}

.bpm-main-controls > #bpm-button,
.bpm-main-controls > #detect-bpm-button {
    opacity: 1;
}

.bpm-main-controls > .bpm-display-group {
    display: flex;
    align-items: center;
    text-align: center;
    opacity: 1;
}

#detect-bpm-button {
    border-color: var(--secondary-accent);
    color: var(--secondary-accent);
}

#detect-bpm-button:hover {
    background-color: rgba(255, 0, 255, 0.1);
    box-shadow: 0 0 8px var(--secondary-accent);
}

#detect-bpm-button.detecting {
    border-color: var(--red-color);
    color: var(--red-color);
    background-color: rgba(255, 69, 0, 0.1);
    box-shadow: 0 0 12px var(--red-color);
    cursor: pointer;
    opacity: 1;
}

#detect-bpm-button.detecting:hover {
    background-color: rgba(255, 69, 0, 0.2);
    box-shadow: 0 0 16px var(--red-color);
}

@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}

#detect-bpm-button.detecting .fa-stop {
    animation: pulse 1s ease-in-out infinite;
}

#bpm-display {
    font-family: var(--font-display);
    font-size: 2.5em;
    color: var(--primary-accent);
    line-height: 1;
}

.bpm-unit {
    display: block;
    font-size: 0.8em;
    opacity: 0.7;
    margin-left: 5px;
}

.bpm-adjust-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

#four-count-container {
    display: grid !important;
    gap: 8px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4));
    border-radius: 8px;
    border: 1px solid var(--border-color);
    min-height: 60px;
    width: 100%;
    max-width: 320px;
    margin: 15px auto;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Light layer behind the grid */
#four-count-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at var(--light-x, 50%) var(--light-y, 50%), 
                rgba(0, 255, 255, 0.15) 0%, 
                rgba(0, 255, 255, 0.08) 30%, 
                rgba(0, 255, 255, 0.03) 60%, 
                transparent 80%);
    pointer-events: none;
    z-index: 1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

#four-count-container.has-light::before {
    opacity: 1;
}


.beat-box {
    background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
    width: 100%;
    padding-bottom: 100%;
    height: 0;
    border-radius: 6px;
    position: relative;
    z-index: 2;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.7;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.3);
}

.beat-box.active {
    background: linear-gradient(135deg, var(--primary-accent), #00b3b3);
    opacity: 1;
    transform: scale(1.08);
    border-color: rgba(0, 255, 255, 0.6);
    box-shadow: 
        0 0 20px rgba(0, 255, 255, 0.4),
        0 0 40px rgba(0, 255, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.4);
    transition-duration: 0.15s;
}

/* Remove old flashing border animation */
.beat-box.flashing-border {
    /* Remove old styles - we're using the new light effect instead */
}

/* Clickable first beat box for resync */
.beat-box:first-child {
    cursor: pointer;
    position: relative;
}

.beat-box:first-child:hover {
    transform: scale(1.02);
    box-shadow: 0 0 8px var(--primary-accent);
    opacity: 0.8;
}

.beat-box:first-child::after {
    content: "1";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-bright);
    font-size: 0.8em;
    font-weight: bold;
    opacity: 0.7;
    pointer-events: none;
}

.beat-box:first-child:hover::after {
    opacity: 1;
    color: var(--primary-accent);
}

.bpm-grid-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.85em;
    margin-top: 10px;
}

.bpm-multiplier-controls {
    margin-top: 15px;
    padding-top: 10px;
}

.bpm-multiplier-controls h3 {
    margin-bottom: 12px;
    font-size: 1.1em;
    text-align: center;
    color: var(--secondary-accent);
    border-bottom: none;
}

.multiplier-buttons {
    justify-content: space-around;
}

.multiplier-btn {
    padding: 6px 14px;
    font-weight: bold;
    border-width: 1px;
    border-color: var(--border-color);
    color: var(--text-color);
    min-width: 50px;
    opacity: 0.7;
}

.multiplier-btn.selected {
    border-color: var(--primary-accent);
    color: var(--primary-accent);
    background-color: rgba(0, 255, 255, 0.1);
    box-shadow: 0 0 6px var(--primary-accent);
    opacity: 1.0;
}

/* Frequency Panel */
#frequency-panel { 
    flex-grow: 1; 
}

#frequent-words {
    background-color: rgba(0, 0, 0, 0.4);
    padding: 10px;
    border-radius: 5px;
    min-height: 60px;
    border: 1px solid var(--border-color);
    line-height: 1.6;
}

.freq-word { 
    display: inline-block; 
    padding: 3px 8px; 
    margin: 3px 4px; 
    border-radius: 15px; 
    color: #fff; 
    font-size: 0.9em; 
    border: 1px solid transparent; 
    transition: transform 0.2s ease; 
}

.freq-word:hover { 
    transform: translateY(-2px); 
}

.freq-5 { background-color: #c82333; border-color: #bd2130; }
.freq-4 { background-color: #e0a800; border-color: #d39e00; }
.freq-3 { background-color: #007bff; border-color: #007bff; }
.freq-2 { background-color: #218838; border-color: #1e7e34; }

/* RNG Styles */
#rng-controls {
    margin-top: 15px;
    padding-top: 10px;
}

.rng-options {
    justify-content: center;
    margin-bottom: 10px;
}

label.checkbox-label {
     display: flex;
     align-items: center;
     gap: 6px;
    color: var(--text-color);
    font-weight: normal;
     min-width: auto;
     cursor: pointer;
 }

 input[type="checkbox"] {
     cursor: pointer;
     accent-color: var(--primary-accent);
 }

#rng-display-area {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    min-height: 50px;
    border: 1px dashed var(--border-color);
    overflow: hidden;
}

.rng-set {
    display: flex;
    gap: 5px;
}

.rng-slot {
    background-color: #111;
    border: 1px solid var(--secondary-accent);
    color: var(--text-bright);
    font-family: var(--font-display);
    font-size: 1.8em;
    width: 2.2em;
    height: 1.8em;
    line-height: 1.7em;
    text-align: center;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.6);
}

.rng-slot span {
    display: block;
    position: relative;
    z-index: 2;
}

.rng-slot.spinning span {
    opacity: 0;
    transition: opacity 0.1s ease-out;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(15, 15, 30, 0.85);
    backdrop-filter: blur(5px);
}

.modal-content {
    background-color: var(--panel-bg-opaque);
    color: var(--text-color);
    margin: 10% auto;
    padding: 25px;
    border: 1px solid var(--primary-accent);
    width: 80%;
    max-width: 650px;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 5px 25px rgba(0, 255, 255, 0.2);
}

.modal-content h2 { 
    border-bottom: none; 
}

.close-button {
    color: rgb(242, 99, 38);
    font-family: Arial, sans-serif;
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 36px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease;
    line-height: 1;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-button:hover, .close-button:focus {
    color: var(--primary-accent);
}

#close-rhyme-modal {
    font-size: 36px;
    font-family: Arial, sans-serif;
}

#favorites-list { 
    list-style: none; 
    padding: 0; 
    margin-bottom: 20px; 
    max-height: 300px; 
    overflow-y: auto; 
}

#favorites-list li { 
    padding: 8px 5px; 
    border-bottom: 1px solid var(--border-color); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

#favorites-list li:last-child { 
    border-bottom: none; 
}

#favorites-list button { 
    font-size: 0.8em; 
    padding: 3px 6px; 
    border-color: var(--red-color); 
    color: var(--red-color); 
    background: transparent; 
}

#favorites-list button:hover { 
    background-color: rgba(255, 69, 0, 0.1); 
}

#word-list-textarea { 
    width: 100%; 
    margin-top: 10px; 
    margin-bottom: 15px; 
    font-family: monospace; 
    background-color: rgba(0,0,0,0.3); 
    border: 1px solid var(--border-color); 
    color: var(--text-color); 
    padding: 10px; 
    border-radius: 5px; 
    min-height: 200px; 
}

.modal-content button { 
    margin-top: 10px; 
}

.modal-content button i { 
    margin-right: 5px; 
}

/* Rhyme Finder Modal Styles */
.rhyme-modal-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dashed var(--border-color);
}

#rhyme-modal-dynamic-heading {
    position: relative;
    font-size: 1.2em;
    font-weight: bold;
    color: var(--text-bright);
    margin-bottom: 8px;
    line-height: 1.15;
    text-align: center;
    padding: 4px 6px;
    background-color: rgba(0, 255, 255, 0.08);
    border: 1px solid var(--primary-accent);
    border-radius: 6px;
    text-shadow: 0 0 2px var(--primary-accent);
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
}

/* Etymology section */
.etymology-section {
    text-align: center;
    margin-bottom: 10px;
}
.etymology-toggle {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--secondary-accent);
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.75em;
    opacity: 0.7;
    transition: opacity 0.2s, border-color 0.2s;
}
.etymology-toggle:hover { opacity: 1; border-color: var(--primary-accent); }
.etymology-toggle.active { opacity: 1; color: var(--primary-accent); border-color: var(--primary-accent); }
.etymology-content {
    text-align: left;
    margin-top: 8px;
    padding: 10px;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.85em;
    line-height: 1.5;
    color: var(--text-color);
    max-height: 200px;
    overflow-y: auto;
}
.etymology-family { margin-bottom: 8px; }
.etymology-family-label {
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--secondary-accent);
    margin-bottom: 4px;
}
.etymology-family-words {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.etymology-family-word {
    padding: 2px 6px;
    background: rgba(0,255,255,0.08);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    font-size: 0.9em;
    color: var(--text-bright);
    cursor: pointer;
}

.etymology-family-word:hover {
    background: rgba(0,255,255,0.18);
    border-color: var(--primary-accent);
}
.etymology-origin-label {
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--secondary-accent);
    margin-bottom: 4px;
}
.etymology-origin-text {
    font-style: italic;
    color: var(--text-color);
}

#rhyme-header-blacklist {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 1.2em;
    opacity: 0.6;
}

#rhyme-header-blacklist:hover {
    opacity: 1;
}

#rhyme-header-blacklist.active {
    color: var(--red-color);
    opacity: 1;
}

#rhyme-header-prev {
    font-size: 8px;
}

#rhyme-header-word {
    font-size: 41px;
    font-family: Arial, sans-serif;
}

.vowel-pattern-block {
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--secondary-accent);
    border: 1px solid var(--secondary-accent);
    padding: 2px 7px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 1em;
    font-weight: bold;
    min-width: 2em;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.13);
    transition: transform 0.2s ease;
    margin: 0 4px;
    vertical-align: middle;
}

.vowel-pattern-block:hover {
    transform: scale(1.05);
}

.consonant-pattern-block {
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--green-color);
    border: 1px solid var(--green-color);
    padding: 2px 7px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 1em;
    font-weight: bold;
    min-width: 2em;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.13);
    transition: transform 0.2s ease;
    margin: 0 4px;
    vertical-align: middle;
}

.consonant-pattern-block:hover {
    transform: scale(1.05);
}

.rhyme-legend {
    margin-top: 10px;
    font-size: 0.8em;
    opacity: 0.8;
    text-align: center;
}

.rhyme-legend span {
    padding: 2px 5px;
    border-radius: 3px;
    margin: 0 3px;
    display: inline-block;
}

.rhyme-legend .rhyme-freq-high { color: var(--red-color); background-color: rgba(255, 69, 0, 0.2);}
.rhyme-legend .rhyme-freq-med { color: var(--highlight-color); background-color: rgba(249, 168, 38, 0.2);}
.rhyme-legend .rhyme-freq-low { color: var(--green-color); background-color: rgba(0, 255, 0, 0.15);}
.rhyme-legend .rhyme-freq-none { color: var(--text-color); opacity: 0.8; background-color: rgba(128,128,128, 0.1);}

#rhyme-results-list::-webkit-scrollbar {
    width: 6px;
}
#rhyme-results-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}
#rhyme-results-list::-webkit-scrollbar-thumb {
    background: var(--primary-accent);
    opacity: 0.5;
    border-radius: 3px;
}
#rhyme-results-list::-webkit-scrollbar-thumb:hover {
    opacity: 1;
}

#rhyme-results-list {
    position: relative;
    list-style: none;
    padding: 0;
    margin-top: 15px;
    max-height: 350px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 15px;
    border: 1px solid var(--border-color);
    background-color: rgba(0,0,0, 0.2);
    padding: 10px;
    border-radius: 4px;
}

#rhyme-results-list li {
    position: relative;
    padding: 5px 10px;
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    flex-basis: calc(33.33% - 12px);
    text-align: center;
    font-size: 0.95em;
    color: var(--text-bright);
    cursor: default;
    transition: background-color 0.2s ease;
}

#rhyme-results-list li:hover {
    background-color: rgba(0, 255, 255, 0.1);
}

#rhyme-results-list li.rejected {
    text-decoration: line-through;
    opacity: 0.5;
    font-style: italic;
    cursor: not-allowed;
    border-left-color: #555;
    color: #888;
}

#rhyme-results-list li.rejected:hover {
    background-color: inherit;
}

#rhyme-results-list li.slant-tagged {
    font-style: italic;
    color: var(--secondary-accent);
}

#rhyme-results-list li.manually-added {
    text-decoration: underline;
    color: var(--green-color);
}

/* Rhyme Tier Styling */
#rhyme-results-list li.rhyme-tier-perfect {
    background-color: rgba(255, 215, 0, 0.15);
    border: 2px solid #FFD700;
    color: #FFD700;
    font-weight: bold;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}

#rhyme-results-list li.rhyme-tier-perfect::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -100%;
    width: 100%;
    height: calc(100% + 4px);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#rhyme-results-list li.rhyme-tier-perfect.shimmer-active::before {
    animation: shimmer-gold 1.5s ease-out;
    opacity: 1;
}

#rhyme-results-list li.rhyme-tier-perfect:hover {
    background-color: rgba(255, 215, 0, 0.25);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
    transform: scale(1.02);
}

#rhyme-results-list li.rhyme-tier-perfect:hover::before {
    animation: shimmer-gold 1s ease-out;
    opacity: 1;
}

#rhyme-results-list li.rhyme-tier-strong {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.15), rgba(169, 169, 169, 0.2));
    border: 2px solid #C0C0C0;
    color: #E8E8E8;
    text-shadow: 0 0 2px rgba(192, 192, 192, 0.5);
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}

#rhyme-results-list li.rhyme-tier-strong::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -100%;
    width: 100%;
    height: calc(100% + 4px);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#rhyme-results-list li.rhyme-tier-strong.shimmer-active::before {
    animation: shimmer-silver 1.5s ease-out;
    opacity: 1;
}

#rhyme-results-list li.rhyme-tier-strong:hover {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.25), rgba(169, 169, 169, 0.3));
    box-shadow: 0 0 12px rgba(192, 192, 192, 0.4), inset 0 0 4px rgba(255, 255, 255, 0.1);
    text-shadow: 0 0 4px rgba(192, 192, 192, 0.8);
    transform: scale(1.02);
}

#rhyme-results-list li.rhyme-tier-strong:hover::before {
    animation: shimmer-silver 1s ease-out;
    opacity: 1;
}

#rhyme-results-list li.rhyme-tier-standard {
    /* Default styling - no special color */
}

#rhyme-results-list li.rhyme-tier-slant {
    background-color: rgba(255, 0, 255, 0.15);
    border-color: #FF00FF;
    color: #FF00FF;
    font-style: italic;
}

#rhyme-results-list li.rhyme-tier-slant:hover {
    background-color: rgba(255, 0, 255, 0.25);
    box-shadow: 0 0 8px rgba(255, 0, 255, 0.3);
}

/* Tier Separator Styling */
.rhyme-tier-separator {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
    margin: 8px 0;
    flex-basis: 100%;
}

.rhyme-tier-label {
    display: block;
    text-align: center;
    font-size: 0.8em;
    color: var(--text-color);
    opacity: 0.7;
    margin: 4px 0;
    font-style: italic;
    flex-basis: 100%;
}

#rhyme-no-results {
    margin-top: 15px;
    opacity: 0.7;
    text-align: center;
}

.add-rhyme-section {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.add-rhyme-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.sounds-like-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-main);
    font-size: 0.85em;
    color: var(--text-color);
    cursor: pointer;
    user-select: none;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.sounds-like-toggle:hover {
    opacity: 1;
}

.sounds-like-toggle input[type="checkbox"] {
    accent-color: var(--primary-accent);
    cursor: pointer;
}

#manual-rhyme-input {
    flex-grow: 1;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    background-color: rgba(0,0,0, 0.2);
    color: var(--text-bright);
    border-radius: 4px;
    font-size: 0.95em;
}

#add-manual-rhyme-button {
    border-color: var(--green-color);
    color: var(--green-color);
    white-space: nowrap;
}

#add-manual-rhyme-button:hover {
    background-color: rgba(0, 255, 0, 0.1);
    box-shadow: 0 0 8px var(--green-color);
}

/* Shaking Animations */
@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(2px, -1px); }
  50% { transform: translate(-2px, 1px); }
  75% { transform: translate(1px, 2px); }
}

body.screen-shaking {
    animation: shake 0.15s linear 1;
}

/* New Gentle Buzz Animation for word display */
@keyframes buzz-on-beat {
  0%, 100% { transform: translateY(0) scale(1); }
  10%, 30% { transform: translateY(-1px) scale(1.01); }
}

/* Syllable Filter Section Styling */
.syllable-filter-section {
    margin: 15px 0;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.syllable-header {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px dashed var(--border-color);
}

.syllable-header h3 {
    font-size: 1em;
    color: var(--secondary-accent);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    text-align: center;
}

.syllable-reset-button {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    padding: 4px;
    border-radius: 3px;
    transition: color 0.2s ease, background-color 0.2s ease;
    font-size: 0.8em;
    opacity: 0.7;
}

.syllable-reset-button:hover {
    color: var(--primary-accent);
    background-color: rgba(0, 255, 255, 0.1);
    opacity: 1;
}

.syllable-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.syllable-select {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    text-align: center;
    font-size: 0.9em;
    padding: 6px 8px;
    background-color: var(--panel-bg);
    border: 1px solid var(--primary-accent);
    color: var(--primary-accent);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5'%3E%3Cpath fill='%2300ffff' d='M0 0l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 25px;
}

.syllable-select:hover {
    background-color: rgba(0, 255, 255, 0.1);
    box-shadow: 0 0 8px var(--primary-accent);
    color: var(--text-bright);
}

.syllable-select:focus {
    outline: none;
    box-shadow: 0 0 8px var(--primary-accent);
    background-color: rgba(0, 255, 255, 0.1);
    color: var(--text-bright);
}

.syllable-select option {
    background-color: var(--panel-bg);
    color: var(--text-color);
    padding: 4px;
}

.word-nav-arrow.top-bottom-arrow.up-arrow,
.word-nav-arrow.top-bottom-arrow.down-arrow,
.word-nav-arrow.side-arrow.left-arrow,
.word-nav-arrow.side-arrow.right-arrow {
    /* Remove translateX(-50%) and translateY(-50%) for perfect centering */
    /* transform: translateZ(10px); */
}

/* Pulse effect for chevrons on hover */
.word-nav-arrow:hover {
    animation: chevron-pulse 0.4s cubic-bezier(.4,2,.6,1);
}

@keyframes chevron-pulse {
    0% { transform: scale(1); color: var(--primary-accent); }
    50% { transform: scale(1.25); color: var(--highlight-color); }
    100% { transform: scale(1); color: var(--primary-accent); }
}

/* --- Rhyme Finder Sorting Controls --- */
.rhyme-sort-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 16px 0;
    font-size: 1em;
}
.sort-label {
    color: var(--secondary-accent);
    font-weight: bold;
    margin-right: 6px;
}
.rhyme-sort-btn {
    background: none;
    border: 1.5px solid var(--border-color);
    color: var(--primary-accent);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
    outline: none;
    position: relative;
}
.rhyme-sort-btn:hover,
.rhyme-sort-btn:focus {
    background: rgba(0,255,255,0.08);
    border-color: var(--primary-accent);
    color: var(--text-bright);
    box-shadow: 0 0 8px var(--primary-accent);
    z-index: 1;
}
.rhyme-sort-btn.active {
    background: rgba(0,255,255,0.18);
    border-color: var(--secondary-accent);
    color: var(--secondary-accent);
    box-shadow: 0 0 10px var(--secondary-accent);
}
.rhyme-sort-btn i {
    pointer-events: none;
}

.rhyme-x {
    display: none;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1em;
    color: var(--red-color);
    cursor: pointer;
    user-select: none;
    z-index: 2;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
}

.rhyme-tag {
    display: none;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1em;
    color: var(--secondary-accent);
    cursor: pointer;
    user-select: none;
    z-index: 2;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
}
#rhyme-results-list li:hover:not(.rejected) .rhyme-x {
    display: inline;
}
#rhyme-results-list li:hover:not(.rejected) .rhyme-tag {
    display: inline;
}
#rhyme-results-list li.rejected .rhyme-x {
    display: inline;
    cursor: pointer !important;
}

@keyframes rhyme-x-pulse {
    0% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.25); }
    100% { transform: translateY(-50%) scale(1); }
}
.rhyme-x:hover {
    animation: rhyme-x-pulse 0.25s cubic-bezier(.4,1.6,.6,1) 1;
    color: var(--highlight-color);
    text-shadow: 0 0 6px var(--highlight-color);
}

/* Search icon - lower-left corner of middle cell */
.word-action-icon.search-icon { 
    bottom: 8px;
    left: 8px;
    transform: none;
    color: var(--secondary-accent);
    opacity: 0.7;
}

.word-action-icon.search-icon:hover {
    transform: scale(1.1);
    color: var(--primary-accent);
    opacity: 1;
}

.word-action-icon.reverse-search-icon { 
    bottom: 8px;
    left: 60px;
    transform: none;
    color: var(--secondary-accent);
    text-shadow: 0 0 5px var(--secondary-accent);
}

.word-action-icon.reverse-search-icon:hover {
    color: var(--secondary-accent);
    text-shadow: 0 0 8px var(--secondary-accent);
    transform: scale(1.1);
}

/* Mic search button */
.word-action-icon.mic-search-icon {
    color: var(--secondary-accent);
    opacity: 0.7;
}

.word-action-icon.mic-search-icon:hover {
    color: var(--primary-accent);
    opacity: 1;
}

.word-action-icon.mic-search-icon.listening {
    color: var(--primary-accent);
    opacity: 1;
    animation: mic-search-pulse 0.8s ease-in-out infinite;
}

@keyframes mic-search-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.92); }
}

.mic-search-stack {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    overflow: visible;
}

.mic-search-glass {
    width: 1em;
    height: 1em;
    display: block;
}

.word-action-icon.mic-search-icon {
    overflow: visible;
}

.mic-search-sub {
    position: absolute;
    font-size: 0.48em;
    top: 37.5%;
    left: 37.5%;
    transform: translate(-50%, -50%);
}

/* Search mode styles */
.word-display-cell.middle-cell.search-mode,
.word-display-cell.middle-cell.reverse-search-mode {
    position: relative;
}

.word-display-cell.middle-cell.search-mode #word-display,
.word-display-cell.middle-cell.reverse-search-mode #word-display {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Search input container */
.search-input-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid transparent;
    border-radius: 12px;
}

.search-input-container.active {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}

.search-input {
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-display);
    font-size: 2em !important;
    font-weight: bold;
    color: var(--text-bright);
    text-shadow: var(--phosphor-glow);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.4s ease-out, opacity 0.4s ease-out, transform 0.4s ease-out, font-size 0.2s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    line-height: 2.5;
    margin: 0;
    padding: 0;
    text-align: center;
    pointer-events: auto;
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

/* Reverse Search Input Styling */
.reverse-search-input {
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-display);
    font-size: 2em !important;
    font-weight: bold;
    color: var(--text-bright);
    text-shadow: var(--phosphor-glow);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.4s ease-out, opacity 0.4s ease-out, transform 0.4s ease-out, font-size 0.2s ease-out;
    line-height: 1.2;
    margin: 0;
    padding: 0;
    text-align: center;
    pointer-events: auto;
    min-width: 150px;
    caret-color: var(--text-bright);
}

/* When typing (has content), shrink to fit */
.reverse-search-input.has-content {
    text-align: left;
    min-width: 20px;
    width: auto;
}

.reverse-search-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.6em;
    font-style: italic;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

/* Reverse search container - mirrors search-input-container */
.reverse-search-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid transparent;
    border-radius: 12px;
}

.reverse-search-container.active {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}

/* Border color coding for reverse search */
.reverse-search-container.word-found {
    box-shadow: 0 0 15px var(--green-color), 0 0 5px var(--green-color);
    border: 2px solid var(--green-color);
}

.reverse-search-container.word-not-found {
    box-shadow: 0 0 15px var(--red-color), 0 0 5px var(--red-color);
    border: 2px solid var(--red-color);
}

/* Reverse search autocomplete - shows prefix before typed suffix */
.reverse-search-autocomplete {
    color: rgba(255, 255, 255, 0.3);
    font-family: var(--font-display);
    font-size: 2em !important;
    font-weight: bold;
    pointer-events: none;
    white-space: nowrap;
    line-height: 1.2;
}

/* Hide autocomplete when empty so it doesn't affect centering */
.reverse-search-autocomplete:empty {
    display: none;
}

.search-autocomplete {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0; /* Will be positioned dynamically by JS */
    color: rgba(255, 255, 255, 0.3);
    font-family: var(--font-display);
    font-size: inherit !important;
    pointer-events: none;
    white-space: nowrap;
    z-index: 1;
}

/* Ensure autocomplete matches search input size exactly */
.search-input-container .search-autocomplete {
    font-size: 2em !important;
}

.search-autocomplete.active {
    display: block;
}

/* Border color coding for word existence */
.search-input-container.word-found {
    box-shadow: 0 0 15px var(--green-color), 0 0 5px var(--green-color);
    border: 2px solid var(--green-color);
}

.search-input-container.word-not-found {
    box-shadow: 0 0 15px var(--red-color), 0 0 5px var(--red-color);
    border: 2px solid var(--red-color);
}

/* Search Suggestion Boxes (Enter/Tab prompts) */
.enter-suggestion,
.tab-suggestion {
    position: absolute;
    top: 100%;
    font-size: 0.8em;
    margin-top: 5px;
    padding: 8px 12px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 10;
    display: none;
    font-family: var(--font-main);
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Single suggestion (centered) */
.enter-suggestion:not(.dual-right):not(.dual-left),
.tab-suggestion:not(.dual-right):not(.dual-left) {
    left: 50%;
    transform: translateX(-50%);
    color: var(--green-color);
    background-color: rgba(0, 255, 0, 0.15);
    border: 2px solid var(--green-color);
}

/* Dual suggestion layout - Green box on left (Tab) */
.tab-suggestion.dual-left {
    left: 0;
    transform: none;
    color: var(--green-color);
    background-color: rgba(0, 255, 0, 0.15);
    border: 2px solid var(--green-color);
}

/* Dual suggestion layout - Orange box on right (Enter) */
.enter-suggestion.dual-right {
    right: 0;
    left: auto;
    transform: none;
    color: var(--highlight-color);
    background-color: rgba(249, 168, 38, 0.15);
    border: 2px solid var(--highlight-color);
}

/* Suggestion List - Vertical list with fade effect */
.suggestion-list {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15em;
    pointer-events: none;
    z-index: 5;
    overflow: visible;
}

.suggestion-item {
    font-family: var(--font-display);
    font-size: 1.8em;
    font-weight: bold;
    white-space: nowrap;
    transition: opacity 0.15s ease;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Selected item - full visibility with phosphor glow */
.suggestion-item.selected {
    opacity: 1;
    text-shadow: var(--phosphor-glow);
}

/* First level fade (1 step from center) */
.suggestion-item.fade-1 {
    opacity: 0.4;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

/* Second level fade (2 steps from center - edges) */
.suggestion-item.fade-2 {
    opacity: 0.15;
    text-shadow: none;
}

/* Typed portion styling */
.suggestion-item .typed-part {
    color: var(--text-bright);
}

/* Autocomplete portion styling */
.suggestion-item .autocomplete-part {
    color: rgba(51, 255, 51, 0.4);
}

/* Reverse search suggestion list - use secondary accent */
.suggestion-list.reverse .suggestion-item.selected {
    text-shadow: 0 0 10px rgba(0, 255, 204, 0.8), 0 0 20px rgba(0, 255, 204, 0.4), 0 0 30px rgba(0, 255, 204, 0.2);
}

/* List seam indicator - shows where the list wraps around */
.suggestion-item.list-seam {
    margin-top: 0.5em;
    padding-top: 0.5em;
    border-top: 2px solid var(--primary-accent);
}

/* Reverse search uses secondary accent for seam */
.suggestion-list.reverse .suggestion-item.list-seam {
    border-top-color: var(--secondary-accent);
}

.rhyme-tag:hover {
    animation: rhyme-x-pulse 0.25s cubic-bezier(.4,1.6,.6,1) 1;
    color: var(--highlight-color);
    text-shadow: 0 0 6px var(--highlight-color);
}

/* --- Rhyme Rating Selector --- */
.rhyme-rating-selector {
    display: none;
    position: absolute;
    left: 10px;
    right: 28px;
    top: 2px;
    bottom: 2px;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    background: rgba(0, 0, 0, 0.92);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    z-index: 3;
    gap: 0;
}

#rhyme-results-list li.rating-open .rhyme-rating-selector {
    display: flex;
}

#rhyme-results-list li.rating-open .rhyme-tag {
    display: none;
}

.rhyme-rating-btn {
    flex: 1;
    text-align: center;
    font-size: 0.75em;
    padding: 2px 3px;
    cursor: pointer;
    opacity: 0.75;
    border-right: 1px solid rgba(255,255,255,0.08);
    user-select: none;
    line-height: 1.6;
    font-family: monospace;
    letter-spacing: 0;
    transition: opacity 0.1s, background 0.1s;
}

.rhyme-rating-btn:last-child { border-right: none; }
.rhyme-rating-btn:hover { opacity: 1; background: rgba(255,255,255,0.08); }

.rhyme-rating-btn[data-rating="stretch"] { color: #888; }
.rhyme-rating-btn[data-rating="slant"]   { color: var(--secondary-accent); }
.rhyme-rating-btn[data-rating="rhyme"]   { color: var(--primary-accent); }
.rhyme-rating-btn[data-rating="dope"]    { color: #ffb000; }
.rhyme-rating-btn[data-rating="perfect"] { color: #FFD700; }

.rhyme-rating-btn.active {
    opacity: 1;
    background: rgba(255, 255, 255, 0.14);
    font-weight: bold;
}

/* Per-tier li border indicator */
#rhyme-results-list li.user-rating-stretch { border-left: 3px solid #666; }
#rhyme-results-list li.user-rating-slant   { border-left: 3px solid var(--secondary-accent); font-style: italic; }
#rhyme-results-list li.user-rating-rhyme   { border-left: 3px solid var(--primary-accent); }
#rhyme-results-list li.user-rating-dope    { border-left: 3px solid #ffb000; }
#rhyme-results-list li.user-rating-perfect { border-left: 3px solid #FFD700; }

/* Rating group headers in rhyme list */
.rhyme-rating-group-header {
    font-size: 0.68em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 5px 10px 2px;
    opacity: 0.7;
}

.rhyme-rating-unrated-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
    margin: 6px 0 4px;
}

/* ===== RHYME PIN FEATURE ===== */

/* Pin button in rhyme modal header */
#rhyme-header-pin {
    top: 8px;
    right: 8px;
}
#rhyme-header-pin.active {
    color: var(--primary-accent);
    opacity: 1;
}

/* Pinned section header */
.rhyme-pin-section-header {
    display: block;
    text-align: center;
    font-size: 0.75em;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--primary-accent);
    opacity: 0.85;
    margin: 4px 0;
    flex-basis: 100%;
}
.rhyme-pin-section-header i {
    font-size: 0.85em;
    margin-right: 4px;
}

/* Divider below pinned section */
.rhyme-pin-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary-accent), transparent);
    opacity: 0.3;
    margin: 6px 0 8px;
    flex-basis: 100%;
}

/* Selection mode — clicking items toggles pin */
#rhyme-results-list.rhyme-list-selection-mode li {
    cursor: crosshair;
    user-select: none;
}

/* Item selected for pinning */
#rhyme-results-list li.rhyme-pending-pin {
    color: var(--primary-accent) !important;
    border-left: 3px solid var(--primary-accent);
    padding-left: 5px;
}

/* Plural suffix — small raised "s" beside the word */
.rhyme-plural-suffix {
    font-size: 0.6em;
    vertical-align: baseline;
    opacity: 0.55;
    margin-left: 1px;
}

/* Edit input in filler ticker list */
.filler-ticker-edit-input {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--primary-accent);
    color: var(--text-bright);
    font-size: inherit;
    font-family: inherit;
    outline: none;
    min-width: 0;
}

/* Shimmer Animations for Rhyme Tiers */
@keyframes shimmer-gold {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes shimmer-silver {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Rhyme Tier Tooltip */
.rhyme-tier-tooltip {
    position: fixed;
    background: rgba(0, 0, 0, 0.9);
    color: var(--text-bright);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.2s ease;
    white-space: nowrap;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Light Mode Word Display Area & Panels Improvements */
[data-theme="light"] #word-display-unit {
    background: #fff;
    border: 3px solid var(--primary-accent);
    border-radius: 18px;
    box-shadow: 0 2px 12px rgba(16, 185, 129, 0.07);
}
[data-theme="light"] .word-display-cell.middle-cell {
    background: #fff;
    border: 2px solid var(--primary-accent);
    color: #1a202c;
    border-radius: 14px;
    font-weight: 700;
}
[data-theme="light"] .word-display-cell.top-cell,
[data-theme="light"] .word-display-cell.bottom-cell {
    background: #F1F5F9;
    color: #1a202c;
    border-radius: 10px;
}
[data-theme="light"] .syllable-filter-section,
[data-theme="light"] #rng-controls {
    background: #F1F5F9;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    color: #1a202c;
}
[data-theme="light"] .syllable-header h3,
[data-theme="light"] .control-group label {
    color: var(--secondary-accent);
}
[data-theme="light"] .syllable-select,
[data-theme="light"] input[type="number"] {
    background: #fff;
    color: #1a202c;
    border: 1px solid var(--border-color);
}
[data-theme="light"] .icon-button,
[data-theme="light"] .theme-button {
    background: #fff;
    color: var(--primary-accent);
    border: 1.5px solid var(--primary-accent);
    border-radius: 8px;
}
[data-theme="light"] .icon-button:hover,
[data-theme="light"] .theme-button:hover {
    background: var(--primary-accent);
    color: #fff;
}

/* Triplet flash: sharp gold ring/shadow on active box in triplet mode */
.beat-box.active.triplet-flash {
    box-shadow:
        0 0 0 4px rgba(255, 215, 0, 0.95), /* sharp gold ring */
        0 0 16px 6px rgba(255, 215, 0, 0.7), /* gold glow */
        0 0 40px 10px rgba(255, 215, 0, 0.3),
        0 2px 4px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.1);
    z-index: 3;
    animation: triplet-flash-staccato 0.13s steps(1) 1;
}

@keyframes triplet-flash-staccato {
    0% { box-shadow:
        0 0 0 4px rgba(255, 215, 0, 0.95),
        0 0 16px 6px rgba(255, 215, 0, 0.7),
        0 0 40px 10px rgba(255, 215, 0, 0.3),
        0 2px 4px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.1);
    }
    80%, 100% { box-shadow:
        0 0 0 0px rgba(255, 215, 0, 0),
        0 0 0 0px rgba(255, 215, 0, 0),
        0 0 0 0px rgba(255, 215, 0, 0),
        0 2px 4px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.1);
    }
}

/* Word slide animations for synchronized slide-in/slide-out */
.word-slide-out-left {
    animation: slideOutLeft 0.4s ease-out forwards;
}

.word-slide-out-right {
    animation: slideOutRight 0.4s ease-out forwards;
}

.word-slide-out-up {
    animation: slideOutUp 0.4s ease-out forwards;
}

.word-slide-out-down {
    animation: slideOutDown 0.4s ease-out forwards;
}

.word-slide-in-left {
    animation: slideInLeft 0.4s ease-out forwards;
}

.word-slide-in-right {
    animation: slideInRight 0.4s ease-out forwards;
}

.word-slide-in-up {
    animation: slideInUp 0.4s ease-out forwards;
}

.word-slide-in-down {
    animation: slideInDown 0.4s ease-out forwards;
}

@keyframes slideOutLeft {
    to { transform: translateX(-120%); }
}

@keyframes slideOutRight {
    to { transform: translateX(120%); }
}

@keyframes slideOutUp {
    to { transform: translateY(-110%); }
}

@keyframes slideOutDown {
    to { transform: translateY(110%); }
}

@keyframes slideInLeft {
    from { transform: translateX(-120%); }
    to { transform: translateX(0%); }
}

@keyframes slideInRight {
    from { transform: translateX(120%); }
    to { transform: translateX(0%); }
}

@keyframes slideInUp {
    from { transform: translateY(-110%); }
    to { transform: translateY(0%); }
}

@keyframes slideInDown {
    from { transform: translateY(110%); }
    to { transform: translateY(0%); }
}

/* Remove old triplet-pulse animation and container styles */

/* Reverse Search Responsive Styles */
@media (max-width: 768px) {
    .reverse-search-input,
    .reverse-search-autocomplete {
        font-size: 1.5em !important;
    }
}

@media (max-width: 480px) {
    .reverse-search-input,
    .reverse-search-autocomplete {
        font-size: 1.2em !important;
    }
}

/* ===== Feedback Card ===== */
.feedback-card-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: feedback-fade-in 0.15s ease-out;
}

@keyframes feedback-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.feedback-card {
    width: 320px;
    background: var(--panel-bg-opaque);
    border: 1px solid var(--primary-accent);
    border-radius: 8px;
    padding: 16px;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6), var(--phosphor-glow);
    color: var(--text-color);
    font-family: var(--font-main);
    animation: feedback-fade-in 0.15s ease-out;
}

.feedback-card-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    color: rgb(242, 99, 38);
    font-size: 28px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s, color 0.2s;
    line-height: 1;
}

.feedback-card-close:hover {
    opacity: 1;
    color: var(--primary-accent);
}

.feedback-card-header {
    text-align: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--border-color);
}

.feedback-card-words {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1.3em;
    font-weight: bold;
    color: var(--text-bright);
}

.feedback-card-words .feedback-vs {
    font-size: 0.7em;
    opacity: 0.5;
    font-weight: normal;
}

.feedback-card-match {
    font-size: 0.85em;
    opacity: 0.7;
    margin-top: 4px;
}

/* Phoneme comparison rows */
.feedback-phoneme-section {
    margin-bottom: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

.feedback-phoneme-section::-webkit-scrollbar {
    display: none;
}

.feedback-phoneme-row {
    display: flex;
    gap: 3px;
    justify-content: center;
    margin: 3px 0;
    flex-wrap: nowrap;
}

.feedback-phoneme-row .word-label {
    font-size: 0.7em;
    opacity: 0.5;
    min-width: 50px;
    text-align: right;
    padding-right: 4px;
    align-self: center;
    flex-shrink: 0;
}

.feedback-vowel-block {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--secondary-accent);
    border: 1px solid var(--secondary-accent);
    padding: 2px 5px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.8em;
    font-weight: bold;
    min-width: 28px;
    text-align: center;
    flex-shrink: 0;
}

.feedback-consonant-block {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 2px 5px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.8em;
    min-width: 28px;
    text-align: center;
    opacity: 0.7;
    flex-shrink: 0;
}

.feedback-empty-block {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 2px 5px;
    flex-shrink: 0;
}

.feedback-mismatch {
    border-color: var(--red-color) !important;
    box-shadow: 0 0 4px rgba(255, 51, 51, 0.3);
}

.feedback-match-good {
    border-color: var(--green-color) !important;
    opacity: 1 !important;
}

/* Reason chips */
.feedback-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.feedback-chip {
    flex: 1 1 calc(50% - 3px);
    text-align: center;
    padding: 4px 10px;
    border: 1px solid var(--primary-accent);
    border-radius: 16px;
    background: transparent;
    color: var(--text-color);
    font-family: var(--font-main);
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.feedback-chip:hover {
    background: rgba(51, 255, 51, 0.1);
}

.feedback-chip.active {
    background: var(--primary-accent);
    color: var(--bg-color);
    font-weight: bold;
}

/* "Just sounds wrong" — general catch-all, centered and visually separated from the 2x2 grid above */
.feedback-chip-general {
    flex: 0 0 calc(50% - 3px);
    text-align: center;
    margin: 10px auto 0 auto;
}

/* "Not a real word" — distinct concern, full-width at the bottom */
.feedback-chip-solo {
    flex: 0 0 100%;
    text-align: center;
    margin-top: 6px;
    border-color: var(--red-color);
    color: var(--red-color);
    opacity: 0.8;
}

.feedback-chip-solo:hover {
    background: rgba(255, 69, 0, 0.12);
    opacity: 1;
}

.feedback-chip-solo.active {
    background: var(--red-color);
    color: var(--bg-color);
    opacity: 1;
}

/* Remark input */
.feedback-remark {
    width: 100%;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-color);
    font-family: var(--font-main);
    font-size: 0.9em;
    outline: none;
    transition: border-color 0.2s;
}

.feedback-remark:focus {
    border-color: var(--primary-accent);
}

.feedback-remark::placeholder {
    color: var(--text-color);
    opacity: 0.4;
}

/* Skip badge */
.feedback-skip-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 0.75em;
    color: var(--text-color);
    opacity: 0.6;
    font-family: var(--font-main);
}

/* Rejection confirmation toast */
.rejection-toast {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--panel-bg-opaque);
    border: 1px solid var(--primary-accent);
    border-radius: 6px;
    padding: 8px 16px;
    color: var(--text-color);
    font-family: var(--font-main);
    font-size: 0.95em;
    z-index: 1200;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.5), var(--phosphor-glow);
    animation: feedback-fade-in 0.15s ease-out;
    pointer-events: none;
}

.rejection-toast-exit {
    animation: rejection-slide-out 0.4s ease-in forwards;
}

@keyframes rejection-slide-out {
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-50px);
    }
}

.rejection-toast-count {
    margin-left: 8px;
    opacity: 0.5;
    font-size: 0.85em;
}

/* ============================================================
   KEY FINDER
   ============================================================ */

/* Panel button inherits .large-button — no extra styles needed */

/* Modal header */
.kf-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.kf-mic-dot {
    width: 10px;
    height: 10px;
    background: var(--primary-accent);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--primary-accent);
    animation: kf-pulse 1.1s ease-in-out infinite;
}

@keyframes kf-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

.kf-listening-label {
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--secondary-text, #6b9e6b);
    font-family: 'Courier New', monospace;
}

/* Detected note display */
.kf-detected-row {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 20px;
}

.kf-big-note {
    font-size: 72px;
    font-weight: bold;
    color: var(--primary-accent);
    text-shadow: 0 0 20px var(--primary-accent);
    line-height: 1;
    min-width: 80px;
    text-align: center;
    font-family: 'Orbitron', monospace;
}

.kf-note-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kf-scale-label {
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--secondary-text, #5a8a5a);
    font-family: 'Courier New', monospace;
}

.kf-scale-name {
    font-size: 16px;
    color: var(--primary-accent);
    font-family: 'Courier New', monospace;
}

/* Piano + meter side by side */
.kf-visual-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}

/* Piano keyboard */
.kf-piano {
    display: flex;
    gap: 3px;
    padding: 4px 0 8px;
    position: relative;
    flex-shrink: 0;
}

.kf-key {
    width: 30px;
    height: 100px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 0 0 4px 4px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 6px;
    font-size: 9px;
    font-family: 'Courier New', monospace;
    color: #444;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.kf-key--root {
    background: var(--primary-accent);
    border-color: var(--primary-accent);
    color: #000;
    box-shadow: 0 0 12px var(--primary-accent);
}

.kf-key--scale {
    background: color-mix(in srgb, var(--primary-accent) 25%, #111);
    border-color: color-mix(in srgb, var(--primary-accent) 40%, #333);
    color: var(--primary-accent);
}

.kf-octave-gap {
    width: 10px;
    flex-shrink: 0;
}

.kf-octave-start {
    border-top: 2px solid color-mix(in srgb, var(--primary-accent) 35%, transparent);
}

/* Black keys */
.kf-black-key {
    position: absolute;
    width: 22px;
    height: 65px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid color-mix(in srgb, var(--primary-accent) 12%, #333);
    border-radius: 0 0 3px 3px;
    z-index: 1;
    top: 4px;
    padding-bottom: 0;
    font-size: 0;
    box-shadow: inset 0 0 8px color-mix(in srgb, var(--primary-accent) 8%, transparent);
    backdrop-filter: blur(1px);
}

.kf-black-key.kf-key--root {
    background: var(--primary-accent);
    border-color: var(--primary-accent);
    box-shadow: 0 0 12px var(--primary-accent);
}

.kf-black-key.kf-key--scale {
    background: color-mix(in srgb, var(--primary-accent) 40%, #111);
    border-color: color-mix(in srgb, var(--primary-accent) 60%, #555);
}

/* Vertical pitch meter */
.kf-pitch-scale {
    position: relative;
    width: 90px;
    flex-shrink: 0;
    margin-top: 4px;
}

.kf-scale-row {
    display: flex;
    align-items: center;
    height: 12px;
}

.kf-scale-note-label {
    width: 30px;
    padding-right: 5px;
    font-family: 'Courier New', monospace;
    font-size: 9px;
    text-align: right;
    color: color-mix(in srgb, var(--primary-accent) 22%, transparent);
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.kf-scale-tick {
    flex: 1;
    height: 1px;
    background: color-mix(in srgb, var(--primary-accent) 12%, transparent);
    transition: background 0.2s ease;
}

.kf-scale-row--scale .kf-scale-note-label {
    color: color-mix(in srgb, var(--primary-accent) 60%, transparent);
}
.kf-scale-row--scale .kf-scale-tick {
    background: color-mix(in srgb, var(--primary-accent) 40%, transparent);
}

.kf-scale-row--root .kf-scale-note-label {
    color: var(--primary-accent);
    font-weight: bold;
}
.kf-scale-row--root .kf-scale-tick {
    background: var(--primary-accent);
    height: 2px;
    box-shadow: 0 0 4px var(--primary-accent);
}

/* Moving needle */
.kf-scale-needle {
    position: absolute;
    left: 35px;
    right: 0;
    height: 2px;
    background: var(--primary-accent);
    box-shadow: 0 0 8px var(--primary-accent);
    border-radius: 1px;
    transition: top 0.08s ease-out, opacity 0.15s ease;
    pointer-events: none;
    opacity: 0;
}

.kf-scale-needle::before {
    content: '';
    position: absolute;
    left: -6px;
    top: -4px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 6px solid var(--primary-accent);
}

/* Hint */
.kf-hint {
    font-size: 11px;
    color: var(--secondary-text, #3a6a3a);
    text-align: center;
    letter-spacing: 1px;
    font-family: 'Courier New', monospace;
}

/* ===== FILLER TICKER ===== */

/* LED Ticker — compositor-thread CSS animation for stutter-free scrolling */
@keyframes led-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.led-ticker-wrap {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 40px;
    background: #050506;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: inset 0 0 12px rgba(0,0,0,0.95), 0 0 6px rgba(0,0,0,0.5);
    margin-bottom: 10px;
}
.ticker-inner {
    display: flex;
    align-items: center;
    height: 100%;
    width: max-content;
    will-change: transform;
    animation: led-ticker-scroll linear infinite;
    animation-duration: 10s; /* overridden by JS */
}
.ticker-belt {
    display: inline-block;
    white-space: pre;
    color: var(--primary-accent);
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: none;
}

.led-ticker-preview {
    margin-bottom: 14px;
}

/* Filler ticker button inside Live Feed h2 */
.led-ticker-btn {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--secondary-accent);
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.7em;
    opacity: 0.55;
    transition: opacity 0.2s, border-color 0.2s, color 0.2s;
    flex-shrink: 0;
}

.led-ticker-btn:hover {
    opacity: 1;
    border-color: var(--primary-accent);
    color: var(--primary-accent);
}

/* Modal add row */
.filler-ticker-add-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.filler-ticker-add-row input[type="text"] {
    flex: 1;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 6px 10px;
    font-family: var(--font-main);
    font-size: 0.95em;
    border-radius: 4px;
}

/* Entry list */
.filler-ticker-list {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 14px;
    border: 1px solid var(--border-color);
}

.filler-ticker-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-color);
}

.filler-ticker-entry:last-child {
    border-bottom: none;
}

.filler-ticker-entry > span {
    flex: 1;
    font-family: var(--font-main);
    font-size: 0.95em;
    color: var(--text-color);
}

.filler-ticker-entry > button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-color);
    padding: 2px 6px;
    margin-top: 0;
    opacity: 0.8;
    transition: color 0.15s, opacity 0.15s;
}

.filler-ticker-entry > button:hover {
    color: var(--primary-accent);
    opacity: 1;
}

.filler-ticker-entry > button.eye-off {
    opacity: 0.3;
}

.filler-ticker-entry > button.feed-filtered {
    color: #e05555;
    opacity: 1;
}

/* Sliders */
.filler-ticker-controls {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.filler-ticker-controls label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: monospace;
    font-size: 0.9em;
    color: var(--text-color);
}

.filler-ticker-controls label:first-child {
    color: rgb(221, 158, 255);
}

.filler-ticker-controls label:last-child {
    color: rgb(255, 168, 219);
}

.filler-ticker-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filler-ticker-slider-row input[type="range"] {
    flex: 1;
    accent-color: var(--primary-accent);
}

.filler-ticker-slider-row span {
    min-width: 30px;
    font-size: 0.85em;
    color: var(--primary-accent);
    text-align: right;
}

/* --- STT Flush section inside filler modal --- */
.modal-section-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 18px 0 14px;
}
.modal-section-label {
    font-family: monospace;
    font-size: 0.8em;
    letter-spacing: 0.08em;
    color: var(--primary-accent);
    margin-bottom: 6px;
}
.modal-section-hint {
    font-family: monospace;
    font-size: 0.75em;
    color: #1faa1f;
    margin-bottom: 12px;
}
.stt-cycle-controls label:first-child { color: rgb(80, 220, 255); }
.stt-cycle-controls label:last-child  { color: rgb(80, 255, 190); }

/* --- Rejection Log Analysis Modal --- */
.rl-stats-row {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}
.rl-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(51, 255, 51, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px;
}
.rl-num {
    font-size: 1.8em;
    font-weight: bold;
    color: var(--primary-accent);
}
.rl-label {
    font-size: 0.75em;
    color: var(--text-color);
    opacity: 0.7;
    margin-top: 2px;
}
.rl-section {
    margin-bottom: 20px;
}
.rl-section h3 {
    font-size: 0.85em;
    color: var(--secondary-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}
.rl-section h3 small {
    text-transform: none;
    font-size: 0.85em;
    opacity: 0.6;
}
.rl-reason-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.82em;
}
.rl-reason-label {
    width: 200px;
    flex-shrink: 0;
    color: var(--text-color);
}
.rl-bar-wrap {
    flex: 1;
    background: rgba(51, 255, 51, 0.08);
    border-radius: 3px;
    height: 10px;
    overflow: hidden;
}
.rl-bar {
    height: 100%;
    background: var(--primary-accent);
    border-radius: 3px;
    transition: width 0.3s ease;
}
.rl-reason-count {
    width: 70px;
    text-align: right;
    color: var(--primary-accent);
    flex-shrink: 0;
}
.rl-tier-row {
    display: flex;
    gap: 10px;
}
.rl-tier {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}
.rl-tier-perfect  { border-color: gold; }
.rl-tier-strong   { border-color: silver; }
.rl-tier-standard { border-color: #cd7f32; }
.rl-tier-slant    { border-color: rgba(51,255,51,0.2); }
.rl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8em;
}
.rl-table th {
    text-align: left;
    padding: 5px 8px;
    border-bottom: 1px solid var(--border-color);
    color: var(--secondary-accent);
    font-weight: normal;
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.05em;
}
.rl-table td {
    padding: 4px 8px;
    border-bottom: 1px solid rgba(51,255,51,0.08);
    color: var(--text-color);
}
.rl-table tr:last-child td { border-bottom: none; }
.rl-reasons-cell { opacity: 0.7; font-size: 0.9em; }
.rl-remarks {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.82em;
}
.rl-remarks li {
    padding: 5px 0;
    border-bottom: 1px solid rgba(51,255,51,0.08);
    color: var(--text-color);
}
.rl-remarks li strong { color: var(--primary-accent); }
.rejection-log-actions {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}

/* ============================================================
   HELP DRAWER — slide-out reference panel
   ============================================================ */

/* Floating "?" trigger button — bottom-left, above beat player bar */
#help-drawer-trigger {
    position: fixed;
    left: 20px;
    bottom: 75px; /* clear the 60px beat player bar */
    z-index: 9000;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--panel-bg-opaque);
    border: 1px solid var(--border-color);
    color: var(--primary-accent);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 6px var(--primary-accent);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.6), var(--phosphor-glow);
    transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
#help-drawer-trigger:hover {
    transform: scale(1.08);
    color: var(--text-bright);
}
#help-drawer-trigger:active { transform: scale(0.96); }

/* Backdrop */
#help-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(1px);
    z-index: 9500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}
#help-drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

/* Drawer panel — slides in from the right */
#help-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 360px;
    max-width: 92vw;
    background: var(--panel-bg-opaque);
    border-left: 1px solid var(--border-color);
    box-shadow: -4px 0 30px rgba(0,0,0,0.7);
    z-index: 9600;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.22s ease;
    font-family: var(--font-main);
    color: var(--text-color);
}
#help-drawer.open { transform: translateX(0); }

/* Header */
.help-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(0,0,0,0.3);
}
.help-drawer-title {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 3px;
    color: var(--primary-accent);
    text-shadow: 0 0 6px var(--primary-accent);
}
.help-drawer-close {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.help-drawer-close:hover {
    opacity: 1;
    color: var(--text-bright);
}

/* Sections container — scrollable */
.help-drawer-sections {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}
.help-drawer-sections::-webkit-scrollbar { width: 8px; }
.help-drawer-sections::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
.help-drawer-sections::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

/* Individual section */
.help-section {
    border-bottom: 1px solid var(--border-color);
}
.help-section-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    font-family: var(--font-main);
    text-align: left;
    transition: background 0.15s ease;
}
.help-section-header:hover { background: rgba(255,255,255,0.03); }
.help-section-title {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--primary-accent);
}
.help-section-arrow {
    font-size: 10px;
    color: var(--text-color);
    opacity: 0.5;
}

.help-section-body {
    padding: 4px 16px 16px 16px;
    font-size: 14px;
    line-height: 1.45;
}

/* Content blocks */
.help-p {
    color: var(--text-color);
    margin: 0 0 10px 0;
    opacity: 0.9;
}
.help-p:last-child { margin-bottom: 0; }

.help-note {
    border-left: 2px solid var(--highlight-color);
    background: rgba(255, 255, 0, 0.04);
    padding: 7px 10px;
    margin: 10px 0 0 0;
    color: var(--highlight-color);
    font-size: 13px;
    opacity: 0.9;
}

.help-ul {
    list-style: none;
    padding: 0;
    margin: 0 0 10px 0;
}
.help-ul li {
    position: relative;
    padding: 3px 0 3px 14px;
    color: var(--text-color);
    opacity: 0.88;
}
.help-ul li::before {
    content: '›';
    position: absolute;
    left: 0;
    top: 3px;
    color: var(--primary-accent);
    opacity: 0.6;
}

/* Voice command list */
.help-cmd-list {
    border: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.3);
    margin: 4px 0 6px 0;
}
.help-cmd-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--border-color);
}
.help-cmd-row:last-child { border-bottom: none; }
.help-cmd {
    color: var(--primary-accent);
    font-family: var(--font-display);
    text-shadow: 0 0 4px rgba(51, 255, 51, 0.4);
    flex-shrink: 0;
    white-space: nowrap;
}
.help-cmd-desc {
    color: var(--text-color);
    opacity: 0.85;
    font-size: 13px;
}

/* Keyboard shortcut list */
.help-kbd-list {
    border: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.3);
    margin-top: 6px;
}
.help-kbd-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-color);
}
.help-kbd-row:last-child { border-bottom: none; }
.help-kbd-keys {
    flex: 0 0 70px;
    display: flex;
    gap: 4px;
    align-items: center;
}
.help-kbd {
    display: inline-block;
    min-width: 22px;
    padding: 2px 7px;
    background: var(--panel-bg-opaque);
    border: 1px solid var(--border-color);
    border-bottom-width: 2px;
    border-radius: 3px;
    color: var(--primary-accent);
    font-family: var(--font-display);
    font-size: 13px;
    text-align: center;
    text-shadow: 0 0 3px rgba(51, 255, 51, 0.4);
}
.help-kbd-desc {
    color: var(--text-color);
    opacity: 0.88;
    font-size: 13px;
}

/* Footer */
.help-drawer-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.3);
}
.help-drawer-foot-meta {
    text-align: center;
    font-size: 10px;
    opacity: 0.35;
    letter-spacing: 1px;
}

/* Light theme adjustments */
[data-theme="light"] #help-drawer-trigger {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    text-shadow: none;
}
[data-theme="light"] .help-drawer-title { text-shadow: none; }
[data-theme="light"] .help-cmd { text-shadow: none; }
[data-theme="light"] .help-kbd { text-shadow: none; }