/* ═══════════════════════════════════════════════════════════════════
   O BRAÇO EM PERSPECTIVA — sem biblioteca nenhuma
   ───────────────────────────────────────────────────────────────────
   `perspective` no palco, `rotate3d` no braço, `translateZ` a
   levantar cordas e dedos acima da madeira. É 3D a sério: há
   profundidade, as sombras caem para trás, e rodar com o dedo muda
   o ponto de vista.

   TUDO ancorado em `#v3-...`. O theme-premium carrega DEPOIS desta
   folha e tem regras que chegam a (0,18,1); um id passa à frente de
   qualquer uma delas sem precisar de `!important` em cada linha.
   Para a regra universal do tema claro — que traz três ids dentro de
   `:not()` e um id não vence — o palco leva `ct-cor-propria`.

   A ordem em Z, de baixo para cima: madeira → trastes → marcas →
   cordas → dedos. Cada camada com o seu `translateZ`, que é o que
   faz a corda passar POR CIMA do traste e o dedo por cima da corda,
   como na vida real.
   ═══════════════════════════════════════════════════════════════════ */

#v3-palco {
    perspective: 1100px;
    perspective-origin: 50% 42%;
    padding: 28px 0 8px;
    touch-action: pan-y;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}

#v3-palco.v3-a-rodar {
    cursor: grabbing;
}

/* O braço. As variáveis são escritas pelo JS quando se arrasta. */
#v3-braco {
    --gx: 54deg;
    --gy: 0deg;
    --gz: -7deg;

    position: relative;
    width: 100%;
    height: 132px;
    transform-style: preserve-3d;
    transform: rotateX(var(--gx)) rotateY(var(--gy)) rotateZ(var(--gz));
    transition: transform .5s cubic-bezier(.22, .7, .3, 1);
}

#v3-braco.v3-sem-transicao {
    transition: none;
}

/* ── A madeira ──
   Três gradientes: o veio ao comprido, o escurecer nas bordas (que
   é o que dá a curvatura do braço), e o brilho do verniz. */
#v3-madeira,
#v3-braco .v3-madeira {
    position: absolute;
    inset: 0;
    border-radius: 6px 3px 3px 6px;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, 0) 16%,
            rgba(255, 255, 255, .07) 46%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, .4) 100%),
        repeating-linear-gradient(92deg,
            rgba(0, 0, 0, .05) 0 3px, rgba(255, 255, 255, .02) 3px 7px),
        linear-gradient(96deg, #4a2f1b 0%, #6b452a 34%, #5b3a22 68%, #3f2716 100%);
    box-shadow:
        0 22px 34px rgba(0, 0, 0, .5),
        inset 0 1px 0 rgba(255, 255, 255, .09);
}

/* ── Pestana e trastes ── */
#v3-braco .v3-pestana {
    position: absolute;
    left: 0;
    top: -1%;
    width: 7px;
    height: 102%;
    border-radius: 2px;
    background: linear-gradient(180deg, #f3ead6, #cdbf9f 55%, #a4967a);
    transform: translateZ(3px);
    box-shadow: 1px 0 3px rgba(0, 0, 0, .45);
}

#v3-braco .v3-traste {
    position: absolute;
    top: 2%;
    width: 2.5px;
    height: 96%;
    margin-left: -1.25px;
    border-radius: 1px;
    background: linear-gradient(180deg, #d8dde4, #9aa3ad 45%, #6f7883);
    transform: translateZ(2px);
    box-shadow: 1px 0 2px rgba(0, 0, 0, .38);
}

/* ── Marcas de posição ── */
#v3-braco .v3-marca {
    position: absolute;
    top: 50%;
    width: 11px;
    height: 11px;
    margin: -5.5px 0 0 -5.5px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fdfaf2, #cfc6ae 60%, #9c9179);
    transform: translateZ(1px);
    opacity: .82;
}

/* Na 12.ª casa são duas, uma acima e outra abaixo do centro. */
#v3-braco .v3-marca-a { top: 30%; }
#v3-braco .v3-marca-b { top: 70%; }

/* ── As cordas ──
   Levantadas 9 px acima da madeira: é essa distância que se vê como
   sombra quando o braço roda, e é o que faz isto parecer um objecto
   em vez de um desenho. */
#v3-braco .v3-corda {
    position: absolute;
    left: 4px;
    right: 0;
    border-radius: 2px;
    background: linear-gradient(180deg, #fff 0%, #cfd6de 30%, #8d97a3 70%, #5c646e 100%);
    transform: translateZ(9px);
    box-shadow: 0 3px 5px rgba(0, 0, 0, .5);
    transition: filter .12s ease, box-shadow .12s ease;
}

/* Corda a soar. Não se anima a posição — anima-se o brilho: a
   vibração real é rápida de mais para se ver, e sacudir a linha
   ficava a parecer defeito de desenho. */
#v3-braco .v3-corda.v3-viva {
    filter: brightness(1.7) saturate(1.2);
    box-shadow: 0 0 10px rgba(212, 175, 55, .85), 0 3px 5px rgba(0, 0, 0, .5);
}

/* ── Os dedos ── */
#v3-braco .v3-dedos {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    pointer-events: none;
}

#v3-braco .v3-dedo {
    position: absolute;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #f0d98a, #d4af37 52%, #a8862a);
    border: 1px solid rgba(255, 255, 255, .38);
    transform: translateZ(15px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .55);
    animation: v3-pousar .28s cubic-bezier(.3, 1.5, .5, 1) both;
}

@keyframes v3-pousar {
    from { transform: translateZ(46px) scale(1.5); opacity: 0; }
    to   { transform: translateZ(15px) scale(1);   opacity: 1; }
}

/* Barra da pestana. */
#v3-braco .v3-pestana-dedo {
    position: absolute;
    width: 17px;
    margin-left: -8.5px;
    border-radius: 9px;
    background: linear-gradient(180deg, #f0d98a, #d4af37 50%, #a8862a);
    border: 1px solid rgba(255, 255, 255, .32);
    transform: translateZ(14px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .55);
}

/* Corda solta e corda abafada, à esquerda da pestana. */
#v3-braco .v3-solta,
#v3-braco .v3-x {
    position: absolute;
    left: -20px;
    width: 15px;
    height: 15px;
    margin-top: -7.5px;
    transform: translateZ(10px);
    font: 700 14px/15px "Inter", system-ui, sans-serif;
    text-align: center;
}

#v3-braco .v3-solta {
    border: 2px solid #7fd4a0;
    border-radius: 50%;
    box-sizing: border-box;
}

#v3-braco .v3-x {
    color: #e2686b;
}

/* ═══════════════════════════════════════════════════════════════════
   O RESTO DA PÁGINA
   ═══════════════════════════════════════════════════════════════════ */

#v3-cabeca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

#v3-acorde {
    font: 900 clamp(2rem, 9vw, 3.2rem)/1 "Inter", system-ui, sans-serif;
    color: var(--ct-gold);
    letter-spacing: -.02em;
    margin: 0;
}

#v3-dica {
    font-size: .9rem;
    opacity: .75;
    margin: 2px 0 0;
}

/* ── O painel de resposta ──
   Três estados e três cores. `-painel` não colide com nenhuma das
   regras por sufixo do tema (que apanham -card, -item, -box, -panel…
   e sim, `-panel` em inglês está lá; `-painel` não). */
#v3-resposta {
    min-height: 92px;
    border-radius: 14px;
    padding: 14px 16px;
    border: 1px solid var(--ct-border);
    background: var(--ct-surface-2, rgba(255, 255, 255, .04));
    transition: border-color .2s ease, background .2s ease;
}

#v3-resposta.v3-certo {
    border-color: rgba(127, 212, 160, .55);
    background: rgba(127, 212, 160, .1);
}

#v3-resposta.v3-quase {
    border-color: rgba(212, 175, 55, .5);
    background: rgba(212, 175, 55, .09);
}

#v3-estado {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 800;
    font-size: 1.02rem;
    margin: 0 0 8px;
}

#v3-resposta.v3-certo #v3-estado { color: #7fd4a0 !important; }
#v3-resposta.v3-quase #v3-estado { color: var(--ct-gold) !important; }

#v3-avisos {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}

#v3-avisos li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .9rem;
    line-height: 1.4;
}

#v3-avisos li i {
    flex: none;
    margin-top: .2em;
    color: var(--ct-gold);
    font-size: .8em;
}

/* ── Medidor de sinal ──
   Existe por uma razão prática: quando nada acontece, a primeira
   pergunta é sempre "ele está a ouvir-me?". Isto responde sem
   ninguém perguntar. */
#v3-nivel {
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
    margin-top: 10px;
}

#v3-nivel i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--ct-gold-deep), var(--ct-gold));
    transition: width .08s linear;
}

/* ── Controlos ── */
#v3-controlos {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 16px 0 6px;
}

.v3-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--ct-gold-line);
    background: transparent;
    color: var(--ct-gold) !important;
    border-radius: 11px;
    padding: 10px 16px;
    font: 700 .92rem "Inter", system-ui, sans-serif;
    cursor: pointer;
    transition: background .16s ease, transform .12s ease;
}

.v3-btn:hover { background: var(--ct-gold-glow); }
.v3-btn:active { transform: scale(.97); }

.v3-btn.v3-forte {
    background: var(--ct-gold);
    border-color: var(--ct-gold);
    color: #12171f !important;
}

.v3-btn.v3-forte:hover { filter: brightness(1.08); }

.v3-btn[disabled] { opacity: .45; cursor: default; }

/* ── Escolher acorde ── */
#v3-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.v3-ac {
    border: 1px solid var(--ct-border);
    background: transparent;
    border-radius: 9px;
    padding: 7px 12px;
    font: 700 .86rem "Inter", system-ui, sans-serif;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.v3-ac:hover { border-color: var(--ct-gold-line); }

.v3-ac.v3-agora {
    border-color: var(--ct-gold);
    background: var(--ct-gold-glow);
    color: var(--ct-gold) !important;
}

/* ── O que o microfone ouviu ── */
#v3-ouvido {
    font-size: .84rem;
    opacity: .62;
    margin-top: 10px;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
    #v3-braco { height: 108px; }
    #v3-palco { perspective: 760px; }
    #v3-braco .v3-dedo { width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px; }
}

@media (prefers-reduced-motion: reduce) {
    #v3-braco { transition: none; }
    #v3-braco .v3-dedo { animation: none; }
}