:root {
  --fundo: #05060a;
  --texto: #e9edf7;
  --dim: #8b94aa;
  --vidro: rgba(255, 255, 255, 0.06);
  --borda: rgba(255, 255, 255, 0.14);
  --fonte: "Bahnschrift", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
}
#paredao { position: fixed; inset: 0; display: block; }

/* ---------- topo ---------- */
.topo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  transition: opacity 0.6s;
}
.marca h1 {
  margin: 0; font-size: clamp(15px, 1.6vw, 22px); font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.marca p {
  margin: 4px 0 0; font-size: clamp(10px, 1vw, 13px); letter-spacing: 0.08em; color: var(--dim);
}
.marca p.direitos { margin-top: 2px; font-size: 11px; letter-spacing: 0.06em; }
.marca p.direitos a { color: inherit; text-underline-offset: 2px; }
.marca p.direitos a:hover { color: var(--texto); }
.ferramentas { display: flex; align-items: center; gap: 8px; flex-shrink: 0; transition: opacity 0.6s; }
.ferramentas button, .volume {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px;
  color: var(--texto); background: var(--vidro); border: 1px solid var(--borda); border-radius: 999px;
  font: inherit; font-size: 12px; letter-spacing: 0.04em; cursor: pointer;
}
.ferramentas button:hover { background: rgba(255, 255, 255, 0.12); }
#btnSerial i { width: 8px; height: 8px; border-radius: 50%; background: #6b7388; }
#btnSerial[data-ok="1"] i { background: #5be37d; box-shadow: 0 0 8px #5be37d; }
.volume { cursor: default; padding: 0 14px; }
.volume input { width: 84px; accent-color: #ffc400; }
button:focus-visible, input:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- ficha da espécie ---------- */
.ficha {
  --cor: #fff; --brilho: #fff;
  position: fixed; z-index: 2; pointer-events: none;
  left: clamp(24px, 4vw, 64px); top: 50%; width: min(26vw, 400px);
  padding-left: 18px; border-left: 2px solid var(--cor);
  box-shadow: -8px 0 24px -12px var(--cor);
  opacity: 0; transform: translate(-14px, -50%);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.ficha.visivel { opacity: 1; transform: translate(0, -50%); }
.ficha .tipo {
  margin: 0 0 8px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brilho);
}
.ficha h2 {
  margin: 0; font-size: clamp(30px, 3.8vw, 56px); line-height: 1.02; font-weight: 600;
  color: #fff; text-shadow: 0 0 22px var(--cor);
}
.ficha .cient { margin: 8px 0 14px; font-style: italic; color: var(--dim); font-size: clamp(13px, 1.2vw, 16px); }
.ficha .texto { margin: 0; line-height: 1.5; font-size: clamp(14px, 1.3vw, 18px); color: #cdd3e3; }
.ficha .cred { margin: 12px 0 0; font-size: 11px; letter-spacing: 0.04em; line-height: 1.4; color: var(--dim); }

/* ---------- flauta ---------- */
.flauta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 max(12px, env(safe-area-inset-right)) max(26px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
.dica {
  margin: 0 0 8px; height: 22px; line-height: 22px; font-size: 14px; letter-spacing: 0.08em; color: #d9deec;
  opacity: 0; transition: opacity 0.6s; text-align: center;
}
.dica.visivel { opacity: 1; animation: respira 2.6s ease-in-out infinite; }
@keyframes respira { 50% { opacity: 0.55; } }
.banco-info { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.banco-info b { color: var(--texto); font-weight: 600; }
.flauta.troca .banco-info b:first-of-type { animation: pop 0.45s ease; }
@keyframes pop { 40% { transform: scale(1.7); color: #8ee01c; } }

.corpo {
  --alt: clamp(54px, 8.4vw, 78px);
  --larg: min(94vw, 880px);
  position: relative; display: flex; align-items: center; justify-content: space-between;
  width: var(--larg); height: var(--alt); margin-bottom: 50px;
  padding: 0 calc(var(--larg) * 0.075) 0 calc(var(--larg) * 0.15);
  border-radius: 999px;
  background: linear-gradient(#f0cd55, #d9a41c 38%, #b07c0e 76%, #6f4a06);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.45), inset 0 -3px 6px rgba(0, 0, 0, 0.35),
              0 10px 34px rgba(0, 0, 0, 0.65), 0 0 calc(10px + 50px * var(--n, 0)) rgba(255, 190, 40, calc(0.08 + 0.3 * var(--n, 0)));
}
.bocal, .tampa { position: absolute; top: 0; bottom: 0; }
.bocal { left: 0; width: 9.5%; border-radius: 999px 0 0 999px; background: linear-gradient(#e08a1c, #a85f0a 60%, #6b3a04); }
.tampa { right: 0; width: 4.5%; border-radius: 0 999px 999px 0; background: linear-gradient(#c98314, #8a520a 60%, #55300a); }

.furo {
  --d: calc(var(--alt) * 0.74);
  position: relative; flex: none; width: var(--d); height: var(--d); padding: 0; border: 0; border-radius: 50%;
  background-color: var(--c);
  background-image: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%),
                    radial-gradient(circle at 50% 60%, transparent 55%, rgba(0, 0, 0, 0.35));
  box-shadow: 0 0 0 clamp(3px, 0.5vw, 5px) #3a2503, 0 3px 8px rgba(0, 0, 0, 0.5);
  cursor: pointer; transition: transform 0.12s ease, filter 0.3s;
}
.furo.pequeno { --d: calc(var(--alt) * 0.56); }
.furo:active { transform: scale(0.92); }
.furo.ativo {
  filter: brightness(1.25) saturate(1.1);
  box-shadow: 0 0 0 clamp(3px, 0.5vw, 5px) #3a2503,
              0 0 calc(14px + 44px * var(--n, 0)) calc(2px + 8px * var(--n, 0)) var(--c);
}
.rotulo {
  position: absolute; top: calc(100% + clamp(10px, 1.4vw, 14px)); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px; white-space: nowrap; pointer-events: none;
}
.rotulo b {
  font-size: clamp(9px, 1.05vw, 12px); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c); filter: brightness(1.35);
}
.rotulo i { font-style: normal; font-size: clamp(10.5px, 1.35vw, 15px); color: var(--texto); }


/* ---------- layout vertical (celular / tela quadrada) ---------- */
.vertical .ficha {
  left: 20px; right: 20px; width: auto; top: calc(64px + env(safe-area-inset-top)); transform: translateY(-10px);
  border-left: 0; border-top: 0; box-shadow: none; padding: 0; text-align: center;
}
.vertical .ficha.visivel { transform: none; }
.vertical .ficha h2 { font-size: 30px; }
.vertical .ficha .tipo { margin-bottom: 4px; }
.vertical .ficha .cient { margin: 4px 0 6px; }
.vertical .ficha .texto { font-size: 13px; line-height: 1.4; }
.vertical .marca p:not(.direitos) { display: none; }
.vertical .marca p.direitos { margin-top: 3px; font-size: 10px; letter-spacing: 0.04em; white-space: nowrap; }
.vertical .marca p.direitos .so-tela-larga { display: none; } /* no celular só o © (a ficha já traz os créditos) */
.vertical .ficha .cred { margin-top: 6px; }
.vertical .volume input { width: 56px; }
@media (max-width: 520px) {
  #btnSerial span { display: none; }
  #btnSerial { padding: 0 11px; }
  .ferramentas { gap: 6px; }
}

/* ---------- modo quiosque (telão) ---------- */
.quiosque.parado { cursor: none; }
.quiosque.parado .ferramentas { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .dica.visivel { animation: none; }
  .ficha, .ficha.visivel { transition: opacity 0.2s; }
}

/* ---------- flauta de luz (TESTE: abra com ?flauta=1) ----------
   Tubo fino de vidro escuro com contorno e furos em anéis luminosos, na mesma linguagem do painel de LED.
   Mais baixa que a dourada, então o desenho no paredão ganha espaço. */
.flauta-luz .corpo {
  --alt: clamp(52px, 5.2vw, 60px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
              0 0 calc(12px + 36px * var(--n, 0)) rgba(255, 255, 255, calc(0.03 + 0.10 * var(--n, 0)));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* pontas: só um esmaecer de luz, sem blocos nem linhas retas */
.flauta-luz .bocal { width: 12%; background: linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0)); }
.flauta-luz .tampa { width: 6%; background: linear-gradient(270deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)); }
.flauta-luz .furo {
  --d: calc(var(--alt) * 0.7);
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 26%, transparent) 0%, transparent 72%);
  box-shadow: inset 0 0 0 2px var(--c), 0 0 calc(6px + 14px * var(--n, 0)) -2px var(--c);
}
.flauta-luz .furo.pequeno { --d: calc(var(--alt) * 0.52); }
.flauta-luz .furo.ativo {
  filter: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 88%, #fff) 0%, var(--c) 72%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55),
              0 0 calc(14px + 40px * var(--n, 0)) calc(1px + 6px * var(--n, 0)) var(--c);
}
.flauta-luz .rotulo { top: calc(100% + 12px); }

/* ---------- flauta de capim-dourado (TESTE: abra com ?flauta=2) ----------
   Tubo de palha fosca, com as fibras correndo ao longo e costura de fio escuro nas pontas (artesanato do Cerrado).
   Furos são cavidades escuras que acendem de dentro, na cor da família. */
.flauta-cerrado .corpo {
  --alt: clamp(54px, 5.8vw, 66px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 38%, rgba(60, 30, 0, 0) 58%, rgba(60, 30, 0, 0.42) 100%),
    repeating-linear-gradient(180deg, rgba(110, 70, 10, 0.20) 0 1px, rgba(110, 70, 10, 0) 1px 3px),
    repeating-linear-gradient(180deg, rgba(255, 236, 170, 0.22) 0 1px, rgba(255, 236, 170, 0) 1px 5px),
    linear-gradient(180deg, #e8c96f, #c8993a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 26px rgba(0, 0, 0, 0.55),
              0 0 calc(10px + 40px * var(--n, 0)) rgba(240, 190, 70, calc(0.06 + 0.28 * var(--n, 0)));
}
.flauta-cerrado .bocal, .flauta-cerrado .tampa {
  background: repeating-linear-gradient(115deg, #4a2d0c 0 2px, #b78630 2px 7px);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.35);
}
.flauta-cerrado .bocal { width: 8%; }
.flauta-cerrado .tampa { width: 5%; }
.flauta-cerrado .furo {
  --d: calc(var(--alt) * 0.62);
  background: radial-gradient(circle at 50% 38%, #2a1808 0%, #130a03 70%);
  box-shadow: 0 0 0 3px #7a5420,
              inset 0 0 0 2px color-mix(in srgb, var(--c) 75%, #000),
              inset 0 4px 8px rgba(0, 0, 0, 0.8),
              0 0 calc(4px + 12px * var(--n, 0)) -1px var(--c);
}
.flauta-cerrado .furo.pequeno { --d: calc(var(--alt) * 0.46); }
.flauta-cerrado .furo.ativo {
  filter: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 80%, #fff) 0%, var(--c) 65%, color-mix(in srgb, var(--c) 60%, #000) 100%);
  box-shadow: 0 0 0 3px #7a5420, 0 0 calc(16px + 44px * var(--n, 0)) calc(2px + 8px * var(--n, 0)) var(--c);
}
.flauta-cerrado .rotulo { top: calc(100% + 12px); }

/* ---------- flauta de taquara (TESTE: abra com ?flauta=4) ----------
   O corpo, as amarrações de algodão e os cordões são desenhados em SVG por js/flauta-taquara.js.
   Aqui ficam só os furos (cavidades escuras com aro da cor da família, que acendem de dentro) e o espaço do cordão. */
.flauta-taquara .corpo {
  --alt: clamp(58px, 6.2vw, 72px);
  padding-right: calc(var(--larg) * 0.115);   /* deixa a ponta direita livre para os cordões */
  background: none; box-shadow: none; border-radius: 0;
}
.flauta-taquara .bocal, .flauta-taquara .tampa { display: none; }
.flauta-taquara .taquara {
  position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none;
  filter: drop-shadow(0 0 calc(6px + 22px * var(--n, 0)) rgba(255, 190, 90, calc(0.04 + 0.24 * var(--n, 0))));
}
.flauta-taquara .furo {
  --d: calc(var(--alt) * 0.5);
  background: radial-gradient(circle at 50% 38%, #241506 0%, #0e0702 80%);
  box-shadow: 0 0 0 2px #4a3416, 0 0 0 3.5px rgba(255, 240, 200, 0.2),
              inset 0 0 0 2px color-mix(in srgb, var(--c) 80%, #000),
              inset 0 3px 6px rgba(0, 0, 0, 0.85),
              0 0 calc(3px + 10px * var(--n, 0)) 0 var(--c);
}
.flauta-taquara .furo.pequeno { --d: calc(var(--alt) * 0.38); }
.flauta-taquara .furo.ativo {
  filter: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 82%, #fff) 0%, var(--c) 66%, color-mix(in srgb, var(--c) 62%, #000) 100%);
  box-shadow: 0 0 0 2px #4a3416, 0 0 0 3.5px rgba(255, 240, 200, 0.28),
              0 0 calc(16px + 40px * var(--n, 0)) calc(2px + 7px * var(--n, 0)) var(--c);
}
.flauta-taquara .rotulo { top: calc(100% + 12px); }
/* transversal (?flauta=5): abre espaço à esquerda para a cabeça fechada e o furo de soprar */
.flauta-transversal .corpo { padding-left: calc(var(--larg) * 0.24); }

/* ---------- flauta transversal de concerto (TESTE: abra com ?flauta=6) ----------
   O tubo, a cabeça, as juntas e as barras são desenhados em SVG por js/flauta-concerto.js.
   Aqui ficam só as chaves: cada botão vira uma chave com aro de prata e um "pad" escuro com aro da cor da família,
   que acende por dentro quando toca. */
.flauta-concerto .corpo {
  --alt: clamp(58px, 6.2vw, 72px);
  padding-left: calc(var(--larg) * 0.24);     /* espaço para a coroa, a cabeça e a placa do furo de soprar */
  padding-right: calc(var(--larg) * 0.1);     /* espaço para o pé */
  background: none; box-shadow: none; border-radius: 0;
}
.flauta-concerto .bocal, .flauta-concerto .tampa { display: none; }
.flauta-concerto .concerto {
  position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none;
  filter: drop-shadow(0 0 calc(6px + 20px * var(--n, 0)) rgba(170, 210, 255, calc(0.04 + 0.22 * var(--n, 0))));
}
.flauta-concerto .furo {
  --d: calc(var(--alt) * 0.5);
  background: radial-gradient(ellipse at 35% 25%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 42%),
              radial-gradient(circle at 38% 30%, #34404f 0%, #0b0f14 72%);
  box-shadow: 0 0 0 2px #707a88, 0 0 0 4px #eef2f7, 0 0 0 5px #4f5966,
              inset 0 0 0 2px color-mix(in srgb, var(--c) 78%, #000),
              inset 0 3px 6px rgba(0, 0, 0, 0.8),
              0 3px 6px 5px rgba(0, 0, 0, 0.3);
}
.flauta-concerto .furo.pequeno { --d: calc(var(--alt) * 0.38); }
.flauta-concerto .furo.ativo {
  filter: none;
  background: radial-gradient(ellipse at 35% 25%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 45%),
              radial-gradient(circle at 38% 30%, color-mix(in srgb, var(--c) 70%, #fff) 0%, var(--c) 55%, color-mix(in srgb, var(--c) 60%, #000) 100%);
  box-shadow: 0 0 0 2px #707a88, 0 0 0 4px #eef2f7, 0 0 0 5px #4f5966,
              0 0 calc(16px + 40px * var(--n, 0)) calc(5px + 7px * var(--n, 0)) var(--c);
}
.flauta-concerto .rotulo { top: calc(100% + 14px); }

/* ---------- flauta-galho (TESTE: abra com ?flauta=3) ----------
   O tubo é um galho: casca com veios, uma ponta cortada com anéis de crescimento e o outro lado afinando num ramo de ipê.
   Os furos são nós de madeira que acendem de dentro, na cor da família. O galho é um SVG esticado (veios por feTurbulence). */
.flauta-galho .corpo {
  --alt: clamp(58px, 6.4vw, 72px);
  padding-right: calc(var(--larg) * 0.115);   /* o último furo fica longe da ponta, onde o galho afina */
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23a07444'/%3E%3Cstop offset='.3' stop-color='%2373502c'/%3E%3Cstop offset='.72' stop-color='%234b311b'/%3E%3Cstop offset='1' stop-color='%232f1d0e'/%3E%3C/linearGradient%3E%3CradialGradient id='c' cx='.4' cy='.4' r='.75'%3E%3Cstop offset='0' stop-color='%23f1d6a8'/%3E%3Cstop offset='1' stop-color='%23c99c66'/%3E%3C/radialGradient%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .3' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .10 0 0 0 0 .06 0 0 0 0 .02 2.4 0 0 0 -.95'/%3E%3C/filter%3E%3CclipPath id='f'%3E%3Cpath d='M 40 13 C 140 9, 230 17, 340 12 C 450 7, 520 16, 640 11 C 760 6, 860 15, 940 28 L 985 40 L 985 60 L 940 72 C 860 85, 760 94, 640 89 C 520 84, 450 95, 340 88 C 230 83, 140 92, 40 87 C 24 70, 24 30, 40 13 Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath d='M 40 13 C 140 9, 230 17, 340 12 C 450 7, 520 16, 640 11 C 760 6, 860 15, 940 28 L 985 40 L 985 60 L 940 72 C 860 85, 760 94, 640 89 C 520 84, 450 95, 340 88 C 230 83, 140 92, 40 87 C 24 70, 24 30, 40 13 Z' fill='url(%23g)'/%3E%3Cg clip-path='url(%23f)'%3E%3Crect width='1000' height='100' filter='url(%23n)' opacity='.85'/%3E%3C/g%3E%3Cpath d='M 60 22 C 300 15, 560 22, 900 34' stroke='%23d2a56d' stroke-opacity='.28' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='40' cy='50' rx='14' ry='37' fill='url(%23c)' stroke='%237a5230' stroke-width='2'/%3E%3Cellipse cx='40' cy='50' rx='9' ry='24' fill='none' stroke='%23a8793f' stroke-width='1.2'/%3E%3Cellipse cx='40' cy='50' rx='4.5' ry='12' fill='none' stroke='%23a8793f' stroke-width='1.2'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 9px 8px rgba(0, 0, 0, 0.55));
}
.flauta-galho .bocal, .flauta-galho .tampa { display: none; }
.flauta-galho .furo {
  --d: calc(var(--alt) * 0.58);
  background: radial-gradient(circle at 50% 40%, #241407 0%, #0f0702 75%);
  box-shadow: 0 0 0 2px #2c1a0b, 0 0 0 4px #8a6038, 0 0 0 6px #3a2410,
              inset 0 0 0 2px color-mix(in srgb, var(--c) 75%, #000),
              inset 0 3px 6px rgba(0, 0, 0, 0.85),
              0 0 calc(4px + 12px * var(--n, 0)) 1px var(--c);
}
.flauta-galho .furo.pequeno { --d: calc(var(--alt) * 0.42); }
.flauta-galho .furo.ativo {
  filter: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 80%, #fff) 0%, var(--c) 65%, color-mix(in srgb, var(--c) 60%, #000) 100%);
  box-shadow: 0 0 0 2px #2c1a0b, 0 0 0 4px #8a6038, 0 0 0 6px #3a2410,
              0 0 calc(16px + 44px * var(--n, 0)) calc(2px + 8px * var(--n, 0)) var(--c);
}
.flauta-galho .rotulo { top: calc(100% + 16px); }
/* ramo de ipê: a base do galhinho encaixa na ponta direita do galho e a folhagem sobe e abre para fora */
.flauta-galho .ramo {
  position: absolute; z-index: 2; pointer-events: none;
  height: calc(var(--alt) * 4.3); width: auto;
  left: calc(100% - 10px); top: 50%;
  transform: translateY(-94%);
}
@media (max-width: 700px) {   /* no celular não há espaço à direita: o ramo vira e cresce para dentro, acima do galho */
  .flauta-galho .ramo {
    height: calc(var(--alt) * 1.5);
    left: auto; right: -4px;
    transform: translateY(-94%) scaleX(-1);
  }
  .flauta-galho .dica { margin-bottom: 40px; }   /* o texto sobe para não ficar atrás do ramo */
}

/* versao hospedada: a flauta fisica (Web Serial) nao se aplica aqui */
#btnSerial { display: none; }