/*
 * Mini 03: a fita cassete de sempre, agora desenhada em css no lugar da imagem
 * de fundo. Assim ela acompanha o tamanho da caixa e os carreteis giram
 * enquanto o audio esta no ar.
 *
 * Medida de referencia do catalogo: 250x165.
 */

:root {
    --pm3-ink: #1b1436;
    --pm3-shell: #f0b429;
    --pm3-shell-dark: #d99a13;
    --pm3-label: #fdf6e6;
    --pm3-accent: #eaa421;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--pm3-label);
    background: var(--pm3-ink);
    -webkit-font-smoothing: antialiased;
}

.pm3 {
    display: flex;
    flex-direction: column;
    gap: 7px;
    height: 100%;
    min-height: 165px;
    padding: 9px;
}

/* ---------- a fita ---------- */

.pm3__tape {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 0;
    padding: 6px;
    border: 1px solid var(--pm3-shell-dark);
    border-radius: 8px;
    background: linear-gradient(180deg, var(--pm3-shell), var(--pm3-shell-dark));
}

/* a etiqueta branca da fita, onde vai o nome da radio e o que toca */
.pm3__label {
    flex-shrink: 0;
    padding: 3px 7px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--pm3-label);
}

.pm3__song {
    display: block;
    width: 100%;
    font-size: 13px;
    line-height: 1.25;
    color: var(--pm3-ink);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10px, #000 calc(100% - 10px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 10px, #000 calc(100% - 10px), transparent);
}

/* ---------- carreteis ---------- */

.pm3__window {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 48px;
    padding: 4px 8px;
    border-radius: 5px;
    background: #2b1d5c;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45);
}

/*
 * O carretel de uma fita e um disco com seis aberturas em volta do miolo
 * dentado, e a fita enrolada faz o anel escuro por fora. Tudo isso sai de
 * gradientes: a borda e o rolo de fita, o conico desenha as aberturas e o
 * radial fecha o miolo.
 */
.pm3__reel {
    position: relative;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 5px;
    border-radius: 50%;
    background: #17102f;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.pm3__reel i {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background:
        /* miolo claro, onde encaixa o eixo */
        radial-gradient(circle, var(--pm3-label) 0 26%, transparent 27%),
        /* aro externo inteiro: sem ele as aberturas cortariam a borda */
        radial-gradient(circle, transparent 0 68%, var(--pm3-accent) 69%),
        /* as seis aberturas, entre o miolo e o aro */
        repeating-conic-gradient(transparent 0deg 18deg, var(--pm3-accent) 18deg 60deg);
}

.pm3.is-playing .pm3__reel i { animation: pm3-spin 2.4s linear infinite; }
.pm3.is-loading .pm3__reel i { animation: pm3-spin 5s linear infinite; }

@keyframes pm3-spin { to { transform: rotate(360deg); } }

/* a fita esticada entre os dois carreteis */
.pm3__band {
    flex: 1 1 auto;
    height: 10px;
    border-top: 1px solid #16102e;
    border-bottom: 1px solid #16102e;
    background: #3a2a72;
}

/* ---------- pe da fita ---------- */

.pm3__foot {
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 8px;
    padding: 0 12px;
    border-radius: 3px;
    background: rgba(27, 20, 54, .18);
}

.pm3__foot i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--pm3-ink);
    opacity: .55;
}

/* ---------- controles ---------- */

.pm3__bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pm3__play {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--pm3-ink);
    border: 0;
    border-radius: 50%;
    background: var(--pm3-accent);
    cursor: pointer;
    transition: transform .12s ease, filter .12s ease;
}

.pm3__play:hover { filter: brightness(1.08); }
.pm3__play:active { transform: scale(.94); }
.pm3__play:focus-visible { outline: 2px solid var(--pm3-accent); outline-offset: 2px; }
.pm3__play svg { width: 13px; height: 13px; }
.pm3__play svg path { stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }

.pm3__play .pl__ico-stop,
.pm3.is-playing .pm3__play .pl__ico-play { display: none; }
.pm3.is-playing .pm3__play .pl__ico-stop { display: block; }

.pm3.is-loading .pm3__play svg { display: none; }

.pm3.is-loading .pm3__play::after {
    content: "";
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: pm3-spin .7s linear infinite;
}

.pm3__ico {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    color: var(--pm3-accent);
    border: 0;
    border-radius: 6px;
    background: none;
    cursor: pointer;
}

.pm3__ico[hidden] { display: none; }
.pm3__ico:hover { color: var(--pm3-label); }
.pm3__ico:focus-visible { outline: 2px solid var(--pm3-accent); outline-offset: 1px; }
.pm3__ico svg { width: 14px; height: 14px; }

.pm3__ico .pl__ico-mute,
.pm3.is-mute .pm3__ico .pl__ico-sound { display: none; }
.pm3.is-mute .pm3__ico .pl__ico-mute { display: block; }

.pm3.is-casting [data-cast] { color: var(--pm3-label); }

.pm3__range {
    --vol: 100%;
    flex: 1 1 auto;
    min-width: 0;
    height: 16px;
    margin: 0;
    padding: 0;
    background: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.pm3__range:focus-visible { outline: 2px solid var(--pm3-accent); outline-offset: 4px; }

.pm3__range::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(to right, var(--pm3-accent) var(--vol), #3a2a72 var(--vol));
}

.pm3__range::-moz-range-track { height: 5px; border-radius: 999px; background: #3a2a72; }
.pm3__range::-moz-range-progress { height: 5px; border-radius: 999px; background: var(--pm3-accent); }

.pm3__range::-webkit-slider-thumb {
    width: 11px;
    height: 11px;
    margin-top: -3px;
    border: 0;
    border-radius: 50%;
    background: var(--pm3-accent);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .3);
    -webkit-appearance: none;
    appearance: none;
}

.pm3__range::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border: 0;
    border-radius: 50%;
    background: var(--pm3-accent);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .3);
}