/* ==========================================================
   VITROLA BIZARRA — o DISC dourado que flutua pelo site
   Camada 8600: acima das páginas, das mesas e das telas da partida
   (sala de espera/fim, 8500 — dá pra trocar de música esperando),
   mas abaixo dos modais (9000), do menu da carta, da prévia, dos
   avisos e do "Sua vez!". Posição (left/top) vem do JS — o disco
   pode ser arrastado pra qualquer lugar.
========================================================== */

.jj-music{

    --disc:68px;

    position:fixed;

    left:calc(100vw - 90px);

    top:calc(100vh - 90px);

    z-index:8600;

    width:var(--disc);

    height:var(--disc);

}

.jj-music .sr-only{

    position:absolute;

    width:1px;

    height:1px;

    overflow:hidden;

    clip:rect(0 0 0 0);

    white-space:nowrap;

}

/* ===== o disco ===== */

.jj-disc-btn{

    position:relative;

    display:block;

    width:100%;

    height:100%;

    padding:0;

    border:0;

    border-radius:50%;

    background:none;

    cursor:grab;

    touch-action:none;

    -webkit-tap-highlight-color:transparent;

    filter:drop-shadow(0 6px 12px rgba(0,0,0,.55)) drop-shadow(0 0 1px rgba(0,0,0,.9));

    transition:transform .2s ease, filter .3s ease;

}

.jj-disc-btn:hover{

    transform:scale(1.07);

}

.jj-disc-btn:focus-visible{

    outline:2px solid var(--gold-light);

    outline-offset:4px;

}

.jj-music.is-dragging .jj-disc-btn{

    cursor:grabbing;

    transform:scale(1.12);

    transition:none;

}

/* tocando: um brilho dourado em volta */
.jj-music.is-playing .jj-disc-btn{

    filter:drop-shadow(0 6px 12px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(235,209,137,.5));

}

/* a face do disco (é ela que gira): ouro metálico, sulcos finos e o
   furo do meio vazado de verdade (máscara) */
.jj-disc{

    position:absolute;

    inset:0;

    border-radius:50%;

    background:
        radial-gradient(circle, transparent 0 19%, rgba(40,28,6,.6) 19.5% 20.5%, rgba(255,246,220,.55) 21% 27%, rgba(40,28,6,.5) 27.5% 28.5%, transparent 29%),
        repeating-radial-gradient(circle, rgba(255,255,255,.07) 0 1px, transparent 1px 3px),
        conic-gradient(from 0deg, #FFF3C8, #D8B866 9%, #8A6A22 17%, #E7CD85 27%, #FFF7E0 35%, #B89340 45%, #7A5B1C 53%, #DCC07A 63%, #FFF3C8 71%, #A8832F 81%, #6F5118 89%, #FFF3C8);

    -webkit-mask:radial-gradient(circle, transparent 0 11%, #000 11.8%);

    mask:radial-gradient(circle, transparent 0 11%, #000 11.8%);

    box-shadow:inset 0 0 0 1.5px rgba(48,33,6,.85), inset 0 0 0 3px rgba(255,238,190,.35);

    animation:jjDiscSpin 3.4s linear infinite;

    animation-play-state:paused;

}

.jj-disc.is-playing{

    animation-play-state:running;

}

@keyframes jjDiscSpin{

    to{ transform:rotate(360deg); }

}

/* "DISC" em letras vazadas acompanhando a borda (como no painel do
   mangá) — gira junto com a face */
.jj-disc-label{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    overflow:visible;

}

.jj-disc-label text{

    font-family:var(--font-sfx);

    font-size:17px;

    letter-spacing:1.5px;

    fill:rgba(255,250,232,.3);

    stroke:#34250A;

    stroke-width:1.3px;

    paint-order:stroke;

}

/* reflexo que NÃO gira (luz + arco-íris de CD) — é ele parado com a
   face girando por baixo que dá a sensação de disco de verdade */
.jj-disc-shine{

    position:absolute;

    inset:0;

    border-radius:50%;

    pointer-events:none;

    background:
        linear-gradient(128deg, transparent 30%, rgba(255,255,255,.6) 46%, transparent 60%),
        conic-gradient(from 210deg, transparent 0, rgba(255,120,200,.35) 5%, rgba(120,200,255,.35) 10%, rgba(150,255,170,.28) 15%, transparent 22%, transparent 50%, rgba(255,120,200,.28) 55%, rgba(120,200,255,.28) 60%, rgba(150,255,170,.22) 65%, transparent 72%);

    mix-blend-mode:soft-light;

    -webkit-mask:radial-gradient(circle, transparent 0 11%, #000 11.8%);

    mask:radial-gradient(circle, transparent 0 11%, #000 11.8%);

}

/* ===== "Tocando agora" (balão do lado do disco) ===== */

.jj-now{

    position:absolute;

    top:50%;

    left:calc(100% + 12px);

    translate:0 -50%;

    display:flex;

    flex-direction:column;

    gap:1px;

    width:max-content;

    max-width:min(280px, 62vw);

    padding:8px 14px;

    background:rgba(18,16,12,.96);

    border:1px solid rgba(235,209,137,.6);

    border-radius:12px;

    box-shadow:0 8px 20px rgba(0,0,0,.5);

    color:var(--text);

    font-size:.8rem;

    opacity:0;

    transform:translateX(-8px);

    pointer-events:none;

    transition:opacity .25s ease, transform .25s ease;

}

.jj-now.is-shown{

    opacity:1;

    transform:none;

}

.jj-now strong,
.jj-now small{

    max-width:100%;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}

.jj-now strong{

    font-family:var(--font-display);

    font-weight:800;

    font-variation-settings:"opsz" 6;

    font-size:.95rem;

    color:var(--gold-light);

}

.jj-now small{

    color:var(--text-secondary);

    font-size:.72rem;

}

.jj-now-label{

    font-size:.6rem;

    font-weight:700;

    letter-spacing:.14em;

    text-transform:uppercase;

    color:var(--gold);

}

.jj-music.opens-left .jj-now{

    left:auto;

    right:calc(100% + 12px);

    transform:translateX(8px);

}

.jj-music.opens-left .jj-now.is-shown{

    transform:none;

}

.jj-music.is-open .jj-now{

    opacity:0;

}

/* ===== o painel da vitrola ===== */

.jj-panel{

    position:absolute;

    left:0;

    top:calc(100% + 12px);

    width:340px;

    max-width:calc(100vw - 20px);

    max-height:min(640px, calc(100vh - 110px));

    overflow-y:auto;

    display:none;

    flex-direction:column;

    gap:12px;

    padding:16px;

    background:
        linear-gradient(160deg, rgba(235,209,137,.08), transparent 42%),
        var(--panel);

    border:1px solid rgba(235,209,137,.45);

    border-radius:16px;

    box-shadow:0 18px 40px rgba(0,0,0,.6);

    color:var(--text);

    cursor:default;

}

.jj-music.is-open .jj-panel{

    display:flex;

    animation:jjPanelIn .22s ease;

}

.jj-music.opens-left .jj-panel{

    left:auto;

    right:0;

}

.jj-music.opens-up .jj-panel{

    top:auto;

    bottom:calc(100% + 12px);

}

@keyframes jjPanelIn{

    from{ opacity:0; transform:translateY(6px) scale(.98); }

}

.jj-panel-head{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.jj-panel-title{

    font-family:var(--font-display);

    font-weight:900;

    font-size:1.05rem;

    letter-spacing:.04em;

    text-transform:uppercase;

    background:var(--gold-gradient);

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

}

/* música atual */
.jj-now-block{

    display:flex;

    flex-direction:column;

    gap:3px;

    padding:2px 0 2px 12px;

    border-left:3px solid var(--c);

}

.jj-now-title{

    font-family:var(--font-display);

    font-weight:800;

    font-variation-settings:"opsz" 6;

    font-size:1.1rem;

    line-height:1.2;

}

.jj-now-artist{

    font-size:.82rem;

    color:var(--text);

}

.jj-now-meta{

    display:flex;

    align-items:center;

    gap:6px;

    font-size:.72rem;

    color:var(--text-secondary);

}

.jj-now-meta i{

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--c);

    flex-shrink:0;

}

.jj-now-via,
.jj-now-idle{

    font-size:.7rem;

    color:var(--text-secondary);

}

.jj-progress{

    margin-top:8px;

    height:4px;

    border-radius:999px;

    background:var(--panel-light);

    overflow:hidden;

}

.jj-progress-fill{

    display:block;

    height:100%;

    width:0;

    background:linear-gradient(90deg, var(--gold), var(--gold-light));

    transition:width .45s linear;

}

.jj-progress-times{

    display:flex;

    justify-content:space-between;

    font-size:.66rem;

    color:var(--text-secondary);

    font-variant-numeric:tabular-nums;

}

/* controles */
.jj-controls{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

}

.jj-icon-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:34px;

    height:34px;

    border-radius:50%;

    border:1px solid transparent;

    background:transparent;

    color:var(--text-secondary);

    cursor:pointer;

    transition:color .15s ease, background .15s ease, border-color .15s ease;

}

.jj-icon-btn:hover{

    color:var(--gold-light);

    background:rgba(235,209,137,.08);

}

.jj-icon-btn.is-on{

    color:var(--gold-light);

    border-color:rgba(235,209,137,.55);

}

.jj-icon-btn svg{

    width:18px;

    height:18px;

}

.jj-play{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:50px;

    height:50px;

    border-radius:50%;

    border:0;

    background:var(--button-gold);

    color:#16110A;

    cursor:pointer;

    box-shadow:0 4px 14px rgba(201,168,79,.35);

    transition:transform .15s ease, filter .15s ease;

}

.jj-play:hover{

    transform:scale(1.06);

    filter:brightness(1.08);

}

.jj-play svg{

    width:24px;

    height:24px;

}

.jj-volume input{

    width:100%;

    accent-color:var(--gold);

    cursor:pointer;

}

/* filtros: seletor de 3 partes iguais (tipo) + fileira de quadros
   numerados (Partes, todos do mesmo tamanho) + nome da Parte escolhida */
.jj-filter{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.jj-kinds{

    display:grid;

    grid-template-columns:repeat(4, minmax(0, 1fr));

    padding:3px;

    border-radius:999px;

    background:var(--panel-light);

    border:1px solid var(--border);

}

.jj-kind{

    padding:6px 4px;

    border:0;

    border-radius:999px;

    background:transparent;

    color:var(--text-secondary);

    font:600 .72rem "Poppins", sans-serif;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    cursor:pointer;

    transition:color .15s ease, background .15s ease;

}

.jj-kind:hover{

    color:var(--text);

}

.jj-kind.is-on{

    background:var(--button-gold);

    color:#16110A;

}

.jj-parts{

    display:grid;

    grid-template-columns:repeat(var(--n, 6), minmax(0, 1fr));

    gap:6px;

}

.jj-part{

    position:relative;

    height:40px;

    border-radius:9px;

    border:1px solid var(--border);

    background:#18181D;

    color:var(--text);

    font-family:var(--font-display);

    font-weight:900;

    font-variation-settings:"opsz" 6;

    font-size:1.15rem;

    line-height:1;

    overflow:hidden;

    cursor:pointer;

    transition:border-color .15s ease, background .15s ease, transform .15s ease;

}

/* a cor da Parte numa faixa embaixo do número */
.jj-part::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:3px;

    background:var(--c);

    box-shadow:0 0 8px var(--c);

}

.jj-part:hover{

    border-color:color-mix(in srgb, var(--c) 65%, var(--border));

    transform:translateY(-1px);

}

.jj-part.is-on{

    background:color-mix(in srgb, var(--c) 24%, #18181D);

    border-color:var(--c);

    color:#FFFFFF;

}

/* nenhuma música dessa Parte no tipo escolhido */
.jj-part.is-empty:not(.is-on){

    opacity:.35;

}

.jj-part-caption{

    display:flex;

    align-items:center;

    gap:6px;

    min-height:1.2em;

    font-size:.72rem;

    color:var(--text-secondary);

}

.jj-part-caption i{

    width:7px;

    height:7px;

    border-radius:50%;

    background:var(--c);

    flex-shrink:0;

}

/* lista de músicas (com os créditos) */
.jj-list{

    display:flex;

    flex-direction:column;

    gap:2px;

    max-height:230px;

    overflow-y:auto;

    margin:0 -6px;

    padding:0 6px;

    list-style:none;

}

.jj-track{

    display:flex;

    align-items:center;

    gap:10px;

    width:100%;

    padding:7px 8px;

    border:0;

    border-radius:8px;

    background:transparent;

    color:var(--text);

    text-align:left;

    cursor:pointer;

    transition:background .15s ease;

}

.jj-track:hover{

    background:rgba(255,255,255,.04);

}

.jj-track.is-current{

    background:color-mix(in srgb, var(--c) 14%, transparent);

}

.jj-track.is-current strong{

    color:var(--gold-light);

}

.jj-track.is-broken{

    opacity:.45;

}

.jj-track.is-broken strong{

    text-decoration:line-through;

}

.jj-track-mark{

    position:relative;

    display:inline-flex;

    align-items:flex-end;

    justify-content:center;

    gap:2px;

    width:14px;

    height:14px;

    flex-shrink:0;

}

/* a bolinha da Parte (quando não é a que está tocando) */
.jj-track-mark:empty::before{

    content:"";

    width:7px;

    height:7px;

    margin-bottom:3px;

    border-radius:50%;

    background:var(--c);

}

/* equalizer da música que está tocando */
.jj-track-mark i{

    width:3px;

    height:100%;

    border-radius:1px;

    background:var(--gold-light);

    transform-origin:bottom;

    animation:jjEq .9s ease-in-out infinite;

}

.jj-track-mark i:nth-child(2){ animation-delay:.2s; }

.jj-track-mark i:nth-child(3){ animation-delay:.4s; }

@keyframes jjEq{

    0%, 100%{ transform:scaleY(.3); }

    50%{ transform:scaleY(1); }

}

.jj-track-text{

    display:flex;

    flex-direction:column;

    min-width:0;

}

.jj-track-text strong,
.jj-track-text small{

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}

.jj-track-text strong{

    font-size:.84rem;

    font-weight:600;

}

.jj-track-text small{

    font-size:.7rem;

    color:var(--text-secondary);

}

.jj-list-empty{

    padding:10px 4px;

    font-size:.78rem;

    color:var(--text-secondary);

}

/* "Tocar ... ao entrar no site" */
.jj-auto{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:.72rem;

    color:var(--text-secondary);

    cursor:pointer;

}

.jj-auto input{

    width:15px;

    height:15px;

    accent-color:var(--gold);

    cursor:pointer;

    flex-shrink:0;

}

.jj-disclaimer{

    padding-top:10px;

    border-top:1px solid var(--border);

    font-size:.66rem;

    line-height:1.45;

    color:var(--text-secondary);

}

/* cabeçalho das páginas abre espaço pro disco quando ele está na mesma
   altura (o tamanho do recuo é calculado no musicDisc.js) */
#layout .page-header,
#layout .editor-header{

    padding-right:var(--disc-gutter, 0px);

}

/* nas mesas, o nome da sala (painel da direita) faz o mesmo */
#layout .ginfo strong{

    padding-right:var(--disc-info-gutter, 0px);

}

/* o player do YouTube: fora da tela (só o som) */
.jj-yt-holder{

    position:fixed;

    left:-10000px;

    top:0;

    width:256px;

    height:144px;

    opacity:0;

    pointer-events:none;

}

/* ===== celular / janelas baixas ===== */

@media (max-width:560px), (max-height:560px){

    .jj-music{ --disc:48px; }

    /* painel vira uma "gaveta" na parte de baixo da tela */
    .jj-music .jj-panel,
    .jj-music.opens-left .jj-panel,
    .jj-music.opens-up .jj-panel{

        position:fixed;

        left:10px;

        right:10px;

        top:auto;

        bottom:10px;

        width:auto;

        max-height:min(72vh, calc(100vh - 20px));

    }

    .jj-list{ max-height:28vh; }

}

@media (prefers-reduced-motion:reduce){

    .jj-disc,
    .jj-track-mark i{

        animation:none;

    }

}