/* ─────────────────────────────────────────────────────────────
   LOVE X LOVE — "MC-09" pirate radio receiver.
   A late-90s artefact: grey hardware chassis, Winamp-green LCD,
   MiniDisc-style track list. Posts: /love-x-love/on-air.json
   ───────────────────────────────────────────────────────────── */

.lxl-deck {
    --deck-shell: #d7d4cc;
    --deck-shell-hi: #e6e3dc;
    --deck-shell-lo: #b9b5ab;
    --deck-ink: #2b2a27;
    --deck-ink-soft: #5d5a53;
    --deck-orange: #ff5a1f;
    --lcd-bg: #07100a;
    --lcd-on: #7dff6a;
    --lcd-mid: #3fbf36;
    --lcd-off: #173a19;
    --pl-sel: #1a2bd1;

    position: relative;
    margin-top: 1.2em;
    padding: 0.9em 0.9em 1em;
    border-radius: 0.7em;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, var(--deck-shell-hi) 0%, var(--deck-shell) 45%, var(--deck-shell-lo) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -2px 0 rgba(0, 0, 0, 0.15),
        0 1px 0 #8f8b82,
        0 1.2em 2.4em -1.2em rgba(0, 0, 0, 0.55);
    color: var(--deck-ink);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: clamp(13px, 1vw, 15px);
    line-height: 1.35;
}

/* corner screws */
.lxl-deck::before,
.lxl-deck::after {
    content: "";
    position: absolute;
    top: 0.45em;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #f4f2ee 0, #9a968d 60%, #6f6b63 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.lxl-deck::before { left: 0.45em; }
.lxl-deck::after  { right: 0.45em; }

/* ── Top plate ────────────────────────────────────────────── */
.lxl-deck-top {
    display: flex;
    align-items: baseline;
    gap: 0.8em;
    padding: 0 0.6em 0.7em;
    text-transform: lowercase;
}

.lxl-deck-brand {
    font-family: var(--font-family);
    font-size: 1.15em;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.lxl-deck-brand b { color: var(--deck-orange); }

.lxl-deck-model {
    font-size: 0.78em;
    color: var(--deck-ink-soft);
}

.lxl-deck-onair {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin-left: auto;
    font-size: 0.78em;
    color: var(--deck-ink-soft);
}

.lxl-deck-led {
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background: #6b1a10;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.lxl-deck.is-playing .lxl-deck-led {
    background: #ff2d12;
    box-shadow: 0 0 0.5em rgba(255, 45, 18, 0.9);
}

/* ── LCD ──────────────────────────────────────────────────── */
.lxl-lcd {
    position: relative;
    padding: 0.7em 0.8em 0.6em;
    border-radius: 0.3em;
    background: var(--lcd-bg);
    box-shadow:
        inset 0 0 0 2px #1d1f1a,
        inset 0 3px 8px rgba(0, 0, 0, 0.8),
        0 1px 0 rgba(255, 255, 255, 0.6);
    color: var(--lcd-on);
    font-family: "VT323", ui-monospace, monospace;
    font-size: 1.25em;
    line-height: 1.1;
    text-shadow: 0 0 6px rgba(125, 255, 106, 0.45);
    overflow: hidden;
}

/* scanlines */
.lxl-lcd::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
    pointer-events: none;
}

.lxl-lcd-marquee {
    overflow: hidden;
    white-space: nowrap;
    color: var(--lcd-mid);
    border-bottom: 1px dashed var(--lcd-off);
    padding-bottom: 0.25em;
}

.lxl-lcd-marquee span {
    display: inline-block;
    padding-left: 100%;
}

.lxl-deck.is-playing .lxl-lcd-marquee span {
    animation: lxl-marquee 22s linear infinite;
}

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

.lxl-lcd-status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em 1em;
    margin-top: 0.35em;
    text-transform: uppercase;
}

.lxl-lcd-status [data-type] {
    padding: 0 0.35em;
    background: var(--lcd-on);
    color: var(--lcd-bg);
    text-shadow: none;
}

.lxl-lcd-status [data-time] { margin-left: auto; }

.lxl-lcd-line {
    min-height: 3.3em;
    margin: 0.45em 0 0.2em;
    font-size: 1.3em;
    line-height: 1.1;
}

.lxl-lcd-who {
    margin: 0;
    color: var(--lcd-mid);
    text-transform: uppercase;
}

.lxl-lcd-spectrum {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 1.4em;
    margin-top: 0.5em;
}

.lxl-lcd-spectrum i {
    flex: 1;
    height: 15%;
    background: linear-gradient(0deg, #3fbf36 0, #7dff6a 55%, #f4e04d 80%, #ff5a1f 100%);
    background-size: 100% 1.4em;
    background-position: bottom;
    opacity: 0.9;
}

.lxl-deck.is-playing .lxl-lcd-spectrum i { animation: lxl-bar 0.9s ease-in-out infinite alternate; }
.lxl-lcd-spectrum i:nth-child(3n)   { animation-duration: 0.62s !important; }
.lxl-lcd-spectrum i:nth-child(4n+1) { animation-duration: 1.1s !important; }
.lxl-lcd-spectrum i:nth-child(5n+2) { animation-duration: 0.74s !important; animation-delay: -0.3s; }
.lxl-lcd-spectrum i:nth-child(2n)   { animation-delay: -0.5s; }

@keyframes lxl-bar {
    0%   { height: 12%; }
    40%  { height: 78%; }
    70%  { height: 35%; }
    100% { height: 95%; }
}

/* ── Keys ─────────────────────────────────────────────────── */
.lxl-deck-keys {
    display: grid;
    grid-template-columns: repeat(3, 3em) 1fr;
    gap: 0.5em;
    align-items: end;
    margin-top: 0.9em;
    padding: 0 0.2em;
}

.lxl-key {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3em;
    font-size: 0.72em;
    color: var(--deck-ink-soft);
    text-transform: lowercase;
}

.lxl-key button,
.lxl-deck-tune {
    display: grid;
    place-items: center;
    width: 100%;
    height: 2.4em;
    border: 0;
    border-radius: 0.35em;
    background: linear-gradient(180deg, #f3f1ec 0, #d9d6cf 100%);
    box-shadow:
        inset 0 1px 0 #fff,
        0 2px 0 #8f8b82,
        0 3px 4px rgba(0, 0, 0, 0.25);
    color: var(--deck-ink);
    cursor: pointer;
}

.lxl-key button { width: 4.1em; font-size: 1em; }

.lxl-key button svg {
    width: 1.1em;
    height: 1.1em;
    fill: currentColor;
}

.lxl-key button:active,
.lxl-deck-tune:active {
    transform: translateY(2px);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 0 #8f8b82;
}

.lxl-key--play button {
    background: linear-gradient(180deg, #ff7a45 0, var(--deck-orange) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 0 #b8380b, 0 3px 4px rgba(0, 0, 0, 0.25);
    color: #1a0d05;
}

.lxl-key .i-pause { display: none; }
.lxl-deck.is-playing .lxl-key .i-pause { display: block; }
.lxl-deck.is-playing .lxl-key .i-play { display: none; }

.lxl-deck-tune {
    justify-self: end;
    width: auto;
    padding: 0 1em;
    font-family: inherit;
    font-size: 0.85em;
    font-weight: 700;
    text-decoration: none;
    text-transform: lowercase;
    white-space: nowrap;
}

.lxl-deck-tune:hover { color: var(--deck-orange); text-decoration: none; }

.lxl-deck button:focus-visible,
.lxl-deck a:focus-visible {
    outline: 2px solid var(--pl-sel);
    outline-offset: 2px;
}

/* ── Track list (MiniDisc TOC / Winamp playlist) ──────────── */
.lxl-deck-list {
    max-height: 11.5em;
    margin: 0.9em 0 0;
    padding: 0.3em 0;
    overflow-y: auto;
    list-style: none;
    border-radius: 0.3em;
    background: #000;
    box-shadow: inset 0 0 0 2px #1d1f1a, 0 1px 0 rgba(255, 255, 255, 0.6);
    font-family: "VT323", ui-monospace, monospace;
    font-size: 1.15em;
    scrollbar-color: var(--lcd-mid) #000;
}

.lxl-deck-list button {
    display: grid;
    grid-template-columns: 2.2em 6.2em 1fr;
    gap: 0.5em;
    width: 100%;
    padding: 0.05em 0.6em;
    border: 0;
    background: transparent;
    color: var(--lcd-on);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.lxl-deck-list button span:last-child {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lxl-deck-list .t-type { color: var(--lcd-mid); text-transform: uppercase; }

.lxl-deck-list button:hover { background: #0c1f0e; }

.lxl-deck-list li.is-current button {
    background: var(--pl-sel);
    color: #fff;
}

.lxl-deck-list li.is-current .t-type { color: #cfd6ff; }

.lxl-deck-fallback {
    margin: 0.6em 0 0;
    font-size: 0.9em;
}

/* Motion off: nothing moves on its own; keys still work */
@media (prefers-reduced-motion: reduce) {
    .lxl-deck.is-playing .lxl-lcd-marquee span,
    .lxl-deck.is-playing .lxl-lcd-spectrum i { animation: none; }
    .lxl-lcd-marquee span { padding-left: 0; }
    .lxl-key--play { visibility: hidden; }
}

@media (max-width: 30em) {
    .lxl-deck-model { display: none; }
    .lxl-deck-keys { grid-template-columns: repeat(3, auto) 1fr; }
    .lxl-key button { width: 3.4em; }
    .lxl-lcd-status { gap: 0.2em 0.7em; }
    .lxl-deck-list button { grid-template-columns: 2em 1fr; }
    .lxl-deck-list .t-type { display: none; }
}

/* ── Cross-links under the receiver and in Press, Media & Creators ── */
.lxl-cast-note,
.lxl-creators-note {
    margin-top: 1em;
    font-family: var(--font-family);
    font-size: 0.62em;
    line-height: 1.5;
}

.lxl-cast-note a,
.lxl-creators-note a {
    color: var(--lxl-red, #D81848);
    font-weight: 700;
    white-space: nowrap;
}