/* GERADO por prototipo/ferramentas/preparar_ui.py a partir de design/ui/danca-batalha.css. Não editar aqui. */
/* danca-batalha.css · interface fina da batalha de dança (v1.2), por cima do palco de danca-palco.js.
   Peças: frente a frente (.db-vs), vez (.db-vez), rondas (.db-rondas), anel do tempo (.db-anel), fita da rotina (.db-fita),
   almofadas (.db-almofadas > .db-pad). Sem pontos, barras nem juízes: a turma ganha sempre.
   Só tokens do jogo (index.html :root). Arte: design/saida/danca/icones-passos.png e batalha-ui.png (a 2x).
   Estilos: html[data-estilo] muda só formas (Pixel: cantos retos e sombra dura; Doce: redondo e macio; Estufa: papel e verde). */

.db { --db-a: #e8475e; --db-b: #4f8fe0; --db-r: var(--r-botao); --db-sombra: 0 3px 0 rgba(0, 0, 0, .28); --db-vidro: rgba(20, 16, 30, .62);
  --db-ico: url('../arte/danca/icones-passos.png');
  position: relative; font-family: var(--f-texto); color: #fff; display: grid; gap: 10px; }
.db * { box-sizing: border-box; }

/* frente a frente: duas metades a entrar dos lados, raio ao meio (sem "VS" escrito na imagem) */
.db-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.db-vs .lado { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--db-r); font: 700 1rem var(--f-titulo);
  background: var(--db-a); box-shadow: var(--db-sombra); animation: db-entra-a var(--ui-longo) var(--salto) both; }
.db-vs .lado.b { background: var(--db-b); flex-direction: row-reverse; text-align: right; animation-name: db-entra-b; }
.db-vs .lado img { width: 40px; height: 40px; image-rendering: pixelated; }
.db-vs .raio { width: 24px; height: 40px; background: url('../arte/danca/batalha-ui.png') -586px 0 / 612px auto; image-rendering: pixelated; }
@keyframes db-entra-a { from { transform: translateX(-40px); opacity: 0; } }
@keyframes db-entra-b { from { transform: translateX(40px); opacity: 0; } }

/* barra de cima: vez + rondas + anel */
.db-topo { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--db-r); background: var(--db-vidro); }
.db-vez { display: flex; align-items: center; gap: 8px; font: 700 1rem var(--f-titulo); min-width: 0; }
.db-vez .seta { width: 28px; height: 24px; border-radius: 6px; display: grid; place-items: center; background: var(--db-a); box-shadow: var(--db-sombra); }
.db-vez .seta::before { content: ''; border: 7px solid transparent; border-top: 9px solid #fff; transform: translateY(4px); }
.db-vez.b .seta { background: var(--db-b); }
.db-vez.outro { opacity: .78; }
.db-rondas { display: flex; gap: 6px; margin-left: auto; }
.db-rondas i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; opacity: .6; }
.db-rondas i.feita { background: var(--marca); border-color: var(--marca); opacity: 1; }
.db-rondas i.agora { background: #fff; opacity: 1; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
.db-anel { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--marca); display: grid; place-items: center; flex: none;
  animation: db-batida calc(60s / var(--bpm, 100)) var(--saida) infinite; }
.db-anel::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--marca); }
@keyframes db-batida { 0% { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(255, 227, 110, .35); } 60%, 100% { transform: scale(1); box-shadow: none; } }

/* fita da rotina: 8 casas */
.db-fita { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; padding: 8px; border-radius: var(--db-r); background: var(--db-vidro); }
.db-fita > * { height: 52px; border-radius: calc(var(--db-r) - 4px); border: 2px dashed rgba(255, 255, 255, .45); position: relative; }
.db-fita .cheia { --s: 1.5; border-style: solid; border-color: transparent; display: grid; place-items: center; }
.db-ic { --s: 2; width: calc(28px * var(--s)); height: calc(28px * var(--s)); image-rendering: pixelated;
  background: var(--db-ico) calc(var(--cx) * -28px * var(--s)) calc(var(--cy) * -28px * var(--s)) / calc(448px * var(--s)) auto no-repeat; }
.db-fita .db-ic { --s: 1.5; }
.db-fita .agora { outline: 3px solid var(--marca); outline-offset: 2px; transform: translateY(-3px); transition: transform var(--ui) var(--salto); }
.db-fita .cheia::after { content: attr(data-n); position: absolute; right: -4px; top: -6px; font: 700 .7rem var(--f-texto); background: var(--papel); color: var(--tinta);
  border-radius: 99px; padding: 0 5px; }

/* almofadas: 8 botões grandes com o ícone do passo e o nome; tecla em baixo */
.db-almofadas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.db-pad { --c: var(--db-a); min-height: 76px; border: 0; border-radius: var(--db-r); padding: 8px 8px 6px; cursor: pointer; display: grid; grid-template-columns: 56px 1fr;
  align-items: center; gap: 8px; text-align: left; background: color-mix(in srgb, var(--c) 30%, var(--papel)); color: var(--tinta); box-shadow: 0 4px 0 color-mix(in srgb, var(--c) 70%, #000);
  font: 700 .95rem var(--f-titulo); transition: transform var(--ui) var(--salto), box-shadow var(--ui); position: relative; }
.db-pad kbd { position: absolute; right: 6px; bottom: 4px; font: 700 .7rem var(--f-texto); color: var(--suave); }
.db-pad:active, .db-pad.carregada { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--c) 70%, #000); }
.db-pad.carregada { outline: 3px solid var(--marca); outline-offset: 2px; }
.db-pad:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.db-pad[disabled] { opacity: .45; filter: saturate(.3); cursor: default; }
.db-pad.breaking { --c: #e8475e; } .db-pad.popping { --c: #4f8fe0; } .db-pad.house { --c: #2f9a8f; }

/* dica curta da vez do outro */
.db-dica { text-align: center; font: 700 .95rem var(--f-titulo); padding: 4px 10px; border-radius: 99px; background: var(--db-vidro); justify-self: center; }

/* telemóvel: almofadas 4 x 2 por baixo do palco (já é a grelha); tirar o nome nos muito pequenos */
@media (max-width: 420px) { .db-pad { grid-template-columns: 1fr; justify-items: center; text-align: center; } .db-pad .nome { font-size: .75rem; } }
/* canhoto: almofadas do outro lado quando estão ao lado do palco */
.canhoto .db-almofadas.lado { order: -1; }

/* estilos */
html[data-estilo="pixel"] .db, .db.pixel { --db-r: 4px; --db-sombra: 0 3px 0 rgba(0, 0, 0, .45); }
html[data-estilo="pixel"] .db-anel, .db.pixel .db-anel { border-radius: 4px; }
html[data-estilo="pixel"] .db-anel::after, .db.pixel .db-anel::after { border-radius: 0; }
html[data-estilo="pixel"] .db-rondas i, .db.pixel .db-rondas i { border-radius: 2px; }
html[data-estilo="cute"] .db, .db.doce { --db-r: 20px; --db-vidro: rgba(74, 45, 61, .55); --db-sombra: 0 4px 0 rgba(74, 45, 61, .35); }
html[data-estilo="cute"] .db-pad, .db.doce .db-pad { background: color-mix(in srgb, var(--c) 22%, #fff7ee); }
.db.estufa { --db-r: 14px; --db-vidro: rgba(36, 58, 44, .6); --db-a: #d9776b; --db-b: #6b93b8; --db-sombra: 0 2px 6px rgba(36, 58, 44, .3); }
.db.estufa .db-pad { background: color-mix(in srgb, var(--c) 18%, #f6f1e4); box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 50%, #6b7a5a); }

/* calmo e menos movimento: nada pisca nem salta; o anel fica parado (a batida passa a ser um ponto que muda de cor) */
@media (prefers-reduced-motion: reduce) { .db *, .db *::after { animation: none !important; transition: none !important; } }
.calmo .db *, .calmo .db *::after { animation: none !important; transition: none !important; }
@media (max-width: 420px) { .db-fita .db-ic { --s: 1; } .db-fita { gap: 4px; padding: 6px; } }