/*
 * KCTMixx Web — portable cassette recorder aesthetic.
 *
 * Visually inspired by 80s-style portable cassette recorders (e.g. RipTunes):
 * silver-grey plastic body, big speaker grille up top, recessed cassette
 * window, chunky piano-key transport buttons on the bottom.
 */

:root {
    /* Plastic body */
    --body-light: #cfd1d2;
    --body-mid:   #b6b8ba;
    --body-dark:  #8e9092;
    --body-shadow: #6f7274;

    /* Recessed wells (cassette window, control band) */
    --well-fill:  #2a2826;
    --well-edge:  #0e0c0a;

    /* Speaker holes */
    --hole-bg:    #1a1818;

    /* Brand */
    --accent-red:      #cc2121;
    --accent-red-deep: #730f0a;
    --accent-orange:   #e87b1f;
    --flag-green:      #2e8a4d;
    --flag-white:      #f0f0e8;

    /* LCD */
    --lcd-amber:   #ffaa21;
    --lcd-bg:      #0a0805;
    --lcd-bg-edge: #1c1612;

    /* Cassette */
    --tape-body:        #1a1712;
    --tape-label-light: #f0e6c7;
    --tape-label-dark:  #d9c799;
    --tape-label-line:  rgba(138, 122, 74, 0.4);
    --tape-reel-hub:    #1a1712;
    --tape-reel-inner:  #c0a05a;
    --tape-reel-outer:  #38322a;

    /* LEDs */
    --led-on:        #ff4f3a;
    --led-off:       #3a3a3a;
    --led-green:     #409940;

    /* Modal */
    --modal-bg:    #1a1a1a;
    --modal-fg:    #e5e5e5;
    --modal-edge:  #2e2e2e;
}

/* ─── Reset / globals ─────────────────────────────────────────────── */

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

html, body {
    height: 100%;
    overflow: hidden;
    background: #0a0a0a;
    color: var(--modal-fg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    /* Use safe-area insets so notch/home-indicator don't overlap the deck.
       env() falls back to 0 on browsers without safe areas. */
    padding-top:    max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    background: radial-gradient(ellipse at 50% 50%, #1a1a1a 0%, #050505 75%);
}

/* On phone-sized screens, drop the body padding so the deck can use
   the full viewport width. The deck has its own rounded corners and
   shadow that look fine against the dark background. */
@media (max-width: 480px) {
    body {
        padding: 8px;
        padding-top:    max(8px, env(safe-area-inset-top));
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
}

/* ─── Body shell — silver-grey plastic ────────────────────────────── */

.deck-shell {
    width: min(420px, 100%);
    max-height: 100vh;
    max-height: 100dvh;  /* dvh accounts for mobile browser chrome */
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 22px;
    padding: 16px 14px 18px;
    background:
        linear-gradient(180deg,
            var(--body-light) 0%,
            var(--body-mid)   55%,
            var(--body-dark)  100%);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.7),
        inset 0 -3px 6px rgba(0,0,0,0.25),
        inset 3px 0 6px rgba(0,0,0,0.08),
        inset -3px 0 6px rgba(0,0,0,0.08),
        0 24px 50px rgba(0,0,0,0.7),
        0 6px 14px rgba(0,0,0,0.5);
    position: relative;
}

.deck-shell::-webkit-scrollbar { display: none; }
.deck-shell { scrollbar-width: none; }

/* ─── Speaker grille — big perforated area on top ─────────────────── */

.speaker-grille {
    position: relative;
    height: 110px;
    border-radius: 10px 10px 12px 12px;
    background:
        linear-gradient(180deg, var(--body-mid) 0%, var(--body-light) 50%, var(--body-mid) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.7),
        inset 0 -1px 0 rgba(0,0,0,0.15),
        0 2px 4px rgba(0,0,0,0.15) inset;
    padding: 18px 22px;
    margin-bottom: 12px;
    overflow: hidden;
}

/*
 * Speaker holes are drawn as a repeating pattern of small dark
 * horizontal slots. Each "row" of holes is a single radial-gradient
 * background applied to an absolutely-positioned overlay, then we
 * skew the entire grille slightly so the rows curve like in the
 * reference photo.
 */
.speaker-holes {
    position: absolute;
    inset: 18px 22px;
    background-image:
        radial-gradient(circle, var(--hole-bg) 1.1px, transparent 1.4px);
    background-size: 9px 9px;
    background-position: 0 0;
    border-radius: 4px;
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.25),
        inset 0 0 0 1px rgba(255,255,255,0.15);
    /* Slight perspective so the rows feel like they curve away */
    transform: perspective(400px) rotateX(2deg);
}

/* Download pill — moved over the speaker grille so it's discoverable */
.download-pill {
    position: absolute;
    top: 14px;
    right: 14px;
    appearance: none;
    border: 1px solid rgba(0,0,0,0.3);
    background: linear-gradient(180deg, var(--body-light) 0%, var(--body-dark) 100%);
    color: rgba(0,0,0,0.75);
    font-family: inherit;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 4px 8px 4px 6px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.6),
        inset 0 -1px 0 rgba(0,0,0,0.15),
        0 1px 2px rgba(0,0,0,0.4);
    z-index: 2;
}
.download-pill:hover { background: linear-gradient(180deg, var(--body-light) 0%, var(--body-mid) 100%); }
.download-pill:active { transform: translateY(1px); }
.download-pill-icon { color: var(--accent-red); font-size: 11px; font-weight: 900; }

/* ─── Song info strip — replaces the old control band ─────────────── */

.song-info-strip {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: 6px;
    background: #000;
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.7),
        inset 0 -1px 0 rgba(255,255,255,0.05),
        0 1px 0 rgba(255,255,255,0.4);
    border: 1px solid #000;
}
.song-info-time {
    font-family: "Courier New", "DejaVu Sans Mono", monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--lcd-amber);
    text-shadow: 0 0 4px rgba(255,170,33,0.6);
    letter-spacing: 1px;
}
.song-info-marquee {
    overflow: hidden;
    position: relative;
    /* Soft edge fade so text fades in/out rather than getting hard-clipped */
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%);
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%);
}
.song-info-text {
    display: inline-block;
    white-space: nowrap;
    font-family: "Courier New", "DejaVu Sans Mono", monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--lcd-amber);
    text-shadow: 0 0 4px rgba(255,170,33,0.6);
    letter-spacing: 1px;
    /* When overflowing, the .scrolling class is added by JS and the
       keyframe animation kicks in. Static text stays centered. */
}
.song-info-text.scrolling {
    animation: marqueeScroll var(--marquee-duration, 12s) linear infinite;
    padding-left: 100%;
}

@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* ─── Cassette window ─────────────────────────────────────────────── */

.cassette-window {
    margin: 8px 0 4px;
    border-radius: 10px;
    padding: 6px;
    background:
        linear-gradient(180deg, #1a1816 0%, #0a0807 100%);
    box-shadow:
        inset 0 3px 6px rgba(0,0,0,0.7),
        inset 0 -1px 0 rgba(255,255,255,0.06),
        0 2px 3px rgba(255,255,255,0.5);
    border: 1px solid #050403;
    position: relative;
}

/* Header sticker across the top of the window — matches the reference */
.cassette-window-label {
    background: linear-gradient(180deg, #181614 0%, #0a0807 100%);
    color: var(--accent-orange);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 4px 6px;
    border-radius: 4px 4px 0 0;
    text-align: center;
    border-bottom: 1px solid #050403;
    position: relative;
}
.cassette-window-label::before,
.cassette-window-label::after {
    content: "";
    display: inline-block;
    width: 30%;
    height: 2px;
    background: var(--accent-orange);
    vertical-align: middle;
    margin: 0 6px;
    opacity: 0.7;
}

.cassette-body {
    aspect-ratio: 16 / 10;
    border-radius: 0 0 4px 4px;
    background: var(--tape-body);
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.04);
}

.cassette-empty {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(240,230,199,0.4);
    font-family: "Courier New", monospace;
    gap: 6px;
}
.empty-text { font-size: 18px; font-weight: 700; letter-spacing: 2px; }
.empty-hint { font-size: 10px; letter-spacing: 1px; }

.cassette-loaded {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    grid-template-rows: 1fr;
    padding: 6%;
    gap: 4%;
    align-items: center;
}

.cassette-reel {
    aspect-ratio: 1 / 1;
    width: 100%;
}
.cassette-label {
    background:
        linear-gradient(180deg, var(--tape-label-light) 0%, var(--tape-label-dark) 100%);
    border-radius: 2px;
    height: 100%;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #4a3815;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.5) inset,
        0 -1px 0 rgba(0,0,0,0.2) inset,
        0 2px 4px rgba(0,0,0,0.3);
    overflow: hidden;
}
.label-primary {
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.label-secondary {
    font-style: italic;
    font-size: 10px;
    line-height: 1.2;
    flex: 1;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.label-divider { height: 1px; background: var(--tape-label-line); margin: 4px 0; }
.label-footer {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #806638;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reel-svg {
    width: 100%;
    height: 100%;
    animation: reelSpin 4s linear infinite;
    animation-play-state: paused;
}
.reel-svg.spinning { animation-play-state: running; }

@keyframes reelSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

/* Empty-cassette iOS promo */
.empty-divider {
    width: 60%;
    height: 1px;
    background: rgba(240,230,199,0.15);
    margin: 14px 0 10px;
}
.empty-ios-promo {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.empty-ios-text { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; color: rgba(240,230,199,0.85); }
.empty-ios-hint { font-size: 8px; letter-spacing: 0.5px; color: rgba(240,230,199,0.4); }
.empty-qr {
    margin-top: 10px;
    padding: 6px;
    background: var(--flag-white);
    border-radius: 4px;
    line-height: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.empty-qr canvas, .empty-qr img, .empty-qr svg { display: block; }

/* ─── Embossed body wordmark ──────────────────────────────────────── */

.body-wordmark {
    text-align: center;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 4px;
    color: rgba(0,0,0,0.45);
    margin: 12px 0 4px;
    text-shadow:
        0 1px 0 rgba(255,255,255,0.5),
        0 -1px 0 rgba(0,0,0,0.1);
}

/* ─── Microphone pinhole detail ───────────────────────────────────── */

.mic-pinhole {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: -2px 8px 6px;
    color: rgba(0,0,0,0.45);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.5px;
}
.mic-pinhole-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hole-bg);
    box-shadow:
        inset 0 1px 1px rgba(0,0,0,0.8),
        0 1px 0 rgba(255,255,255,0.4);
}

/* ─── LCD panel ───────────────────────────────────────────────────── */

.lcd-panel {
    margin: 4px 0 12px;
    border-radius: 5px;
    padding: 3px;
    background: linear-gradient(180deg, #4a4a4a 0%, #2a2a2a 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.2),
        inset 0 -1px 0 rgba(0,0,0,0.4);
}
.lcd-screen {
    position: relative;
    border-radius: 3px;
    padding: 8px 12px;
    background: radial-gradient(ellipse at 50% 50%, var(--lcd-bg-edge) 0%, var(--lcd-bg) 100%);
    color: var(--lcd-amber);
    font-family: "Courier New", "DejaVu Sans Mono", monospace;
    text-shadow: 0 0 4px rgba(255,170,33,0.6), 0 0 8px rgba(255,170,33,0.25);
    overflow: hidden;
}
.lcd-row { display: flex; justify-content: space-between; align-items: baseline; }
.lcd-row-top    { font-size: 9px;  opacity: 0.75; }
.lcd-row-middle { margin: 1px 0; }
.lcd-counter    { font-size: 20px; font-weight: 700; letter-spacing: 1px; }
.lcd-total      { font-size: 10px; opacity: 0.7; }
.lcd-row-bottom { font-size: 10px; opacity: 0.85; }
.lcd-track {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
    width: 100%;
}
.lcd-scanlines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        rgba(0,0,0,0.0) 0px,
        rgba(0,0,0,0.0) 2px,
        rgba(0,0,0,0.18) 2px,
        rgba(0,0,0,0.18) 3px
    );
    border-radius: 3px;
    opacity: 0.4;
}

/* ─── Chunky piano-key transport buttons ─────────────────────────── */

.chunky-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    padding: 6px 4px;
    border-radius: 8px;
    background:
        linear-gradient(180deg, var(--body-dark) 0%, var(--body-shadow) 100%);
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.35),
        inset 0 -1px 0 rgba(255,255,255,0.18);
    margin-bottom: 10px;
}

.chunky-key {
    appearance: none;
    border: 1px solid #4a4a4a;
    border-radius: 4px 4px 6px 6px;
    padding: 14px 0 16px;
    background:
        linear-gradient(180deg,
            #e2e4e6 0%,
            #c4c6c8 35%,
            #a4a6a8 80%,
            #8c8e90 100%);
    color: rgba(0,0,0,0.7);
    font-family: inherit;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.85),
        inset 0 -3px 4px rgba(0,0,0,0.25),
        inset 0 -8px 6px rgba(0,0,0,0.06),
        0 3px 0 #555,
        0 4px 4px rgba(0,0,0,0.5);
    transform: translateY(0);
    transition: transform 0.05s ease-out, box-shadow 0.05s ease-out;
}
.chunky-key:active:not(:disabled),
.chunky-key.is-playing {
    transform: translateY(2px);
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.3),
        inset 0 -1px 0 rgba(255,255,255,0.2),
        0 1px 0 #555,
        0 2px 2px rgba(0,0,0,0.4);
}
.chunky-key:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.key-glyph {
    font-size: 13px;
    color: rgba(0,0,0,0.75);
    line-height: 1;
}
.key-label {
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: rgba(0,0,0,0.55);
}

/* PLAY key — small red accent on the glyph + LED indicator */
.chunky-play .play-glyph { color: var(--accent-red); }
.chunky-play .pause-glyph { display: none; color: var(--accent-red); }
.chunky-play.is-playing .play-glyph  { display: none; }
.chunky-play.is-playing .pause-glyph { display: inline; }

/* REC button is decorative — disabled, dim red dot */
#btnRecord .key-glyph { color: var(--accent-red); opacity: 0.5; }

/* ─── Mode panel ──────────────────────────────────────────────────── */

.mode-panel {
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr;
    gap: 6px;
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.06) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.mode-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
}
.mode-toggle:hover { background: rgba(0,0,0,0.06); }
.mode-info { cursor: default; }
.mode-info:hover { background: transparent; }
.mode-led-pair { display: flex; gap: 4px; }
.mode-led {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--led-off);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.4);
    transition: background 0.15s ease-out, box-shadow 0.15s ease-out;
}
.mode-led.active {
    background: var(--led-on);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.3), 0 0 6px rgba(255,79,58,0.7), 0 0 12px rgba(255,79,58,0.4);
}
.mode-label {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: rgba(0,0,0,0.65);
}
.mode-info-text {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: rgba(0,0,0,0.55);
    text-align: center;
    align-self: center;
    line-height: 1.3;
}

/* ─── Status strip ────────────────────────────────────────────────── */

.status-strip {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    margin-bottom: 10px;
    background: rgba(0,0,0,0.18);
    border-radius: 4px;
    font-size: 9px;
    letter-spacing: 0.5px;
}
.status-item {
    display: flex;
    align-items: center;
    gap: 4px;
    color: rgba(0,0,0,0.7);
    font-weight: 700;
}
.status-spacer { flex: 1; }
.status-led {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--led-off);
}
.status-led-on {
    background: var(--led-green);
    box-shadow: 0 0 4px var(--led-green);
}

/* ─── Function row (Cintas / Buscar / Mezclas / Radio) ────────────── */

.function-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.function-button {
    appearance: none;
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: 6px;
    padding: 8px 4px;
    background: linear-gradient(180deg, var(--body-light) 0%, var(--body-mid) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.5),
        inset 0 -1px 0 rgba(0,0,0,0.18),
        0 1px 2px rgba(0,0,0,0.35);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    transition: transform 0.05s ease-out;
}
.function-button:active { transform: translateY(1px); }
.function-icon  { font-size: 16px; }
.function-label {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: rgba(0,0,0,0.75);
}

/* ─── Modals (unchanged from before) ──────────────────────────────── */

.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0,0,0,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(4px);
}
.modal[hidden] { display: none; }

.modal-content {
    width: min(480px, 100%);
    max-height: 88vh;
    background: var(--modal-bg);
    color: var(--modal-fg);
    border-radius: 12px;
    border: 1px solid var(--modal-edge);
    box-shadow: 0 12px 30px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--modal-edge);
    background: rgba(255,255,255,0.02);
}
.modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-red);
}
.modal-close {
    appearance: none;
    background: transparent;
    color: var(--modal-fg);
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}
.modal-close:hover { background: rgba(255,255,255,0.08); }
.modal-toolbar {
    padding: 10px 14px;
    border-bottom: 1px solid var(--modal-edge);
}
.modal-search {
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--modal-edge);
    background: rgba(255,255,255,0.04);
    color: var(--modal-fg);
    font-size: 14px;
    font-family: inherit;
    -webkit-user-select: text;
    user-select: text;
}
.modal-search::placeholder { color: rgba(229,229,229,0.4); }
.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    -webkit-overflow-scrolling: touch;
}
.loading-text {
    padding: 30px 16px;
    text-align: center;
    color: rgba(229,229,229,0.5);
    font-size: 13px;
}
.list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.1s;
}
.list-row:hover  { background: rgba(255,255,255,0.04); }
.list-row:active { background: rgba(255,255,255,0.08); }
.list-row-art {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 4px;
    background: var(--modal-edge);
    object-fit: cover;
}
.list-row-text { flex: 1; min-width: 0; }
.list-row-title {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.list-row-subtitle {
    font-size: 11px;
    color: rgba(229,229,229,0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.list-row-meta {
    font-size: 11px;
    color: rgba(229,229,229,0.55);
    flex-shrink: 0;
    font-family: monospace;
}
.section-header {
    padding: 14px 16px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(229,229,229,0.55);
}

.mix-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: none;
    background: rgba(255,255,255,0.03);
    color: var(--modal-fg);
    cursor: pointer;
    width: calc(100% - 32px);
    margin: 8px 16px;
    border-radius: 8px;
    font-family: inherit;
    text-align: left;
}
.mix-tile:hover { background: rgba(255,255,255,0.06); }
.mix-tile-icon { font-size: 28px; }
.mix-tile-title { font-size: 15px; font-weight: 600; }
.mix-tile-subtitle { font-size: 11px; color: rgba(229,229,229,0.55); margin-top: 2px; }

.radio-modal-content .modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.radio-station-card {
    padding: 24px 20px;
    background: linear-gradient(180deg, rgba(204,33,33,0.18) 0%, rgba(204,33,33,0.04) 100%);
    border: 1px solid rgba(204,33,33,0.3);
    border-radius: 8px;
    text-align: center;
}
.radio-station-name {
    font-size: 22px;
    font-weight: 900;
    color: var(--accent-red);
    letter-spacing: 1px;
}
.radio-station-tagline {
    font-size: 11px;
    color: rgba(229,229,229,0.55);
    margin-top: 4px;
    margin-bottom: 14px;
}
.radio-nowplaying {
    font-size: 13px;
    font-weight: 500;
    color: var(--modal-fg);
    min-height: 1.4em;
}
.radio-tune-button {
    appearance: none;
    border: none;
    padding: 14px 24px;
    background: var(--accent-red);
    color: white;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 8px;
    cursor: pointer;
}
.radio-tune-button:hover { background: var(--accent-red-deep); }
.radio-tune-button.is-playing { background: var(--body-shadow); }

.recientes-section { padding: 8px 0; }
.recientes-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.1s;
}
.recientes-row:hover { background: rgba(255,255,255,0.04); }
.recientes-icon { color: rgba(229,229,229,0.45); flex-shrink: 0; }
.recientes-text { flex: 1; font-size: 14px; }
.recientes-clear {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--accent-red);
    font-size: 12px;
    cursor: pointer;
    padding: 12px 16px;
    width: 100%;
    text-align: center;
    font-family: inherit;
}

.album-detail-header {
    display: flex;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--modal-edge);
}
.album-detail-art {
    width: 100px;
    height: 100px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--modal-edge);
    flex-shrink: 0;
}
.album-detail-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.album-detail-name { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.album-detail-artist { font-size: 13px; color: rgba(229,229,229,0.6); }
.album-detail-play-all {
    margin-top: 10px;
    padding: 8px 14px;
    background: var(--accent-red);
    border: none;
    color: white;
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    align-self: flex-start;
}

.download-modal-content { max-width: 380px; }
.download-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}
.download-pitch {
    font-size: 14px;
    line-height: 1.5;
    color: var(--modal-fg);
    max-width: 280px;
}
.download-qr-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.download-qr {
    padding: 12px;
    background: var(--flag-white);
    border-radius: 8px;
    line-height: 0;
    box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}
.download-qr canvas, .download-qr img, .download-qr svg { display: block; }
.download-qr-caption { font-size: 11px; color: rgba(229,229,229,0.55); }
.download-store-link {
    display: inline-block;
    padding: 12px 24px;
    background: var(--accent-red);
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.download-store-link:hover { background: var(--accent-red-deep); }

/* Phone-sized screen: compress everything tightly so the deck fits
   without internal scrolling. Targets typical iPhone heights (≤900px). */
@media (max-width: 480px), (max-height: 850px) {
    .deck-shell {
        padding: 10px 10px 12px;
        border-radius: 18px;
    }
    .speaker-grille {
        height: 75px;
        padding: 10px 14px;
    }
    .speaker-holes { inset: 10px 14px; }
    .cassette-window { margin: 4px 0 2px; }
    .body-wordmark {
        font-size: 13px;
        margin: 6px 0 2px;
        letter-spacing: 3px;
    }
    .lcd-counter { font-size: 16px; }
    .lcd-screen { padding: 6px 10px; }
    .chunky-key { padding: 9px 0 11px; }
    .chunky-row { padding: 4px 3px; }
    .key-glyph { font-size: 11px; }
    .key-label { font-size: 6px; }
    .control-band {
        padding: 6px 10px;
        gap: 8px;
    }
    .brand-plate-wordmark { font-size: 11px; }
    .mode-panel {
        padding: 5px 8px;
        margin-bottom: 6px;
    }
    .status-strip {
        padding: 3px 6px;
        margin-bottom: 6px;
    }
    .function-button {
        padding: 6px 4px;
    }
    .function-icon { font-size: 14px; }
}

/* Very short screens (older or compact-mode iPhones): drop section
   spacing further so transport row stays visible. */
@media (max-height: 700px) {
    .speaker-grille { height: 65px; padding: 8px 12px; }
    .speaker-holes { inset: 8px 12px; }
    .cassette-window-label {
        font-size: 7px;
        padding: 2px 4px;
    }
    .lcd-panel { margin: 4px 0 8px; }
}

/* On phones, modals go full-screen so library/search/album-detail
   feel like proper iOS sheets rather than tiny popovers. */
@media (max-width: 480px) {
    .modal {
        padding: 0;
        align-items: stretch;
    }
    .modal-content {
        width: 100%;
        max-height: 100vh;
        max-height: 100dvh;   /* dynamic viewport — accounts for URL bar */
        border-radius: 0;
        border: none;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}