/* Tus conexiones de pista — each connection is a 45rpm single whose lit
   groove follows its achieved level, and the three celebration levels appear as
   the same miniature badges the MATCH overlays use (heart, star, ignition).
   Palette and type follow the vote stage: Sora, espresso room, gold light. */

.vote-connections-trigger {
    align-items: center;
    gap: .45rem;
    min-height: 2rem;
    padding: .38rem .7rem .38rem .42rem;
    border: 1px solid rgba(242,196,100,.38);
    border-radius: 999px;
    color: #fff3d9;
    background: rgba(14,10,9,.72);
    box-shadow: 0 8px 22px rgba(0,0,0,.2);
    font: 800 .64rem/1 Sora, sans-serif;
    letter-spacing: .05em;
    cursor: pointer;
    backdrop-filter: blur(12px);
}
.vote-connections-trigger:not([hidden]) { display: inline-flex; }
.vote-connections-trigger-mark {
    display: grid;
    width: 1.25rem;
    height: 1.25rem;
    place-items: center;
    border-radius: 50%;
    color: #160d0b;
    background: #f2c464;
    font-size: .8rem;
}
.vote-connections-trigger:focus-visible,
.vote-connections-close:focus-visible { outline: 2px solid #7ef0db; outline-offset: 3px; }

.vote-connections-layer {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: grid;
    place-items: center;
    padding: max(1rem, env(safe-area-inset-top)) .9rem max(1rem, env(safe-area-inset-bottom));
    background: rgba(4,3,3,.86);
    backdrop-filter: blur(15px);
    animation: connections-fade .25s ease-out both;
}
.vote-connections-layer[hidden] { display: none !important; }
.vote-connections-panel {
    position: relative;
    width: min(100%, 30rem);
    max-height: min(46rem, 94dvh);
    overflow: auto;
    padding: 1.05rem clamp(.8rem, 4vw, 1.5rem) .85rem;
    border: 1px solid rgba(242,196,100,.28);
    border-radius: 1.6rem;
    color: #fff7ee;
    background:
        radial-gradient(ellipse 90% 40% at 50% -6%, rgba(242,196,100,.13), transparent 70%),
        radial-gradient(circle at 12% 88%, rgba(255,138,127,.07), transparent 34%),
        radial-gradient(circle at 88% 82%, rgba(126,240,219,.06), transparent 30%),
        linear-gradient(160deg, #171009 0%, #0c0a09 46%, #0a0807 100%);
    box-shadow: 0 30px 90px rgba(0,0,0,.65), inset 0 1px rgba(255,255,255,.05);
    animation: connections-rise .35s cubic-bezier(.2,.8,.2,1) both;
}
/* Same faint scanline air as the vote stage. */
.vote-connections-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: .1;
    background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 100% 5px;
}
.vote-connections-close {
    position: absolute;
    z-index: 2;
    top: .95rem;
    right: .95rem;
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;
    color: rgba(255,247,238,.8);
    background: rgba(0,0,0,.24);
    cursor: pointer;
}
.vote-connections-close svg { width: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; }

.vote-connections-head { padding: .25rem .3rem .62rem; text-align: center; }
.vote-connections-head > p {
    margin: 0 0 .5rem;
    color: #f2c464;
    font: 900 .58rem/1 Sora, sans-serif;
    letter-spacing: .22em;
    text-transform: uppercase;
}
.vote-connections-head h2 {
    margin: 0 auto;
    max-width: none;
    color: #fff7ee;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 7.5vw, 2.8rem);
    font-weight: 500;
    line-height: .88;
    letter-spacing: -.045em;
    text-wrap: balance;
}
/* Legend: the three celebration badges with their thresholds — taught once
   here, then reused on every row. */
.vote-connections-thresholds {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem .72rem;
    margin-top: .42rem;
    color: rgba(255,243,217,.62);
    font: 700 .62rem/1 Sora, sans-serif;
}
.vote-connections-thresholds > span { display: inline-flex; align-items: center; }

.vote-connections-list {
    display: grid;
    gap: .3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.vote-connection {
    --i: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    padding: .5rem .72rem .5rem .58rem;
    border: 1px solid rgba(255,247,238,.08);
    border-radius: 1.15rem;
    background: rgba(255,255,255,.03);
    animation: connection-in .45s ease both;
    animation-delay: calc(var(--i) * 75ms + .1s);
}
.vote-connection.is-level-none {
    opacity: .68;
    border-color: rgba(255,247,238,.055);
    background: rgba(255,255,255,.018);
    filter: saturate(.48);
}
.vote-connection.is-level-match {
    border-color: rgba(255,138,127,.25);
    background: linear-gradient(90deg, rgba(255,138,127,.075), rgba(255,255,255,.025) 45%);
    box-shadow: inset 2px 0 rgba(255,138,127,.6);
}
.vote-connection.is-level-super {
    border-color: rgba(242,196,100,.38);
    background:
        radial-gradient(ellipse 75% 140% at 0% 50%, rgba(242,196,100,.14), transparent 66%),
        rgba(255,255,255,.032);
    box-shadow: inset 3px 0 rgba(242,196,100,.78), 0 0 1rem rgba(242,196,100,.055);
}
.vote-connection.is-level-hyper {
    position: relative;
    overflow: hidden;
    gap: .88rem;
    padding: .68rem .8rem .68rem .64rem;
    border-color: rgba(255,225,157,.72);
    background:
        radial-gradient(circle at 8% 15%, rgba(126,240,219,.16), transparent 30%),
        radial-gradient(circle at 90% 80%, rgba(255,138,127,.15), transparent 35%),
        linear-gradient(105deg, rgba(242,196,100,.2), rgba(255,255,255,.045) 48%, rgba(242,196,100,.1));
    box-shadow:
        inset 4px 0 #f2c464,
        inset 0 1px rgba(255,247,238,.12),
        0 0 0 1px rgba(242,196,100,.12),
        0 0 1.8rem rgba(242,196,100,.16);
    animation: connection-in .45s ease both, connection-hyper-breathe 3.2s ease-in-out 1s infinite alternate;
    animation-delay: calc(var(--i) * 75ms + .1s), 1s;
}
.vote-connection.is-level-hyper::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 34%, rgba(255,247,238,.13) 48%, transparent 62%);
    translate: -120% 0;
    animation: connection-hyper-shine 4.8s ease-in-out 1.2s infinite;
}
/* La conexión de la noche: the top single gets the marquee spot. */
.vote-connection.is-top:not(.is-level-hyper) {
    gap: .78rem;
    padding: .64rem .78rem .64rem .64rem;
    border-color: rgba(242,196,100,.36);
    background:
        radial-gradient(ellipse 80% 120% at 0% 50%, rgba(242,196,100,.1), transparent 60%),
        rgba(255,255,255,.035);
}
.vote-connection.is-level-hyper .vote-connection-disc {
    width: 4rem;
    filter: drop-shadow(0 0 .65rem rgba(242,196,100,.3));
}
.vote-connection.is-level-hyper .vote-connection-name { color: #fff9ed; font-size: 1.2rem; }
.vote-connection-kicker {
    display: block;
    margin-bottom: .18rem;
    color: #f2c464;
    font: 900 .5rem/1 Sora, sans-serif;
    letter-spacing: .11em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* The record: lit groove = affinity ring. */
.vote-connection-disc {
    --pct: 0;
    position: relative;
    width: 2.9rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, transparent 0 26%, rgba(0,0,0,.5) 27% 30%, transparent 31%),
        repeating-radial-gradient(circle at 50% 50%, #191a1c 0 2px, #0b0c0e 2.5px 5px);
    box-shadow: 0 .35rem 1rem rgba(0,0,0,.45);
}
.vote-connection.is-top:not(.is-level-hyper) .vote-connection-disc { width: 3.6rem; }
.vote-connection-disc::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(#f2c464 calc(var(--pct) * 1%), rgba(255,247,238,.1) 0);
    -webkit-mask: radial-gradient(closest-side circle, transparent 0 calc(100% - 3.5px), #000 calc(100% - 2.5px));
    mask: radial-gradient(closest-side circle, transparent 0 calc(100% - 3.5px), #000 calc(100% - 2.5px));
}
.vote-connection.is-top:not(.is-level-hyper) .vote-connection-disc::before {
    background: conic-gradient(#fff3d9 0, #f2c464 calc(var(--pct) * 1%), rgba(255,247,238,.12) 0);
}
/* 45rpm center label with the person's initial. */
.vote-connection-disc span {
    position: absolute;
    inset: 27%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 30%, #2c1e12, #1c130c 70%);
    border: 1px solid rgba(242,196,100,.3);
    color: #f2d2a6;
    font: 800 .8rem/1 Sora, sans-serif;
}
.vote-connection.is-top:not(.is-level-hyper) .vote-connection-disc span { font-size: 1.05rem; }

.vote-connection-name {
    display: block;
    overflow: hidden;
    font: 800 .98rem/1.15 Sora, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vote-connection.is-top .vote-connection-name { font-size: 1.2rem; }
.vote-connection-tune {
    display: block;
    margin-top: .22rem;
    color: rgba(255,247,238,.5);
    font: 500 .64rem/1.3 Sora, sans-serif;
}
.vote-connection-levels {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem .38rem;
    margin-top: .32rem;
}
/* Mini celebration badges: same recipe as the MATCH overlays. */
.vote-connection-pip {
    position: relative;
    display: grid;
    width: 1.25rem;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgba(255,247,238,.14);
    border-radius: 50%;
    color: rgba(255,247,238,.24);
    background: rgba(0,0,0,.32);
    padding: 0;
    cursor: pointer;
}
.vote-connection-pip svg { width: .62rem; height: .62rem; fill: currentColor; }
.vote-connection-pip.is-match.is-achieved { border-color: rgba(255,138,127,.65); color: #ff8a7f; background: #1d1213; box-shadow: 0 0 .5rem rgba(255,138,127,.3); }
.vote-connection-pip.is-super.is-achieved { border-color: rgba(242,196,100,.7); color: #f2c464; background: #1d160c; box-shadow: 0 0 .5rem rgba(242,196,100,.32); }
.vote-connection-pip.is-hyper.is-achieved { border-color: rgba(246,199,106,.85); color: #fff3d9; background: #221a0d; box-shadow: 0 0 .65rem rgba(246,199,106,.45); }
.vote-connection-pip:focus-visible { outline: 2px solid #7ef0db; outline-offset: 2px; }
.vote-connection-level-popup {
    position: fixed;
    z-index: 5;
    max-width: min(15rem, calc(100vw - 2rem));
    padding: .48rem .7rem;
    translate: -50% -100%;
    border: 1px solid rgba(242,196,100,.38);
    border-radius: .7rem;
    color: #fff3d9;
    background: rgba(18,13,10,.96);
    box-shadow: 0 .65rem 1.6rem rgba(0,0,0,.45);
    font: 800 .62rem/1.25 Sora, sans-serif;
    letter-spacing: .065em;
    text-align: center;
    text-transform: uppercase;
    pointer-events: none;
    animation: connection-popup-in .16s ease-out both;
}
.vote-connection-level-popup[hidden] { display: none !important; }
.vote-connection-level-popup.is-below { translate: -50% 0; }

.vote-connections-empty { padding: 2rem 1rem; text-align: center; }
.vote-connections-empty > span { display: block; color: #f2c464; font-size: 2rem; }
.vote-connections-empty h3 { margin: .7rem 0 .4rem; font: 800 1rem/1.2 Sora, sans-serif; }
.vote-connections-empty p, .vote-connections-note { color: rgba(255,247,238,.5); font: 500 .7rem/1.5 Sora, sans-serif; }
.vote-connections-note { margin: .65rem .5rem 0; text-align: center; }

@keyframes connections-fade { from { opacity: 0; } }
@keyframes connections-rise { from { opacity: 0; transform: translateY(1rem) scale(.97); } }
@keyframes connection-in { from { opacity: 0; translate: 0 .55rem; } }
@keyframes connection-hyper-breathe { to { box-shadow: inset 4px 0 #f2c464, inset 0 1px rgba(255,247,238,.16), 0 0 0 1px rgba(242,196,100,.2), 0 0 2.6rem rgba(242,196,100,.25); } }
@keyframes connection-hyper-shine { 0%, 55% { translate: -120% 0; } 82%, 100% { translate: 120% 0; } }
@keyframes connection-popup-in { from { opacity: 0; scale: .94; } }

@media (max-width: 460px) {
    .vote-connection { gap: .52rem; padding: .46rem .62rem .46rem .5rem; }
    .vote-connection-disc { width: 2.5rem; }
    .vote-connection.is-top:not(.is-level-hyper) .vote-connection-disc { width: 3.05rem; }
    .vote-connection.is-level-hyper .vote-connection-disc { width: 3.35rem; }
    .vote-connection-tune { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 360px) {
    .vote-connection-pip { width: 1.08rem; }
    .vote-connection-pip svg { width: .52rem; height: .52rem; }
}
@media (min-width: 981px) {
    .vote-connections-panel { width: min(100%, 33rem); }
    .vote-connection-name { font-size: 1.05rem; }
    .vote-connection.is-top .vote-connection-name { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
    .vote-connections-layer, .vote-connections-panel, .vote-connection, .vote-connection-pip, .vote-connection::after { animation: none !important; }
}