/* ════════════════════════════════════════════════════════════════════════════
   LMC Radio — Turntable Player
   Shortcode [lmc_radio_player]
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Variables ──────────────────────────────────────────────────────────── */
.lmc-turntable {
    --tt-bg:          #2a1a0d;
    --tt-deck:        #1e1208;
    --tt-mat:         #150d05;
    --tt-record:      #180f06;
    --tt-groove-a:    #180f06;
    --tt-groove-b:    #201408;
    --tt-label-bg:    #3d2510;
    --tt-label-rim:   #563318;

    --tt-accent:      #C49102;
    --tt-accent-glow: rgba(196, 145, 2, 0.35);
    --tt-text:        #f0e6c8;
    --tt-text-muted:  #9a8260;
    --tt-panel:       #2c1c0c;
    --tt-border:      rgba(255, 220, 130, 0.08);
    --tt-play-size:   54px;

    position: relative;
    display:  flex;
    flex-direction: column;
    width:      100%;
    max-width:  560px;
    margin:     0 auto;
    background: var(--tt-bg);
    border-radius: 18px;
    overflow:   hidden;
    box-shadow:
        0 32px 80px rgba(0, 0, 0, .6),
        0 0 0 1px var(--tt-border),
        inset 0 1px 0 rgba(255, 255, 255, .05);
    font-family: inherit;
    color: var(--tt-text);
    user-select: none;
}

/* ── Deck ───────────────────────────────────────────────────────────────── */
.lmc-turntable__deck {
    position: relative;
    height:   310px;
    background: var(--tt-deck);
    overflow: hidden;
}

/* Subtle dot-grid texture on the deck surface */
.lmc-turntable__deck::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255, 220, 130, .07) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
    z-index: 0;
}

/* ── Platter (rubber mat) ────────────────────────────────────────────────── */
.lmc-turntable__platter {
    position: absolute;
    /*
     * Centrado horizontalmente desplazado a la izquierda para dejar espacio
     * al brazo. Centro visual en x≈244 px de 540 px de ancho.
     * left:50% + translate(-60%) con width:260px → left-edge=114px center=244px
     */
    left: 50%;
    top:  50%;
    width:  268px;
    height: 268px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--tt-mat);
    box-shadow:
        0 0 0 5px #0d191c,
        0 0 0 9px #111d21,
        0 12px 40px rgba(0,0,0,.7),
        inset 0 2px 10px rgba(0,0,0,.9);
    z-index: 1;
}

/* ── Record (vinyl disc) ─────────────────────────────────────────────────── */
.lmc-turntable__record {
    position: absolute;
    inset: 10px;
    border-radius: 50%;

    /* Vinyl groove effect — fine repeating rings */
    background: repeating-radial-gradient(
        circle at center,
        var(--tt-groove-a)  0px,
        var(--tt-groove-a)  1.4px,
        var(--tt-groove-b)  1.8px,
        var(--tt-groove-b)  3px,
        var(--tt-groove-a)  3.4px,
        var(--tt-groove-a)  5px
    );

    will-change: transform;
}

/* Spinning animation when playing */
.lmc-turntable--playing .lmc-turntable__record {
    animation: lmc-spin 3.6s linear infinite;
}

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

/* ── Center label ────────────────────────────────────────────────────────── */
.lmc-turntable__center-label {
    position: absolute;
    top:  50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width:  114px;
    height: 114px;
    border-radius: 50%;
    background: var(--tt-label-bg);
    border: 2px solid var(--tt-label-rim);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 16px rgba(0,0,0,.6);
}

/* Cover image — shown only when src is non-empty */
.lmc-turntable__cover-img {
    position: absolute;
    inset: 0;
    width:  100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: none; /* JS toggles this */
}

/* Default placeholder icon */
.lmc-turntable__cover-default {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tt-text-muted);
}

/* ── Spindle ─────────────────────────────────────────────────────────────── */
.lmc-turntable__spindle {
    position: absolute;
    top:  50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width:  11px;
    height: 11px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #d0dce0, #6a8490);
    box-shadow: 0 1px 5px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.25);
    z-index: 3;
}


/* ── Speed badge (decorativo) ────────────────────────────────────────────── */
.lmc-turntable__speed-badge {
    position: absolute;
    bottom: 14px;
    left:   18px;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--tt-text-muted);
    opacity: .6;
    z-index: 2;
}
.lmc-turntable__speed-badge span {
    font-size: .7em;
}

/* ── Panel info + controles ──────────────────────────────────────────────── */
.lmc-turntable__panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6, 1.5rem);
    padding: var(--space-6, 1.5rem) var(--space-8, 2rem);
    background: var(--tt-panel);
    border-top: 1px solid var(--tt-border);
}

/* ── Info ─────────────────────────────────────────────────────────────────── */
.lmc-turntable__info {
    flex: 1;
    min-width: 0;
}

.lmc-turntable__on-air {
    margin: 0 0 var(--space-1, 0.25rem);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tt-text-muted);
}

.lmc-turntable__program {
    margin: 0 0 var(--space-1, 0.25rem);
    font-size: var(--text-base, 1rem);
    font-weight: 600;
    color: var(--tt-text);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.lmc-turntable__episode {
    margin: 0;
    font-size: var(--text-sm, 0.9rem);
    color: var(--tt-text-muted);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

/* ── Live badge ──────────────────────────────────────────────────────────── */
.lmc-turntable__live-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 0.25rem);
    margin-bottom: var(--space-2, 0.5rem);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tt-accent);
}

.lmc-turntable__live-dot {
    display: inline-block;
    width:  6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tt-accent);
    animation: lmc-blink 1.1s ease-in-out infinite;
}

@keyframes lmc-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: .15; }
}

/* ── Controls ─────────────────────────────────────────────────────────────── */
.lmc-turntable__controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    flex-shrink: 0;
}

/* Play / Pause button */
.lmc-turntable__play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width:  var(--tt-play-size);
    height: var(--tt-play-size);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--tt-accent);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 18px var(--tt-accent-glow);
    transition: transform .12s ease, box-shadow .12s ease;
    flex-shrink: 0;
}

.lmc-turntable__play-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 28px rgba(196, 145, 2, .55);
}

.lmc-turntable__play-btn:active {
    transform: scale(.94);
    box-shadow: 0 2px 10px var(--tt-accent-glow);
}

/* Play icon pulse cuando está tocando */
.lmc-turntable--playing .lmc-turntable__play-btn {
    box-shadow: 0 4px 18px var(--tt-accent-glow), 0 0 0 4px rgba(196, 145, 2, .15);
}

/* Volume */
.lmc-turntable__vol-row {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
}

.lmc-turntable__vol-icon {
    color: var(--tt-text-muted);
    flex-shrink: 0;
}

.lmc-turntable__vol-slider {
    -webkit-appearance: none;
    appearance: none;
    width:  88px;
    height: 3px;
    border-radius: 2px;
    background: rgba(196, 145, 2, 0.22);
    outline: none;
    cursor: pointer;
}

.lmc-turntable__vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:  13px;
    height: 13px;
    border-radius: 50%;
    background: var(--tt-text);
    cursor: pointer;
    transition: transform .1s ease, background .1s ease;
}

.lmc-turntable__vol-slider:hover::-webkit-slider-thumb {
    transform: scale(1.35);
    background: var(--tt-text);
}

.lmc-turntable__vol-slider::-moz-range-thumb {
    width:  13px;
    height: 13px;
    border-radius: 50%;
    background: var(--tt-text);
    border: none;
    cursor: pointer;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .lmc-turntable__deck {
        height: 240px;
    }

    .lmc-turntable__platter {
        width:  208px;
        height: 208px;
    }

    .lmc-turntable__center-label {
        width:  88px;
        height: 88px;
    }


    .lmc-turntable__panel {
        padding: var(--space-4, 1rem) var(--space-4, 1rem);
    }

    .lmc-turntable__program {
        font-size: var(--text-sm, 0.9rem);
    }
}

/* ── Íconos play/pause — solo uno visible a la vez ──────────────────────── */
/* Basado en aria-label del botón: el engine siempre lo actualiza con _setPlayingState */
#lmc-embed-play .lmc-embed__icon-pause { display: none !important; }
#lmc-embed-play .lmc-embed__icon-play  { display: block !important; }
#lmc-embed-play[aria-label="Pausar"] .lmc-embed__icon-pause { display: block !important; }
#lmc-embed-play[aria-label="Pausar"] .lmc-embed__icon-play  { display: none !important; }

/* ── Barra de progreso del programa ──────────────────────────────────────── */
.lmc-turntable__progress {
    margin-top: var(--space-3, 0.75rem);
}

.lmc-turntable__progress-track {
    height: 3px;
    border-radius: 2px;
    background: rgba(196, 145, 2, 0.15);
    overflow: hidden;
}

.lmc-turntable__progress-fill {
    height: 100%;
    width: 0%;
    background: var(--tt-accent);
    border-radius: 2px;
    transition: width 1s linear;
}

.lmc-turntable__progress-times {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    color: var(--tt-text-muted);
    letter-spacing: 0.02em;
}

/* ── Existing program-info shortcode ─────────────────────────────────────── */
.lmc-program-info__now {
    margin-bottom: .5rem;
}