:root {
  --c1: #0b1026; --c2: #1b2552; --c3: #3a2c6b;
  --hi: #ffe08f; --lo: rgba(255, 255, 255, .55); --txt: #f5f3ff;
  --acc: #ff9f6b;
  --fs: clamp(1.45rem, 5.2vw, 3rem);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--txt);
  background: linear-gradient(170deg, var(--c1) 0%, var(--c2) 55%, var(--c3) 100%);
  transition: background 2s linear;
  -webkit-tap-highlight-color: transparent;
}
body[data-aba="manifesto"] { --c1: #05070f; --c2: #111a33; --c3: #26304f; --hi: #cfe3ff; }
body[data-aba="lado"] { --c1: #1a0612; --c2: #4a0f2e; --c3: #8a2346; --hi: #ffb3c7; --acc: #ff6b9a; }
body[data-aba="mode"] { --c1: #05010f; --c2: #160a3a; --c3: #3a0b55; --hi: #7df9ff; --acc: #ff4fd8; }

#app {
  height: 100dvh; display: flex; flex-direction: column;
  padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  gap: 8px; max-width: 1100px; margin: 0 auto;
}

header { display: flex; flex-direction: column; align-items: center; gap: 8px; }
h1 { font-size: clamp(1rem, 3.6vw, 1.35rem); font-weight: 800; letter-spacing: .02em; opacity: .9; }
#abas { display: flex; gap: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; background: rgba(255, 255, 255, .08); padding: 4px; border-radius: 999px; }
#abas button {
  border: 0; background: none; color: var(--txt); font: inherit; font-size: clamp(.78rem, 3.2vw, .95rem); font-weight: 600;
  padding: 8px clamp(8px, 2.2vw, 18px); border-radius: 999px; cursor: pointer; opacity: .7; white-space: nowrap;
}
#abas button[aria-selected="true"] { background: var(--txt); color: var(--c1); opacity: 1; }

/* pista: só no Mix (a corredora do site original, idêntica) */
#pista { display: none; }
body[data-aba="mix"] #pista { display: block; }
#corrida { display: block; width: 100%; height: 36vh; overflow: hidden; }
body[data-aba="mix"] #titulo { display: none; }
body[data-aba="mix"] #palco { gap: 0; }
#marcas text { font: 500 13px ui-monospace, "SFMono-Regular", Menlo, monospace; fill: rgba(236, 232, 225, .55); }
#km { font: 700 15px "Sora", system-ui, sans-serif; fill: var(--hi); paint-order: stroke; stroke: rgba(0, 0, 0, .35); stroke-width: 3px; }

/* palco + karaokê */
#palco { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(10px, 3vh, 28px); text-align: center; }
#titulo { text-shadow: 0 1px 8px rgba(10, 6, 30, .5); display: flex; flex-direction: column; gap: 2px; }
#cap { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--acc); font-weight: 600; min-height: 1em; }
#musica { font-size: clamp(1rem, 4vw, 1.4rem); font-weight: 800; }
#karaoke { filter: drop-shadow(0 2px 10px rgba(10, 6, 30, .55)) drop-shadow(0 0 2px rgba(10, 6, 30, .5)); display: flex; flex-direction: column; gap: clamp(6px, 1.6vh, 14px); min-height: 0; }
.l { font-weight: 600; line-height: 1.22; transition: opacity .25s, transform .25s; overflow-wrap: anywhere; }
.l.ant { font-size: calc(var(--fs) * .52); opacity: .38; min-height: 1.3em; }
.l.atual { font-size: var(--fs); font-weight: 800; min-height: 2.5em; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; column-gap: .28em; }
.l.prox { font-size: calc(var(--fs) * .62); opacity: .62; min-height: 1.3em; }
.l.prox2 { font-size: calc(var(--fs) * .5); opacity: .35; min-height: 1.3em; }
.w {
  --p: 0;
  background: linear-gradient(90deg, var(--hi) calc(var(--p) * 100%), var(--lo) calc(var(--p) * 100%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
}
.w.cantada { text-shadow: 0 0 18px color-mix(in srgb, var(--hi) 45%, transparent); }
.espera { opacity: .55; font-size: calc(var(--fs) * .7); }
.pontos { display: inline-flex; gap: .3em; margin-left: .3em; }
.pontos i { width: .32em; height: .32em; border-radius: 50%; background: var(--hi); opacity: .2; display: inline-block; align-self: center; }
.pontos i.on { opacity: 1; }

/* faixas do mix */
#faixas { display: none; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
#faixas::-webkit-scrollbar { display: none; }
body[data-aba="mix"] #faixas { display: flex; }
#faixas button {
  flex: 0 0 auto; scroll-snap-align: center; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06);
  color: var(--txt); font: inherit; font-size: .78rem; padding: 7px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
#faixas button.set { font-weight: 800; }
#faixas button.no-set { border-color: var(--hi); color: var(--hi); }
#faixas button.ativo { background: var(--txt); color: var(--c1); border-color: var(--txt); }

/* controles */
#controles { display: grid; grid-template-columns: auto auto auto 1fr auto; align-items: center; gap: 8px; }
#controles button {
  border: 0; background: rgba(255, 255, 255, .1); color: var(--txt); font: inherit; font-weight: 600; font-size: .85rem;
  height: 42px; min-width: 42px; padding: 0 10px; border-radius: 999px; cursor: pointer;
}
#controles #play { height: 54px; width: 54px; font-size: 1.3rem; background: var(--txt); color: var(--c1); }
#barra { min-width: 0; }
#seek { width: 100%; accent-color: var(--hi); height: 22px; }
#tempos { display: flex; justify-content: space-between; font-size: .7rem; opacity: .65; font-variant-numeric: tabular-nums; }

/* letra inteira */
#painel {
  position: fixed; inset: 0; z-index: 10; background: color-mix(in srgb, var(--c1) 94%, transparent);
  backdrop-filter: blur(8px); display: flex; flex-direction: column;
  padding: max(14px, env(safe-area-inset-top)) 18px max(14px, env(safe-area-inset-bottom));
}
#painel[hidden] { display: none; }
#painel .topo { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; }
#painel .topo button { border: 0; background: rgba(255, 255, 255, .12); color: var(--txt); width: 40px; height: 40px; border-radius: 50%; font-size: 1rem; cursor: pointer; }
#lista { list-style: none; overflow-y: auto; flex: 1; text-align: center; padding: 30vh 0; }
#lista li { padding: 7px 4px; font-size: clamp(1rem, 4vw, 1.3rem); opacity: .45; cursor: pointer; transition: opacity .2s, color .2s; }
#lista li.faixa { font-size: .75rem; text-transform: uppercase; letter-spacing: .14em; color: var(--acc); opacity: .9; padding-top: 22px; cursor: default; }
#lista li.agora { opacity: 1; color: var(--hi); font-weight: 800; }

/* Fran Mode: sem letra, só as firulas no ritmo */
#firulas { display: none; }
body[data-aba="mode"] #firulas {
  display: block; flex: 1; min-height: 0; width: 100%;
  /* bordas esfumadas: os anéis somem antes de bater no retângulo do canvas */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(transparent, #000 12%, #000 88%, transparent);
  mask-composite: intersect;
}
body[data-aba="mode"] #karaoke, body[data-aba="mode"] #letra { display: none; }
body[data-aba="mode"] #controles { grid-template-columns: auto auto auto 1fr; }

@media (max-height: 600px) { .l.prox2 { display: none; } #corrida { height: 30vh; } }