/*
 * @file Aparência do design personalizado do streak (editor de overlay, beta).
 * Compartilhado entre o overlay (streak-overlay.html), a prévia da página
 * Streak e o palco do editor — mesmo CSS nos três (ver design-cena.js).
 *
 * Os efeitos são os mesmos do resto dos overlays (borda de luz em degradê,
 * borda girando, néon, faíscas, reflexo varrendo, halo) com nomes próprios
 * (dsg-…) pra não colidir com overlay-streak.css quando os dois carregam.
 * As cores vêm de --destaque e --contagem, as mesmas do streak.
 */
:root {
  --dsg-trofeu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z'/%3E%3C/svg%3E");
  --dsg-caveira: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2C6.9 2 3 5.6 3 10.2c0 2.6 1.2 4.6 3 5.9V19c0 .6.4 1 1 1h1.5v-2.2H10V20h4v-2.2h1.5V20H17c.6 0 1-.4 1-1v-2.9c1.8-1.3 3-3.3 3-5.9C21 5.6 17.1 2 12 2zM8.6 14.2a2.1 2.1 0 1 1 0-4.2 2.1 2.1 0 0 1 0 4.2zm6.8 0a2.1 2.1 0 1 1 0-4.2 2.1 2.1 0 0 1 0 4.2zM12 14.6l-1.2 2h2.4z'/%3E%3C/svg%3E");
  --dsg-raio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 2 4 13.5h6.5L9.5 22 20 9.5h-6.6z'/%3E%3C/svg%3E");
  --dsg-estrela: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E");
}

@property --dsg-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes dsg-giro { to { --dsg-ang: 360deg; } }
@keyframes dsg-pop { 0% { transform: scale(1); } 35% { transform: scale(1.3); filter: brightness(1.5); } 100% { transform: scale(1); } }
@keyframes dsg-halo { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes dsg-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes dsg-faisca { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 0 -64px, 0 -64px, 0 -64px; } }
@keyframes dsg-varre { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes dsg-pisca { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes dsg-respira {
  0%, 100% { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--destaque) 35%, transparent)); }
  50% { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--destaque) 70%, transparent)); }
}

/* Palco: no editor é a prancheta de 800×450; no overlay e na prévia o
   design-cena.js ajusta o tamanho ao conteúdo (modo recortar). */
.dsg-palco { position: relative; width: 800px; height: 450px; overflow: hidden; transform-origin: 0 0; }

.dsg-el { position: absolute; font-family: 'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif; color: #fff; }
.dsg-el.dsg-oculto { display: none; }
.dsg-cont { position: absolute; inset: 0; }
.dsg-fx-brilho > .dsg-cont { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--destaque) 55%, transparent)) drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.dsg-fx-sombra > .dsg-cont { filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .65)); }
/* (respira e pêndulo dividem o animation do .dsg-cont por variáveis: ver "Efeitos extras" mais abaixo) */

/* Caixas e molduras: duas camadas com o mesmo recorte — a borda embaixo e o miolo por cima. */
.dsg-forma { position: absolute; inset: 0; }
.dsg-borda, .dsg-miolo { position: absolute; inset: 0; clip-path: var(--dsg-clip, none); border-radius: var(--dsg-raio, 0); }
.dsg-miolo { inset: var(--dsg-bw, 0px); border-radius: max(0px, calc(var(--dsg-raio, 0px) - var(--dsg-bw, 0px))); overflow: hidden; }
.dsg-b-luz .dsg-borda { background: linear-gradient(135deg, #fff 0%, var(--dsg-bcor) 28%, color-mix(in srgb, var(--dsg-bcor) 22%, transparent) 60%, var(--dsg-bcor) 100%); }
.dsg-b-solida .dsg-borda { background: var(--dsg-bcor); }
.dsg-b-girando .dsg-borda {
  background: conic-gradient(from var(--dsg-ang), color-mix(in srgb, var(--dsg-bcor) 30%, transparent) 0 45%, var(--dsg-bcor) 72%, #fff 88%, color-mix(in srgb, var(--dsg-bcor) 30%, transparent) 100%);
  animation: dsg-giro 3.4s linear infinite;
}
.dsg-b-nenhuma .dsg-borda { display: none; }
/* Sem fundo, a borda é só o aro: o degradê cobre a forma inteira e a máscara tira o miolo
   (sem isto o "fundo nenhum" aparecia preenchido pelo degradê). */
.dsg-f-nenhum .dsg-borda {
  padding: var(--dsg-bw, 0px); box-sizing: border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.dsg-f-vidro .dsg-miolo {
  background: radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--destaque) var(--dsg-tinta, 0%), transparent), transparent 65%),
    linear-gradient(160deg, rgba(14, 16, 22, .94), rgba(8, 9, 13, .96));
}
.dsg-f-destaque .dsg-miolo {
  background: linear-gradient(160deg, color-mix(in srgb, var(--destaque) 85%, #fff 12%), color-mix(in srgb, var(--destaque) 65%, #000));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}
.dsg-f-cor .dsg-miolo { background: var(--dsg-fcor); }
.dsg-f-nenhum .dsg-miolo { background: transparent; }
.dsg-reflexo { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .18) 50%, transparent 62%); animation: dsg-varre 5.5s ease-in-out infinite; }
.dsg-faiscas {
  position: absolute; inset: 0; pointer-events: none; opacity: .85;
  background: radial-gradient(circle at 18% 82%, var(--destaque) 0 1.6px, transparent 2.4px), radial-gradient(circle at 72% 46%, #fff 0 1.2px, transparent 2px),
    radial-gradient(circle at 44% 14%, var(--destaque) 0 1.4px, transparent 2.2px);
  background-size: 64px 64px; animation: dsg-faisca 2.4s linear infinite;
}

/* Imagem: arte do killer ou da biblioteca. "Livre" vaza sem moldura, como no layout Barra. */
.dsg-tipo-imagem .dsg-miolo { background: radial-gradient(90% 80% at 50% 30%, color-mix(in srgb, var(--destaque) 34%, #1b1626), #0d0b14); }
.dsg-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-position: 50% 18%; }
.dsg-silhueta { position: absolute; inset: 0; display: grid; place-items: end center; }
.dsg-silhueta svg { width: 82%; height: 92%; display: block; }
.dsg-livre .dsg-miolo { background: none; overflow: visible; }
.dsg-livre .dsg-img { object-position: 50% 100%; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--destaque) 70%, transparent)) drop-shadow(0 8px 10px rgba(0, 0, 0, .7)); }
.dsg-halo { position: absolute; inset: -14%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--destaque) 62%, transparent), transparent 68%); animation: dsg-halo 2.6s ease-in-out infinite; }
.dsg-fx-flutua .dsg-forma { animation: dsg-flutua 3.8s ease-in-out infinite; }

/* Texto: variáveis trocadas pelo design-cena.js; o número estoura quando muda. */
.dsg-txt { position: absolute; inset: 0; display: flex; align-items: center; white-space: pre; line-height: .95; font-variant-numeric: tabular-nums; }
.dsg-txt.dsg-normal { font-family: 'Barlow', system-ui, sans-serif; }
.dsg-a-left { justify-content: flex-start; text-align: left; }
.dsg-a-center { justify-content: center; text-align: center; }
.dsg-a-right { justify-content: flex-end; text-align: right; }
.dsg-txt span { display: inline-block; }
.dsg-g-sombra span { text-shadow: 0 1px 4px rgba(0, 0, 0, .85); }
.dsg-g-leve span { text-shadow: 0 0 2px rgba(255, 255, 255, .6), 0 0 12px color-mix(in srgb, var(--dsg-gcor) 55%, transparent), 0 2px 4px rgba(0, 0, 0, .6); }
.dsg-g-neon span { text-shadow: 0 0 4px #fff, 0 0 14px var(--dsg-gcor), 0 0 30px var(--dsg-gcor), 0 0 54px color-mix(in srgb, var(--dsg-gcor) 80%, transparent); }
.dsg-tracinho span::before {
  content: ''; display: inline-block; vertical-align: middle; width: .9em; height: max(2px, .16em); border-radius: 2px; margin-right: .5em;
  background: linear-gradient(90deg, transparent, var(--destaque));
}
.dsg-txt span.dsg-pop { animation: dsg-pop 480ms cubic-bezier(.2, 1.5, .4, 1); }

/* Ícone desenhado (máscara SVG) em degradê branco → cor escolhida. */
.dsg-ico { position: absolute; inset: 0; background: linear-gradient(180deg, #fff 5%, var(--dsg-icor) 95%); -webkit-mask: var(--dsg-m) center / contain no-repeat; mask: var(--dsg-m) center / contain no-repeat; }
.dsg-fx-brilho .dsg-ico { filter: drop-shadow(0 0 5px var(--dsg-icor)); }

/* Selo de pausa: só aparece com o streak em pausa. */
.dsg-pausa {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .55em; border-radius: 999px;
  font-weight: 700; letter-spacing: .22em; white-space: nowrap; color: #fff;
  background: rgba(10, 10, 16, .92); border: 1px solid color-mix(in srgb, var(--destaque) 65%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--destaque) 35%, transparent);
}
.dsg-pausa::before { content: ''; width: .6em; height: .6em; border-radius: 50%; background: var(--destaque); box-shadow: 0 0 8px var(--destaque); animation: dsg-pisca 1.2s ease-in-out infinite; }
.dsg-tipo-pausa { display: none; }
.dsg-em-pausa .dsg-tipo-pausa { display: block; }
/* No editor o selo fica translúcido pra dar pra posicionar. */
.dsg-editando:not(.dsg-previa):not(.dsg-em-pausa) .dsg-tipo-pausa { display: block; }
/* (no .dsg-cont: a opacidade do próprio elemento é a do controle "Opacidade") */
.dsg-editando:not(.dsg-previa):not(.dsg-em-pausa) .dsg-tipo-pausa > .dsg-cont { opacity: .35; }
/* Na pausa tudo congela, menos o próprio selo. */
.dsg-em-pausa .dsg-el:not(.dsg-tipo-pausa), .dsg-em-pausa .dsg-el:not(.dsg-tipo-pausa) * { animation-play-state: paused !important; }
/* ...mas as animações que REVELAM o elemento seguem rodando na pausa (e terminam sozinhas). Congeladas no primeiro quadro
   (opacidade 0, texto todo recortado), deixariam o overlay invisível sempre que ele é aberto ou redesenhado com a pausa
   ligada (recarregar o OBS, o design mudar, a rede piscar) ou quando o texto muda (nome do killer, que "digita", e dígitos
   que rolam). No .dsg-el a lista de animações tem 7 fatias e a entrada é a última (ver mais abaixo): só ela segue rodando. */
.dsg-em-pausa .dsg-el:not(.dsg-tipo-pausa) { animation-play-state: paused, paused, paused, paused, paused, paused, running !important; }
.dsg-em-pausa .dsg-el:not(.dsg-tipo-pausa) .dsg-txt span.dsg-digitando,
.dsg-em-pausa .dsg-el:not(.dsg-tipo-pausa) .dsg-txt span.dsg-rola { animation-play-state: running !important; }
.dsg-em-pausa .dsg-el:not(.dsg-tipo-pausa) .dsg-txt { opacity: .6; }

@media (prefers-reduced-motion: reduce) {
  html:not([data-overlay-tv]) .dsg-el,
  html:not([data-overlay-tv]) .dsg-el *,
  html:not([data-overlay-tv]) .dsg-el *::before { animation: none !important; }
  html:not([data-overlay-tv]) .dsg-onda,
  html:not([data-overlay-tv]) .dsg-chispa { display: none; }
}

/* ---------------------------------------------------------------------------
   Entrada: o elemento chega quando o design é desenhado (fx.entrada), com atraso
   em degraus (fx.atraso → --dsg-atraso) pra montar a cena em cascata. No editor só
   roda no "Modo prévia" (senão repetiria a cada arraste). Usa as propriedades
   translate/scale, que não brigam com o rotate() do próprio elemento, e fill
   "backwards": depois de pronto o elemento volta ao estilo normal (sem clip nem opacidade presos).
   --------------------------------------------------------------------------- */
@keyframes dsg-ent-sobe { from { opacity: 0; translate: 0 28px; } }
@keyframes dsg-ent-desliza { from { opacity: 0; translate: -48px 0; } }
@keyframes dsg-ent-zoom { from { opacity: 0; scale: .55; } }
@keyframes dsg-ent-revela { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { clip-path: inset(-120px); } }
.dsg-palco:not(.dsg-editando) .dsg-ent-sobe, .dsg-palco.dsg-previa .dsg-ent-sobe { --dsg-a-ent: dsg-ent-sobe 650ms cubic-bezier(.2, .9, .25, 1) var(--dsg-atraso, 0s) backwards; }
.dsg-palco:not(.dsg-editando) .dsg-ent-desliza, .dsg-palco.dsg-previa .dsg-ent-desliza { --dsg-a-ent: dsg-ent-desliza 650ms cubic-bezier(.2, .9, .25, 1) var(--dsg-atraso, 0s) backwards; }
.dsg-palco:not(.dsg-editando) .dsg-ent-zoom, .dsg-palco.dsg-previa .dsg-ent-zoom { --dsg-a-ent: dsg-ent-zoom 600ms cubic-bezier(.2, 1.4, .4, 1) var(--dsg-atraso, 0s) backwards; }
.dsg-palco:not(.dsg-editando) .dsg-ent-revela, .dsg-palco.dsg-previa .dsg-ent-revela { --dsg-a-ent: dsg-ent-revela 750ms cubic-bezier(.3, .7, .2, 1) var(--dsg-atraso, 0s) backwards; }

/* ---------------------------------------------------------------------------
   Reações ao placar: onda e chispa saem do elemento quando o número sobe
   (design-cena.js cria e remove os nós); o resto vem de classes no palco.
   --------------------------------------------------------------------------- */
@keyframes dsg-onda { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.5); } }
.dsg-onda {
  position: absolute; inset: 0; pointer-events: none; border: 2px solid var(--destaque);
  box-shadow: 0 0 14px var(--destaque), inset 0 0 14px color-mix(in srgb, var(--destaque) 60%, transparent);
  animation: dsg-onda 800ms cubic-bezier(.15, .7, .3, 1) forwards;
}
@keyframes dsg-chispa { from { opacity: 1; transform: translate(0, 0) scale(1); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.15); } }
.dsg-chispa {
  position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; pointer-events: none;
  background: #fff; box-shadow: 0 0 8px 2px var(--destaque);
  animation: dsg-chispa 800ms cubic-bezier(.1, .7, .3, 1) forwards;
}

/* Cena: ao zerar, treme e perde a cor (cena.reacaoZerar). */
.dsg-palco { transition: filter 450ms ease; }
.dsg-palco.dsg-zerou { filter: saturate(.2) brightness(.8); animation: dsg-treme 900ms linear; }
@keyframes dsg-treme {
  0%, 100% { translate: 0 0; } 10% { translate: -6px 2px; } 20% { translate: 5px -3px; } 30% { translate: -4px -2px; } 40% { translate: 6px 3px; }
  50% { translate: -5px 1px; } 60% { translate: 3px -2px; } 70% { translate: -3px 2px; } 80% { translate: 2px -1px; } 90% { translate: -1px 1px; }
}
/* (o tremor e o clarão ficam no palco, que não tem outra animação: trocar o animation dos elementos reiniciaria a entrada deles) */

/* Cena: enquanto o atual estiver no recorde, o destaque vira a cor do recorde (cena.modoRecorde) e há um clarão na virada. */
.dsg-palco.dsg-recorde { --destaque: var(--contagem) !important; }
@keyframes dsg-clarao { from { filter: brightness(2.4) saturate(1.5); } to { filter: none; } }
.dsg-palco.dsg-recorde-flash { animation: dsg-clarao 1200ms ease-out; }

/* ---------------------------------------------------------------------------
   Animações do próprio elemento. A lista abaixo junta todas as fatias (--dsg-a-*), então
   entrada e movimentos contínuos convivem sem trocar o `animation` um do outro. A entrada fica
   por último: enquanto ela roda, vence os outros na mesma propriedade (opacidade, escala, posição).
   --------------------------------------------------------------------------- */
.dsg-el { animation: var(--dsg-a-pulso, none), var(--dsg-a-tremor, none), var(--dsg-a-pisca, none), var(--dsg-a-glitch, none), var(--dsg-a-gelado, none), var(--dsg-a-chama, none), var(--dsg-a-ent, none); }
.dsg-fx-pulso { --dsg-a-pulso: dsg-pulso 1.5s ease-in-out infinite; }
.dsg-fx-tremor { --dsg-a-tremor: dsg-tremor .24s steps(1, end) infinite; }
.dsg-fx-pisca { --dsg-a-pisca: dsg-neon-pisca 4.2s linear infinite; }
.dsg-fx-glitch { --dsg-a-glitch: dsg-glitch 3.4s linear infinite; }
@keyframes dsg-pulso { 0%, 100% { scale: 1; } 50% { scale: 1.07; } }
@keyframes dsg-tremor { 0%, 100% { translate: 0 0; } 25% { translate: .8px -.6px; } 50% { translate: -.7px .7px; } 75% { translate: .6px .5px; } }
/* tubo de néon falhando: quedas rápidas e irregulares de brilho */
@keyframes dsg-neon-pisca {
  0%, 17%, 19%, 22%, 60%, 63%, 100% { filter: none; }
  18%, 21% { filter: brightness(.35); }
  61% { filter: brightness(.55); }
  62% { filter: brightness(.8); }
}
/* rajada curta de aberração cromática (vermelho/ciano separados) com um solavanco */
@keyframes dsg-glitch {
  0%, 91%, 100% { translate: 0 0; filter: none; }
  92% { translate: -4px 1px; filter: drop-shadow(4px 0 rgba(255, 40, 90, .85)) drop-shadow(-4px 0 rgba(0, 225, 255, .85)); }
  94% { translate: 5px -1px; filter: drop-shadow(-4px 0 rgba(255, 40, 90, .85)) drop-shadow(4px 0 rgba(0, 225, 255, .85)); }
  96% { translate: -2px 0; filter: drop-shadow(2px 0 rgba(255, 40, 90, .7)) drop-shadow(-2px 0 rgba(0, 225, 255, .7)); }
  98% { translate: 0 0; filter: none; }
}

/* ---------------------------------------------------------------------------
   Medidor: enche com atual ÷ recorde (ou ÷ meta). O número vai em --dsg-pct (0 a 100)
   e muda com transição; a cor em --dsg-mcor. Quatro formas: barra, anel, segmentos e pips.
   --------------------------------------------------------------------------- */
@property --dsg-pct { syntax: '<number>'; inherits: true; initial-value: 0; }
.dsg-med { position: absolute; inset: 0; --dsg-mcor: var(--destaque); transition: --dsg-pct 700ms cubic-bezier(.2, .8, .2, 1); }
.dsg-med-barra { border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5); }
.dsg-med-barra.dsg-sem-trilho { background: none; box-shadow: none; }
.dsg-med-preen {
  position: absolute; inset: 0 auto 0 0; width: calc(var(--dsg-pct) * 1%); border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--dsg-mcor) 65%, #000), var(--dsg-mcor) 70%, color-mix(in srgb, var(--dsg-mcor) 60%, #fff));
  box-shadow: 0 0 12px color-mix(in srgb, var(--dsg-mcor) 70%, transparent);
}
.dsg-med-barra.dsg-vert .dsg-med-preen { inset: auto 0 0 0; width: auto; height: calc(var(--dsg-pct) * 1%); }
.dsg-med-anel {
  --dsg-esp: 12px; border-radius: 50%;
  background: conic-gradient(var(--dsg-mcor) calc(var(--dsg-pct) * 1%), rgba(255, 255, 255, .1) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--dsg-esp)), #000 calc(100% - var(--dsg-esp) + 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--dsg-esp)), #000 calc(100% - var(--dsg-esp) + 1px));
}
.dsg-med-anel.dsg-sem-trilho { background: conic-gradient(var(--dsg-mcor) calc(var(--dsg-pct) * 1%), transparent 0); }
.dsg-med-segmentos, .dsg-med-pips { display: flex; gap: 4px; align-items: stretch; transition: none; }
.dsg-med-segmentos.dsg-vert, .dsg-med-pips.dsg-vert { flex-direction: column-reverse; }
.dsg-med .dsg-s { transition: background 250ms ease, box-shadow 250ms ease; background: rgba(255, 255, 255, .12); }
.dsg-sem-trilho .dsg-s:not(.on) { background: transparent; }
.dsg-med-segmentos .dsg-s { flex: 1; border-radius: 3px; }
.dsg-med-segmentos .dsg-s.on { background: linear-gradient(180deg, color-mix(in srgb, var(--dsg-mcor) 55%, #fff), var(--dsg-mcor)); box-shadow: 0 0 8px color-mix(in srgb, var(--dsg-mcor) 75%, transparent); }
.dsg-med-pips { justify-content: space-between; align-items: center; }
.dsg-med-pips.dsg-vert { align-items: center; justify-content: space-between; }
.dsg-med-pips .dsg-s { flex: 0 0 auto; height: 100%; aspect-ratio: 1; border-radius: 50%; }
.dsg-med-pips.dsg-vert .dsg-s { height: auto; width: 100%; }
.dsg-med-pips .dsg-s.on { background: radial-gradient(circle at 35% 30%, #fff, var(--dsg-mcor) 55%); box-shadow: 0 0 10px var(--dsg-mcor); }
.dsg-tipo-medidor { overflow: visible; }

/* ===========================================================================
   Efeitos extras: formas novas, fundo holo, borda corrente, mira, laser, atmosfera
   (névoa, brasas, sangue, arcos), aura, pêndulo, texturas da cena e efeitos de texto.
   =========================================================================== */

/* Fundo holo: foil iridescente que desliza por baixo de um véu escuro (pra o texto continuar lendo bem). */
@keyframes dsg-holo { from { background-position: 0 0, 0% 0; } to { background-position: 0 0, 100% 0; } }
.dsg-f-holo .dsg-miolo {
  background: linear-gradient(160deg, rgba(10, 11, 16, .62), rgba(10, 11, 16, .62)),
    linear-gradient(115deg, #ff7ac8, #7ad8ff, #9dff8a, #ffd77a, #ff7ac8) 0 0 / 200% 100%;
  animation: dsg-holo 5s ease-in-out infinite alternate;
}

/* Borda corrente: duas luzes correndo pelo aro. */
.dsg-b-corrente .dsg-borda {
  background: conic-gradient(from var(--dsg-ang), transparent 0 8%, var(--dsg-bcor) 14%, #fff 17%, transparent 24%, transparent 58%, var(--dsg-bcor) 64%, #fff 67%, transparent 74%),
    color-mix(in srgb, var(--dsg-bcor) 22%, transparent);
  animation: dsg-giro 2.4s linear infinite;
}

/* Cantos de mira: colchetes que respiram em volta da forma. */
@keyframes dsg-mira { 0%, 100% { inset: -5px; } 50% { inset: -10px; } }
.dsg-mira {
  position: absolute; inset: -5px; pointer-events: none; animation: dsg-mira 2.4s ease-in-out infinite;
  background:
    linear-gradient(var(--m), var(--m)) 0 0 / 16px 2px no-repeat, linear-gradient(var(--m), var(--m)) 0 0 / 2px 16px no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 0 / 16px 2px no-repeat, linear-gradient(var(--m), var(--m)) 100% 0 / 2px 16px no-repeat,
    linear-gradient(var(--m), var(--m)) 0 100% / 16px 2px no-repeat, linear-gradient(var(--m), var(--m)) 0 100% / 2px 16px no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 100% / 16px 2px no-repeat, linear-gradient(var(--m), var(--m)) 100% 100% / 2px 16px no-repeat;
  filter: drop-shadow(0 0 4px var(--m));
}

/* Laser: uma linha de luz que varre a forma de cima a baixo e volta. */
@keyframes dsg-laser { from { top: 0; } to { top: calc(100% - 2px); } }
.dsg-laser {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--destaque) 25%, #fff 50%, var(--destaque) 75%, transparent);
  box-shadow: 0 0 10px var(--destaque), 0 0 22px color-mix(in srgb, var(--destaque) 60%, transparent);
  animation: dsg-laser 2.8s ease-in-out infinite alternate;
}

/* Névoa: duas camadas lentas, em sentidos opostos (as peças têm largura fixa em px, então o laço não tem emenda). */
@keyframes dsg-nevoa { from { background-position: 0 62%, 0 30%; } to { background-position: 180px 62%, -140px 30%; } }
.dsg-nevoa {
  position: absolute; inset: 0; pointer-events: none; filter: blur(6px);
  background: radial-gradient(closest-side, rgba(225, 232, 242, .36), transparent) 0 62% / 180px 80% repeat-x,
    radial-gradient(closest-side, rgba(200, 214, 232, .28), transparent) 0 30% / 140px 70% repeat-x;
  animation: dsg-nevoa 14s linear infinite;
}

/* Brasas: pontos laranja subindo e sumindo no alto. */
@keyframes dsg-brasa { to { background-position: 0 -90px, 22px -90px, 50px -15px; } }
.dsg-brasas {
  position: absolute; inset: 0; pointer-events: none; filter: drop-shadow(0 0 4px #ff7a2e);
  background: radial-gradient(circle, #ffb35c 0 1.8px, transparent 2.8px) 0 0 / 70px 90px,
    radial-gradient(circle, #ff7a2e 0 2.4px, transparent 3.6px) 22px 30px / 96px 120px,
    radial-gradient(circle, #ffe3a0 0 1.2px, transparent 2.2px) 50px 55px / 54px 70px;
  -webkit-mask: linear-gradient(0deg, #000 25%, transparent 95%); mask: linear-gradient(0deg, #000 25%, transparent 95%);
  animation: dsg-brasa 5.5s linear infinite;
}

/* Sangue: uma faixa escura na borda de cima e gotas que descem e somem. */
@keyframes dsg-escorre { 0% { height: 0; opacity: 0; } 8% { opacity: 1; } 72% { height: 46%; opacity: 1; } 100% { height: 62%; opacity: 0; } }
.dsg-sangue { position: absolute; inset: 0; pointer-events: none; }
.dsg-sangue::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(180deg, #8a1119, #5c0b11); box-shadow: 0 2px 6px rgba(120, 8, 16, .6); }
.dsg-gota {
  position: absolute; top: 0; width: var(--w, 5px); height: 0; margin-left: calc(var(--w, 5px) / -2); opacity: 0;
  border-radius: 0 0 99px 99px; background: linear-gradient(180deg, #8a1119, #d23a2e);
  animation: dsg-escorre var(--d, 4s) ease-in infinite var(--dl, 0s);
}

/* Arcos elétricos: raios que estalam (como os do gerador do módulo Teste). */
@keyframes dsg-arcoeletrico { 0% { opacity: 0; } 8% { opacity: 1; } 17% { opacity: 0; } 56% { opacity: 0; } 62% { opacity: .9; } 70% { opacity: 0; } 100% { opacity: 0; } }
.dsg-arcos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.dsg-arco {
  fill: none; stroke: #d9f6ff; stroke-width: 1.6; stroke-linejoin: round; opacity: 0;
  filter: drop-shadow(0 0 3px var(--destaque)) drop-shadow(0 0 7px var(--destaque));
  animation: dsg-arcoeletrico 1.5s steps(1, end) infinite;
}
.dsg-arco-1 { stroke: #fff; animation-delay: .55s; }

/* Aura da Entidade: luz lenta de duas cores girando atrás da imagem. */
.dsg-aura {
  position: absolute; inset: -16%; border-radius: 50%; pointer-events: none; opacity: .6; filter: blur(12px);
  background: conic-gradient(from var(--dsg-ang), var(--destaque), transparent 30%, color-mix(in srgb, var(--destaque) 35%, var(--contagem)) 52%, transparent 78%, var(--destaque));
  /* apaga nas bordas da própria caixa: sem corte duro mesmo perto do limite do palco */
  -webkit-mask: radial-gradient(closest-side, #000 38%, transparent 100%); mask: radial-gradient(closest-side, #000 38%, transparent 100%);
  animation: dsg-giro 10s linear infinite;
}

/* Pêndulo: o elemento balança preso pelo topo, como um gancho na corrente. */
@keyframes dsg-pendulo { 0%, 100% { rotate: -7deg; } 50% { rotate: 7deg; } }
.dsg-cont { animation: var(--dsg-c-respira, none), var(--dsg-c-pendulo, none), var(--dsg-c-rev, none); }

/* Alternar: o elemento A fica visível na primeira metade do ciclo e o B na segunda (com uma troca suave).
   Nascem juntos, então ficam sincronizados. Sem animação (movimento reduzido) só o A aparece. */
@keyframes dsg-rev-a { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes dsg-rev-b { 0%, 45% { opacity: 0; } 50%, 95% { opacity: 1; } 100% { opacity: 0; } }
.dsg-alt-a { --dsg-c-rev: dsg-rev-a var(--dsg-ciclo, 8s) linear infinite; }
.dsg-alt-b { --dsg-c-rev: dsg-rev-b var(--dsg-ciclo, 8s) linear infinite; }
@media (prefers-reduced-motion: reduce) { html:not([data-overlay-tv]) .dsg-alt-b { display: none; } }
.dsg-fx-respira { --dsg-c-respira: dsg-respira 3.2s ease-in-out infinite; }
.dsg-fx-pendulo { --dsg-c-pendulo: dsg-pendulo 3.8s ease-in-out infinite; }
.dsg-fx-pendulo > .dsg-cont { transform-origin: 50% 0; }

/* Texturas da cena (design.cena): camada por cima de cada caixa/imagem, dentro do recorte da forma. */
@keyframes dsg-grao { 0% { background-position: 0 0, 0 0; } 33% { background-position: 0 0, -23px 17px; } 66% { background-position: 0 0, 11px -29px; } 100% { background-position: 0 0, 0 0; } }
.dsg-forma::after {
  content: ''; position: absolute; inset: var(--dsg-bw, 0px); pointer-events: none;
  clip-path: var(--dsg-clip, none); border-radius: max(0px, calc(var(--dsg-raio, 0px) - var(--dsg-bw, 0px)));
  background: var(--tx-linhas, none), var(--tx-grao, none);
}
.dsg-livre::after { display: none; }
.dsg-tx-linhas .dsg-forma { --tx-linhas: repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 3px); }
.dsg-tx-grao .dsg-forma {
  --tx-grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.dsg-tx-grao .dsg-forma::after { background-size: auto, 160px 160px; animation: dsg-grao .6s steps(1, end) infinite; opacity: .55; }
.dsg-tx-vinheta .dsg-forma::after { box-shadow: inset 0 0 28px 6px rgba(0, 0, 0, .62); }

/* Texto cromado ou em degradê (o brilho vira drop-shadow, porque text-shadow apareceria por cima do degradê). */
.dsg-grad span { color: transparent; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; text-shadow: none !important; }
.dsg-grad-cromo span { background-image: linear-gradient(180deg, #ffffff 8%, #aab4c0 38%, #f4f7fa 52%, #6f7a88 70%, #dfe6ee 100%); }
.dsg-grad-degrade span { background-image: linear-gradient(90deg, var(--destaque), var(--contagem)); }
.dsg-grad.dsg-g-sombra span { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .85)); }
.dsg-grad.dsg-g-leve span { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--destaque) 55%, transparent)) drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.dsg-grad.dsg-g-neon span { filter: drop-shadow(0 0 6px var(--destaque)) drop-shadow(0 0 18px var(--destaque)); }

/* Contorno escuro nas letras (tamanho em em: acompanha o tamanho do texto). */
.dsg-contorno span {
  text-shadow: -.06em 0 #0a0a0e, .06em 0 #0a0a0e, 0 -.06em #0a0a0e, 0 .06em #0a0a0e,
    -.045em -.045em #0a0a0e, .045em .045em #0a0a0e, -.045em .045em #0a0a0e, .045em -.045em #0a0a0e, 0 .1em .14em rgba(0, 0, 0, .55);
}
.dsg-grad.dsg-contorno span {
  filter: drop-shadow(.05em 0 0 #0a0a0e) drop-shadow(-.05em 0 0 #0a0a0e) drop-shadow(0 .05em 0 #0a0a0e) drop-shadow(0 -.05em 0 #0a0a0e);
}

/* Reflexo no chão: espelho tênue embaixo do texto (precisa de espaço abaixo da caixa). */
.dsg-espelho { -webkit-box-reflect: below -.12em linear-gradient(transparent 52%, rgba(255, 255, 255, .28)); }

/* Digitando: as letras aparecem uma a uma (só no overlay e no Modo prévia, como a entrada). */
@keyframes dsg-digita { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(-.5em -.8em -.5em -.8em); } }
.dsg-palco:not(.dsg-editando) .dsg-digitar span.dsg-digitando, .dsg-palco.dsg-previa .dsg-digitar span.dsg-digitando {
  animation: dsg-digita var(--dsg-dur, 800ms) steps(var(--dsg-n, 10), end) var(--dsg-atraso, 0s) backwards;
}

/* Texto comprido que corre: vai e volta devagar (medido em design-cena.js). */
@keyframes dsg-corre { 0%, 12% { transform: translateX(0); } 88%, 100% { transform: translateX(var(--dsg-corre, 0px)); } }
/* só alinha à esquerda quando o texto realmente corre; se cabe, vale o alinhamento escolhido */
.dsg-corre { overflow: hidden; }
.dsg-corre:has(.dsg-correndo) { justify-content: flex-start !important; }
.dsg-txt span.dsg-correndo { animation: dsg-corre 7s ease-in-out infinite alternate; }

/* Dígitos que rolam: o novo sobe de baixo e o velho sai por cima. */
@keyframes dsg-rola { from { transform: translateY(70%); opacity: 0; filter: blur(3px); } to { transform: none; opacity: 1; filter: none; } }
@keyframes dsg-sai { to { transform: translateY(-70%); opacity: 0; filter: blur(3px); } }
.dsg-txt span.dsg-rola { animation: dsg-rola 480ms cubic-bezier(.2, .9, .25, 1); }
.dsg-txt span.dsg-fantasma { position: absolute; pointer-events: none; animation: dsg-sai 420ms cubic-bezier(.5, 0, .8, .4) forwards; }
@media (prefers-reduced-motion: reduce) { html:not([data-overlay-tv]) .dsg-fantasma { display: none; } }


/* ---------------------------------------------------------------------------
   Página Streak (painel): prévia do design e o bloco que liga/desliga.
   Fica aqui pra não espalhar o recurso beta pelo fila.css.
   --------------------------------------------------------------------------- */
/* O design aparece em tamanho real, no canto de cima à esquerda (como os
   layouts prontos); a caixa da prévia acompanha o tamanho dele e ele só
   encolhe se não couber na largura. */
.previa-design { display: block; }
.previa-design[hidden] { display: none; }
.previa-design-folha { position: relative; }
.previa-design-folha > .dsg-palco { position: absolute; left: 0; top: 0; overflow: visible; }
.previa-tela.com-design > .ovls,
.previa-tela.com-design > .ovls-ranking,
.previa-tela.com-design > .previa-vazia { display: none !important; }
.selo-beta { display: inline-block; vertical-align: 1px; margin-left: 4px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; background: rgba(242, 181, 68, .16); color: #f2b544; }
.bloco-design {
  margin: 0 0 16px; padding: 16px; border-radius: 12px; border: 1px solid var(--fog-800, #2b2023);
  background: linear-gradient(180deg, var(--fog-850, #1d1619), var(--fog-900, #151012));
}
.visual-topo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.visual-topo strong { font-family: var(--display, 'Oswald', sans-serif); font-size: 17px; font-weight: 600; letter-spacing: .02em; }
.visual-topo p { margin: 4px 0 0; font-size: 13px; color: var(--ash, #a99d97); }
.visual-editor { display: inline-flex; align-items: center; gap: 8px; height: 38px; text-decoration: none; }
.visual-editor svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Duas opções em cartão: ícone, título e uma linha explicando. */
.visual-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.visual-opcao {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 12px 40px 12px 14px;
  text-align: left; cursor: pointer; color: var(--bone, #f0e7dc); font: inherit;
  background: var(--fog-950, #0b0809); border: 1px solid var(--fog-700, #3d2e32); border-radius: 10px;
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}
.visual-opcao:hover { border-color: var(--ash, #a99d97); }
.visual-opcao:focus-visible { outline: 2px solid var(--rust-text, #f05a5a); outline-offset: 2px; }
.visual-ico {
  flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 9px;
  fill: none; stroke: var(--ash, #a99d97); stroke-width: 1.7; stroke-linejoin: round;
  background: var(--fog-850, #1d1619); transition: stroke 200ms ease, background-color 200ms ease;
}
.visual-txt { display: grid; gap: 2px; min-width: 0; }
.visual-txt b { font-size: 14.5px; font-weight: 600; }
.visual-txt small { font-size: 12.5px; color: var(--ash, #a99d97); }
/* Bolinha de seleção no canto, como um rádio. */
.visual-opcao::after {
  content: ''; position: absolute; right: 14px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%;
  border: 1.5px solid var(--fog-700, #3d2e32); transition: border-color 200ms ease, box-shadow 200ms ease;
}
.visual-opcao.is-ativa {
  border-color: var(--rust-text, #f05a5a); background: rgba(240, 90, 90, .07);
  box-shadow: 0 0 0 1px rgba(240, 90, 90, .25), 0 8px 22px rgba(179, 18, 31, .18);
}
.visual-opcao.is-ativa .visual-ico { stroke: var(--rust-text, #f05a5a); background: rgba(240, 90, 90, .12); }
.visual-opcao.is-ativa::after { border-color: var(--rust-text, #f05a5a); box-shadow: inset 0 0 0 3px var(--fog-950, #0b0809), inset 0 0 0 8px var(--rust-text, #f05a5a); }
.sem-design { margin: 18px 0 0; padding: 10px 12px; transition: opacity 300ms ease, transform 300ms ease; border-radius: 8px; font-size: 13px; line-height: 1.45;
  color: var(--bone, #f0e7dc); background: rgba(242, 181, 68, .1); border: 1px solid rgba(242, 181, 68, .35); }
.sem-design[hidden] { display: none; }
.sem-design.saindo { opacity: 0; transform: translateY(-4px); }
.dica-design { margin: 12px 0 0; font-size: 12.5px; line-height: 1.45; color: #a99d97; }

/* Aviso na página Streak: a pausa no modo design (acréscimo do 1d072eb, mantido). */
.pausa-no-design { margin: 4px 0 0; padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5;
  color: var(--bone, #f0e7dc); background: rgba(240, 231, 220, .04); border: 1px solid var(--fog-700, #3d2e32); }
.pausa-no-design[hidden] { display: none; }
.pausa-no-design a { color: var(--rust-text, #f05a5a); font-weight: 600; text-decoration: none; white-space: nowrap; }
.pausa-no-design a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Dados do streak: perks do build e ranking dos killers. Os ícones e retratos vêm do servidor
   (nunca de um endereço escrito no design) e o tamanho de tudo acompanha o tamanho do elemento.
   --------------------------------------------------------------------------- */
.dsg-perks { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--dsg-pesp, 8px); }
.dsg-perks-v { flex-direction: column; }
.dsg-pa-left { justify-content: flex-start; }
.dsg-pa-right { justify-content: flex-end; }
.dsg-perk {
  flex: 0 1 auto; box-sizing: border-box; overflow: hidden; background: #1c232c;
  border: var(--dsg-pbw, 1.5px) solid var(--dsg-pcor, var(--destaque)); border-radius: var(--dsg-praio, 6px);
}
.dsg-perks-h .dsg-perk { height: 100%; aspect-ratio: 1; min-width: 0; }
.dsg-perks-v .dsg-perk { width: 100%; aspect-ratio: 1; min-height: 0; }
.dsg-perk img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dsg-pf-circulo .dsg-perk { border-radius: 50%; }
.dsg-pf-losango .dsg-perk { border: 0; border-radius: 0; background: none; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.dsg-perk-vazio { border-style: dashed; border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .05); }

.dsg-rank {
  position: absolute; inset: 0; display: grid; gap: 4px; line-height: 1; font-variant-numeric: tabular-nums;
  grid-template-rows: repeat(var(--dsg-rk-n, 3), minmax(0, 1fr));
}
.dsg-rk-linha { display: flex; align-items: center; gap: .5em; min-width: 0; box-sizing: border-box; padding: 0 .6em 0 .3em; }
.dsg-rk-faixa .dsg-rk-linha {
  background: linear-gradient(90deg, rgba(10, 10, 14, .74), rgba(10, 10, 14, .38));
  border-left: 3px solid color-mix(in srgb, var(--destaque) 55%, transparent); border-radius: 0 6px 6px 0;
}
.dsg-rk-linha.dsg-rk-ativo { background: linear-gradient(90deg, color-mix(in srgb, var(--destaque) 40%, rgba(10, 10, 14, .74)), rgba(10, 10, 14, .38)); }
.dsg-rk-faixa .dsg-rk-linha.dsg-rk-ativo { border-left-color: var(--destaque); }
.dsg-rk-pos { flex: none; min-width: 1.1em; text-align: center; opacity: .7; }
.dsg-rk-ret {
  flex: none; height: 82%; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: #1c232c;
  display: flex; align-items: center; justify-content: center; font-size: .8em;
}
.dsg-rk-ret img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dsg-rk-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dsg-rk-cor, #fff); }
.dsg-rk-val { flex: none; color: var(--dsg-rk-vcor, var(--contagem)); }

/* Fontes do texto e do ranking (as do Google são baixadas só quando algum elemento usa: ver FONTES em design-cena.js).
   As de um peso só levam font-synthesis: none, senão o navegador "engorda" a letra à força quando o peso é 600 ou 700. */
.dsg-rank.dsg-normal { font-family: 'Barlow', system-ui, sans-serif; }
.dsg-fonte-bebas { font-family: 'Bebas Neue', 'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif; font-synthesis: none; }
.dsg-fonte-anton { font-family: 'Anton', 'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif; font-synthesis: none; }
.dsg-fonte-teko { font-family: 'Teko', 'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif; }
.dsg-fonte-rajdhani { font-family: 'Rajdhani', 'Barlow', system-ui, sans-serif; }
.dsg-fonte-orbitron { font-family: 'Orbitron', 'Barlow', system-ui, sans-serif; }
.dsg-fonte-cinzel { font-family: 'Cinzel', Georgia, serif; }
.dsg-fonte-elite { font-family: 'Special Elite', 'Courier New', monospace; font-synthesis: none; }
.dsg-fonte-creepster { font-family: 'Creepster', Impact, sans-serif; font-synthesis: none; }
.dsg-fonte-marker { font-family: 'Permanent Marker', 'Comic Sans MS', cursive; font-synthesis: none; }

/* ===========================================================================
   Clima e elementos (atmosfera extra): gelo, neve, fogo, chuva, estrelas, veneno, relâmpago e ondas.
   Cada um é uma camada dentro da forma (o recorte da forma segura tudo); só gradientes e transform/opacity.
   =========================================================================== */

/* Gelo: pontas penduradas na borda de cima, uma geada leve por dentro e brilhos que piscam. */
@keyframes dsg-gelo-respira { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
@keyframes dsg-gelo-pisca { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
.dsg-gelo { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 22px rgba(190, 232, 255, .38), inset 0 0 2px rgba(255, 255, 255, .5); }
.dsg-gelo-pontas {
  position: absolute; left: 0; right: 0; top: 0; height: 46%;
  background: linear-gradient(180deg, rgba(246, 252, 255, .96), rgba(165, 222, 255, .72) 55%, rgba(120, 200, 255, .3));
  filter: drop-shadow(0 2px 4px rgba(120, 200, 255, .55));
  animation: dsg-gelo-respira 3.6s ease-in-out infinite;
}
.dsg-gelo-brilho {
  position: absolute; width: 9px; height: 9px; margin: -4px 0 0 -4px; opacity: 0;
  background: radial-gradient(circle, #fff 0 22%, transparent 24%),
    linear-gradient(90deg, transparent 0 40%, #fff 40% 60%, transparent 60%), linear-gradient(0deg, transparent 0 40%, #fff 40% 60%, transparent 60%);
  filter: drop-shadow(0 0 4px #bfeaff);
  animation: dsg-gelo-pisca var(--d, 3s) ease-in-out infinite var(--dl, 0s);
}

/* Neve: três camadas de flocos caindo em velocidades diferentes (o deslocamento é um múltiplo exato do ladrilho: sem emenda). */
@keyframes dsg-neve { to { background-position: 0 90px, 22px 150px, 50px 125px; } }
.dsg-neve {
  position: absolute; inset: 0; pointer-events: none; filter: drop-shadow(0 0 3px rgba(210, 235, 255, .8));
  background: radial-gradient(circle, #fff 0 1.8px, transparent 2.8px) 0 0 / 70px 90px,
    radial-gradient(circle, rgba(255, 255, 255, .85) 0 2.6px, transparent 3.8px) 22px 30px / 96px 120px,
    radial-gradient(circle, rgba(225, 242, 255, .9) 0 1.2px, transparent 2.2px) 50px 55px / 54px 70px;
  animation: dsg-neve 7s linear infinite;
}

/* Fogo: línguas de chama subindo da base, tremulando. */
@keyframes dsg-chama-treme { 0%, 100% { transform: scale(1, 1) translateX(0); } 25% { transform: scale(.82, 1.12) translateX(-2px); } 55% { transform: scale(1.1, .86) translateX(2px); } 80% { transform: scale(.92, 1.06) translateX(-1px); } }
.dsg-fogo { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; pointer-events: none; overflow: hidden; }
.dsg-chama {
  position: absolute; bottom: -6%; width: 18%; height: var(--h, 60%); transform-origin: 50% 100%;
  border-radius: 50% 50% 45% 45% / 78% 78% 22% 22%;
  background: radial-gradient(ellipse at 50% 85%, #fff2b0 0 12%, #ffb02e 38%, #ff5a14 66%, rgba(200, 30, 10, 0) 100%);
  filter: blur(2.4px) drop-shadow(0 0 8px rgba(255, 110, 20, .8)); mix-blend-mode: screen;
  animation: dsg-chama-treme var(--d, 1s) ease-in-out infinite var(--dl, 0s);
}

/* Chuva: riscos diagonais caindo rápido. */
@keyframes dsg-chuva { to { background-position: -22px 80px, -40px 120px, -14px 60px; } }
.dsg-chuva {
  position: absolute; inset: 0; pointer-events: none; opacity: .85;
  background: radial-gradient(ellipse 0.9px 10px at 10px 14px, rgba(200, 224, 255, .85), transparent) 0 0 / 44px 80px,
    radial-gradient(ellipse 0.8px 13px at 24px 40px, rgba(170, 205, 255, .7), transparent) 0 0 / 60px 120px,
    radial-gradient(ellipse 0.7px 8px at 8px 20px, rgba(220, 238, 255, .6), transparent) 0 0 / 36px 60px;
  transform: skewX(-10deg); animation: dsg-chuva .9s linear infinite;
}

/* Estrelas: pontinhos que piscam fora de compasso. */
@keyframes dsg-estrela-a { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes dsg-estrela-b { 0%, 100% { opacity: 1; } 50% { opacity: .1; } }
.dsg-estrelas { position: absolute; inset: 0; pointer-events: none; }
.dsg-estrelas::before, .dsg-estrelas::after { content: ''; position: absolute; inset: 0; }
.dsg-estrelas::before {
  background: radial-gradient(circle, #fff 0 1.1px, transparent 1.8px) 10px 12px / 58px 46px, radial-gradient(circle, #ffe9a8 0 1.4px, transparent 2.2px) 34px 30px / 83px 71px;
  animation: dsg-estrela-a 2.6s ease-in-out infinite;
}
.dsg-estrelas::after {
  background: radial-gradient(circle, #cfe6ff 0 1px, transparent 1.7px) 4px 26px / 47px 63px, radial-gradient(circle, #fff 0 1.6px, transparent 2.5px) 40px 6px / 97px 59px;
  animation: dsg-estrela-b 3.4s ease-in-out infinite;
}

/* Veneno: bolhas verdes subindo e estourando no alto. */
@keyframes dsg-veneno { to { background-position: 0 -80px, 26px -120px, 12px -60px; } }
.dsg-veneno {
  position: absolute; inset: 0; pointer-events: none; filter: drop-shadow(0 0 4px rgba(110, 255, 130, .85));
  background: radial-gradient(circle, transparent 0 2.6px, rgba(120, 255, 140, .8) 3px 4px, transparent 4.6px) 0 0 / 60px 80px,
    radial-gradient(circle, transparent 0 3.6px, rgba(160, 255, 110, .7) 4px 5.2px, transparent 5.8px) 26px 40px / 78px 120px,
    radial-gradient(circle, rgba(140, 255, 150, .9) 0 1.6px, transparent 2.4px) 12px 20px / 44px 60px;
  -webkit-mask: linear-gradient(0deg, #000 30%, transparent 98%); mask: linear-gradient(0deg, #000 30%, transparent 98%);
  animation: dsg-veneno 6s linear infinite;
}

/* Relâmpago: clarão azulado que estala de tempos em tempos. */
@keyframes dsg-relampago { 0%, 90%, 100% { opacity: 0; } 91% { opacity: .85; } 92.5% { opacity: .05; } 94% { opacity: .65; } 97% { opacity: 0; } }
.dsg-relampago {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(ellipse at 50% 20%, rgba(240, 248, 255, .95), rgba(150, 190, 255, .45) 55%, transparent 90%);
  animation: dsg-relampago 6.5s linear infinite;
}

/* Ondas: duas ondas d'água na base, em velocidades diferentes. */
@keyframes dsg-onda-a { to { background-position-x: -120px, 0; } }
@keyframes dsg-onda-b { to { background-position-x: 0, 80px; } }
.dsg-ondas { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; pointer-events: none; }
.dsg-ondas::before, .dsg-ondas::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; background-repeat: repeat-x; }
.dsg-ondas::before {
  height: 100%; background-size: 120px 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q30 4 60 20 T120 20 V40 H0z' fill='rgba(90,170,255,0.42)'/%3E%3C/svg%3E");
}
.dsg-ondas::after {
  height: 78%; background-size: 80px 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40' preserveAspectRatio='none'%3E%3Cpath d='M0 18 Q20 32 40 18 T80 18 V40 H0z' fill='rgba(150,215,255,0.34)'/%3E%3C/svg%3E");
}

/* Gelado e Chama: o elemento inteiro ganha um brilho de clima. */
@keyframes dsg-gelado { 0%, 100% { filter: drop-shadow(0 0 4px rgba(150, 220, 255, .65)) brightness(1); } 50% { filter: drop-shadow(0 0 14px rgba(215, 246, 255, .95)) brightness(1.16); } }
@keyframes dsg-chama-brilho {
  0%, 100% { filter: drop-shadow(0 0 7px rgba(255, 120, 30, .85)) brightness(1.04); }
  18% { filter: drop-shadow(0 0 12px rgba(255, 170, 50, .95)) brightness(1.2); }
  42% { filter: drop-shadow(0 0 5px rgba(255, 90, 20, .7)) brightness(.96); }
  66% { filter: drop-shadow(0 0 13px rgba(255, 150, 40, .95)) brightness(1.14); }
}
.dsg-fx-gelado { --dsg-a-gelado: dsg-gelado 3.2s ease-in-out infinite; }
.dsg-fx-chama { --dsg-a-chama: dsg-chama-brilho 1.4s ease-in-out infinite; }