:root {
    --bg1: #271021;
    --bg2: #1a203d;
}

html,
body {
    height: 100%;
}

html {
    background-color: var(--bg1);
}

body {
    margin: 0;
    min-height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: transparent;
    color: #e0e0e0;
    padding-bottom: env(safe-area-inset-bottom);
    position: relative;
}

/* Fixed background element to prevent scrolling issues on mobile */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--bg1), var(--bg2));
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
    pointer-events: none;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px
}

.header {
    text-align: center;
    margin-bottom: 0;
}

/* Hero area that centers the logo and search input vertically like a search homepage */
.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 20vh;
    /* slightly taller for better vertical balance */
    margin-bottom: 0;
}

/* Collapsed hero used when showing only results; pulls content up tightly */
.hero.hero--collapsed {
    min-height: 6vh;
    margin-bottom: 0;
}

/* Ensure header is a positioning context for the floating back button */
.header {
    position: relative;
}

/* Header back button (appears when viewing compact results) */
.header .header-back-btn {
    position: absolute;
    left: 8px;
    top: 8px;
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* match the subtle inset icon style */
    background: rgba(255, 255, 255, 0.03);
    color: #e6e6e6;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    z-index: 1100;
    box-shadow: none;
}

.header .header-back-btn svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 640px) {
    .header .header-back-btn {
        left: 6px;
        top: 6px;
        width: 40px;
        height: 40px;
    }
}

.header h1 {
    font-size: 2.4rem;
    margin: 0;
    cursor: pointer;
}

.subtitle {
    opacity: 0.9;
    margin-top: 8px
}

.search-bar {
    display: flex;
    justify-content: center;
    margin: 6px 0 4px 0;
    background: rgba(42, 42, 62, 0.32);
    /* match category-box, but more transparent */
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.search-input {
    background: rgba(80, 97, 181, 0.2);
    padding: 12px 16px;
    border-radius: 999px;
    color: #d6d0d6;
    border: none;
    /* let the wrapper control width; make input fill it */
    width: 100%;
    box-sizing: border-box;
    font-size: 1rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32);
    outline: none
}

/* Search input wrapper to position clear button reliably */
.search-input-wrap {
    position: relative;
    display: inline-block;
    width: 360px;
    box-sizing: border-box;
}

.search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    line-height: 1;
    border-radius: 50%;
    border: none;
    background: rgba(42, 42, 62, 0.32);
    /* match category-box, but more transparent */
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.12s ease;
}

.search-clear:hover {
    background: rgba(42, 42, 62, 0.44);
    /* slightly more opaque on hover */
    transform: translateY(-50%) scale(1.03);
}

.search-clear:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.12);
}

/* Make sure input has room for the clear button */
.search-input {
    padding-right: 52px;
}

.category-boxes.themed {
    /* arrange six top-level categories in a 3-column responsive grid.
       Use fixed column widths on desktop so horizontal spacing matches vertical gaps. */
    display: grid;
    grid-template-columns: repeat(3, 220px);
    margin: 6px auto 12px auto;
    gap: 16px;
    /* equal row and column gap (vertical == horizontal) */
    justify-content: center;
    /* center the fixed-width grid */
    padding: 0;
    /* avoid extra container padding affecting perceived gaps */
    max-width: 720px;
    /* constrain the themed area so header and grid align */
    align-items: start;
}

/* Responsive adjustments: switch to 2 columns on smaller viewports and 1 column
   on very narrow screens so the grid centers correctly instead of overflowing
   and aligning left. */
@media (max-width: 780px) {
    .category-boxes.themed {
        grid-template-columns: repeat(2, 1fr);
        max-width: 520px;
    }

    .category-boxes.themed .category-box {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 420px) {
    .category-boxes.themed {
        grid-template-columns: repeat(1, 1fr);
        max-width: 320px;
    }
}

/* Grid used for subcategory lists (languages/genres/decades) */
.subcategory-grid {
    display: grid;
    /* Match the main category grid sizing by default so buttons are the same size */
    grid-template-columns: repeat(3, 220px);
    gap: 16px;
    max-width: 720px;
    margin: 0 auto;
    justify-items: center;
    justify-content: center;
}

/* When the subcategory grid is placed inside the parent themed grid it must
   occupy the full grid width so it doesn't sit inside the first column cell
   (which made it appear left-aligned). Force the subcategory grid to span
   all columns of the parent so its internal grid can center normally. */
.category-boxes.themed>.subcategory-grid {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0 auto;
}

/* Ensure subcategory buttons use the same fixed sizing as main categories
   on desktop, and collapse responsively on smaller viewports to match the
   .category-boxes.themed behavior. */
.subcategory-grid .category-box {
    width: 220px;
    max-width: 220px;
}

@media (max-width: 780px) {
    .subcategory-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 520px;
    }

    .subcategory-grid .category-box {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 420px) {
    .subcategory-grid {
        grid-template-columns: repeat(1, 1fr);
        max-width: 320px;
    }
}

@media (max-width: 640px) {
    .subcategory-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* When the results/header row is placed inside the themed category grid, force
   it to span all columns and center its inner content so it doesn't occupy a
   single grid cell (which caused the subcategory grid to shift to the right). */
.category-boxes.themed>.results-header-row {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-start;
}

.category-box {
    /* unified sizing and alignment for category buttons */
    width: 220px;
    max-width: 220px;
    height: 100px;
    background: rgba(42, 42, 62, 0.88);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 12px;
    /* slightly larger and symmetric padding */
    box-sizing: border-box;
    /* include border/padding in width so sizing is consistent */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(58, 58, 78, 0.6);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.10s ease;
}

.category-icon {
    width: 64px;
    height: 44px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    /* slightly larger emoji size */
    /* Prefer color emoji fonts so regional-indicator flag glyphs render correctly */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", "Segoe UI Symbol", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.category-icon .lang-flag {
    margin: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 28px;
}

.category-icon .lang-flag svg {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 4px;
}

.category-icon .lang-flag img.flag-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 4px;
}

.category-icon .lang-flag .flag-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.9rem;
}

.category-box .category-label {
    margin-top: 6px;
    font-size: 0.98rem;
    line-height: 1.05;
    color: #e6e6e6;
    font-weight: 600;
    text-align: center;
}

.category-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.36);
    background: rgba(46, 46, 66, 0.94);
}

.category-box:focus-visible {
    outline: none;
    box-shadow: 0 0 0 6px rgba(102, 126, 234, 0.08), 0 10px 22px rgba(0, 0, 0, 0.32);
}

/* Ensure inline flag SVGs match the emoji sizing and don't appear oversized */
.category-icon svg {
    width: 22px;
    height: 17px;
    display: block;
}

/* removed loose .category-label rule; styles consolidated under .category-box .category-label */

#songListRoot {
    margin-top: 18px
}

/* When in compact results view, tighten song list spacing */
.hero.hero--collapsed+.category-boxes.themed+#error+main#songListRoot,
.hero.hero--collapsed+#categoryBoxes+main#songListRoot,
.hero.hero--collapsed+main#songListRoot {
    margin-top: 6px;
}

.song-item {
    background: rgba(255, 255, 255, 0.04);
    padding: 12px;
    border-radius: 8px;
    margin: 8px 0;
    display: flex;
    align-items: center
}

.song-item .meta {
    margin-left: 0;
}

.lyric-tag-spacer {
    height: 2.2em;
    /* match the line height of lyric lines for consistent spacing */
    margin: 0;
    padding: 0;
}

/* Hover: darker, more opaque background for list items (no shadow/floating) */
.song-item:hover {
    background: rgba(0, 0, 0, 0.18);
}

/* Header row shown inline above the first result when viewing a filtered results list */
.sticky-sentinel {
    position: relative;
    left: 0;
    right: 0;
    visibility: hidden;
    height: 1px;
    margin-bottom: -1px;
    pointer-events: none;
    z-index: -1;
}

.results-header-row {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Use padding for vertical spacing so the background covers the area */
    margin: 0;
    padding: 12px 0;
    /* Increased vertical padding slightly */
    position: sticky;
    top: 0;
    z-index: 1000;
}

.results-header-row.stuck {
    background: linear-gradient(135deg, var(--bg1), var(--bg2));
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    transition: background-color 0.2s ease;
    /* smooth transition when stuck */
}

.header-search-wrap {
    max-width: 300px;
    /* Limit width */
    margin-left: auto;
    /* Align to the right */
    margin-right: 12px;
    /* Reduced right margin for better alignment */
    display: flex;
    /* Changed to flex to align input and button */
    align-items: center;
    /* Vertically center content */
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    /* Prevent blocking clicks when hidden */
}

.results-header-row.stuck .header-search-wrap {
    display: flex;
    /* Use flex when stuck */
    opacity: 1;
    pointer-events: auto;
    /* Enable clicks when visible */
}

/* Wrapper for input + clear button */
.header-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
}

.header-search-input {
    flex: 1;
    /* Input takes up available space */
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: none;
    border-radius: 20px;
    padding: 8px 16px;
    padding-right: 36px;
    /* Room for clear button */
    color: #fff;
    font-size: 0.95rem;
    outline: none;
}

.header-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    line-height: 1;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.header-search-clear:hover {
    background: rgba(255, 255, 255, 0.15);
}

.header-search-button {
    background: rgba(255, 255, 255, 0.03);
    border: none;
    border-radius: 20px;
    padding: 8px;
    margin-right: 8px;
    color: #fff;
    cursor: pointer;
    outline: none;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-search-button:hover {
    background: rgba(255, 255, 255, 0.08);
}

.header-search-button svg {
    pointer-events: none;
}

.header-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}


/* Wrap controls (back + fullscreen) so their internal spacing is even   and they remain grouped. */
.results-header-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* keep controls visually grouped apart from the icon/title */
    margin-right: 6px;
}

.results-back-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    color: #e6e6e6;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
}

.results-back-btn svg {
    width: 18px;
    height: 18px;
}

/* Header fullscreen button (visually pairs with the back button) */
.results-fullscreen-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    color: #e6e6e6;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
}

.results-fullscreen-btn svg {
    width: 18px;
    height: 18px;
}

.results-header-icon {
    font-size: 1.15rem;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}

.results-header-title {
    font-weight: 700;
    font-size: 1rem;
    color: #ffffff;
}

/* Selected/focused category style */
.category-box.selected {
    border-color: #ffd166;
    box-shadow: 0 8px 24px rgba(255, 209, 102, 0.12);
    outline: 2px solid rgba(255, 209, 102, 0.06);
}

.song-title {
    font-weight: 700
}

.song-artist {
    opacity: 0.85;
    font-size: 0.95rem
}

.error {
    background: #ff6b6b;
    color: white;
    padding: 12px;
    border-radius: 6px;
    margin: 12px 0
}

/* Single-song detail styles (restores the look for the individual song view) */
.back-btn {
    display: inline-block;
    margin-bottom: 16px;
}

.back-btn.button,
.back-btn {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;

    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

.song-detail-title {
    font-size: 1.6rem;
    margin: 6px 0 4px 0;
    color: #ffffff;
}

.song-detail-artist {
    opacity: 0.85;
    margin-bottom: 12px;
}

.lyric-chords {
    /* Monospace for chords so spacing stays predictable */
    font-family: 'Roboto Mono', 'Noto Mono', Menlo, Monaco, 'Courier New', monospace;
    color: #d890cf;
    font-size: 0.92rem;
    font-weight: 400;
    /* less heavy */
    line-height: 1;
    /* tighter */
    margin: 16px 0 0px 0;
    text-align: left;
    margin-left: 0;
    white-space: pre;

}

/* Add extra spacing below chords blocks when the following lyric line is
   a tagged section (e.g. [chorus], [verse]) so the tagged label and chords
   don't appear cramped. */
.lyric-chords.has-tag {
    margin-bottom: 1.1em;
}

/* small responsive tweak to keep the detail layout comfortable */
@media(max-width:640px) {
    .song-detail-title {
        font-size: 1.25rem;
    }

    .song-lyrics {
        padding: 10px;
    }

    .search-input {
        width: 90%
    }

    .category-boxes.themed {
        grid-template-columns: repeat(2, 1fr);
    }

    .category-box {
        width: 100%;
        height: 120px
    }
}

.lyric-line {
    font-family: 'Roboto Mono', 'Noto Mono', Menlo, Monaco, 'Courier New', monospace;
    color: #e6e6e6;
    font-size: 0.92rem;
    line-height: 1.1;
    margin: 0 0 6px 0;
    white-space: pre-wrap;
    /* preserve spacing but allow wrapping */
}

/* Bracketed lyric section tags like [intro], [verse], [chorus] */
.lyric-tag {
    /* Render bracketed section tags as a distinct block for clarity */
    display: block;
    /* thicker weight to stand out */
    font-weight: 700;
    /* slightly larger than lyric lines */
    font-size: 0.95rem;
    /* uppercase and modest letter spacing to match the reference */
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* dimmer than the main lyric text so tags act like subtle labels */
    color: rgba(180, 180, 180, 0.56);
    /* more vertical breathing room above and below so there's clear space over tags */
    margin: 0.9em 0 0.35em 0;
    padding: 0;
    /* Ensure tags are left-aligned, not centered */
    text-align: left;
    margin-left: 0;
}

/* Additional single-song styles copied from the Next app's SongDetail.css
     to restore the richer, non-tiling detail layout for the static preview. */
.song-detail-container {
    /* Darker card background for better contrast. No border or shadow. */
    background: #12121a;
    /* darker than previous #2a2a3e */
    border-radius: 10px;
    /* increase padding while keeping the title flush-left (small left gutter) */
    padding: 32px 48px 48px 12px;
    box-shadow: none;
    border: none;
    overflow: hidden;
    margin: 0 0 20px 0;
}

/* Allow scrolling when in fullscreen mode */
.song-detail-container:fullscreen {
    overflow-y: auto;
}

.song-detail-container:-webkit-full-screen {
    overflow-y: auto;
}

.back-btn {
    background: #667eea;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    margin-bottom: 20px;
    transition: background 0.3s ease;
}

.back-btn:hover {
    background: #764ba2;
}

/* Detail-card header controls: unify back and fullscreen button visuals
   NOTE: user prefers the "highlighted" look by default, so we flip the
   previous normal/hover tones here. */
.song-detail-container .back-btn,
.song-detail-container .fullscreen-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* match the small inset icon visual */
    background: rgba(255, 255, 255, 0.03);
    color: #e6e6e6;
    border: none;
    transition: background .12s ease, transform .08s ease, border-color .12s ease;
    box-shadow: none !important;
    cursor: pointer;
    font-size: 0;
    z-index: 1100;
}

.song-detail-container .back-btn:hover,
.song-detail-container .fullscreen-btn:hover {
    /* hovering slightly brightens the subtle inset */
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.06);
}

.song-detail-container .back-btn:focus-visible,
.song-detail-container .fullscreen-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.12);
}

/* back: flush top-left. make top-right sharp; keep bottom-right rounded */
.song-detail-container .back-btn {
    border-radius: 0 0 8px 0;
}

/* fullscreen: flush top-right. make top-left sharp; keep bottom-left rounded */
.song-detail-container .fullscreen-btn {
    border-radius: 0 0 0 8px;
}

/* Fullscreen button placed at the top-right corner of the detail card, flush */
.song-detail-container .fullscreen-btn.is-fullscreen {
    background: rgba(20, 22, 30, 0.98);
}

/* Removed :fullscreen rules that targeted the control buttons per request.
   Buttons will no longer receive special fullscreen styling here; leave
   positioning and behavior to existing non-fullscreen rules and JS. */

.song-header {
    border-bottom: 3px solid #667eea;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

/* Reserve space on the left for the flush back button and lay out the header
   horizontally so the title and subtitle can share a row without overlap. */
/* Header layout: artist on first row, title on second row underneath. Keep
   a slightly smaller left gutter so title is closer to the card edge. */
.song-detail-container .song-header {
    /* remove the large left gutter so the title is aligned to the card's left edge */
    padding-left: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

/* Place artist above title (use order to avoid changing DOM). */
.song-detail-container .song-header .song-detail-artist {
    order: 1;
    margin: 0;
    opacity: 0.85;
    font-style: italic;
    font-size: 1.05rem;
}

.song-detail-container .song-header .song-detail-title {
    order: 2;
    margin: 0;
    font-size: 2.2rem;
    line-height: 1.03;
    width: 100%;
}

/* Back button placed in the top page header area (not inside the detail card).
   Position it absolutely at the left edge of the header (container) so it sits
   on the left side of the page content. JS will compute a precise vertical offset
   to align it with the search input when needed. */
.header .back-btn {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 10px;
    transform: translateY(-10px);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(42, 42, 62, 0.8);
    color: #e6e6e6;

    font-size: 0;
    /* hide inline text visually */
    z-index: 1000;
    cursor: pointer;
}

.header .back-btn svg {
    width: 20px;
    height: 20px;
    display: block;
}

.header .back-btn:hover {
    transform: translateY(-30%);

    background: rgba(51, 52, 69, 0.86);
}

.header .back-btn:focus-visible {
    outline: none;

}

.song-header h1,
.song-detail-title {
    margin: 0 0 10px 0;
    color: #e0e0e0;
    font-size: 2.5em;
}

.song-header .artist,
.song-detail-artist {
    color: #a0a0b0;
    font-size: 1.3em;
    font-style: italic;
    margin: 5px 0;
}

/* footer song count element */
#songCount {
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 6px;
}

.song-header .key {
    color: #667eea;
    font-weight: bold;
    font-size: 1.1em;
}

/* For song detail we don't want a second boxed panel inside the card.
   Keep `.song-lyrics` lightweight so the primary card (`.song-detail-container`)
   remains the single visual box. */
.song-lyrics {
    background: transparent;
    /* Add internal padding so lyrics don't sit flush against the card edges */
    padding: 18px 20px 24px 20px;
    border-radius: 0;
    border-left: none;
}

.lyric-line {
    margin-bottom: 4px;
    /* much tighter between lyric blocks */
}

.lyric-chords {
    /* Monospace font for chord alignment */
    font-family: 'Roboto Mono', 'Noto Mono', Menlo, Monaco, 'Courier New', monospace;
}

.no-lyrics {
    color: #a0a0b0;
    font-style: italic;
    text-align: center;
    padding: 30px 20px;
}

@media (max-width: 768px) {
    .song-detail-container {
        padding: 24px;
    }
}

/* Footer showing total songs count */
.container>footer {
    text-align: center;
    margin-top: 32px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    padding: 8px 0;
}

/* Tighter mobile presets: reduce font-size slightly but keep monospace to preserve alignment */
@media (max-width: 480px) {

    .lyric-line,
    .lyric-text {
        font-size: 0.78rem;
        line-height: 0.98;
    }

    .lyric-chords {
        font-size: 0.74rem;
        line-height: 0.96;
    }
}

/* Hide category boxes when a detail view is present in the container.
   This uses :has() and works in modern browsers; it is only a visual
   change and does not modify JS behavior. */
.container:has(.song-detail-container) .category-boxes.themed,
#categoryBoxes:has(+ #songListRoot .song-detail-container) {
    display: none !important;
}

/* When a song detail is shown, hide the search field's clear button so the
   UI focuses on the detail content (keeps the search input visible). */
.container:has(.song-detail-container) .search-clear {
    display: none !important;
}

/* Make touch targets slightly larger on small screens */
@media (max-width: 640px) {

    .song-detail-container .back-btn,
    .song-detail-container .fullscreen-btn {
        width: 48px;
        height: 48px;
    }

    .song-detail-container .song-header {
        padding-left: 72px;
    }
}