/* Estrelas por tempo e vitória festiva (confete) */

/* ===== Estrelas por tempo e vitória festiva ===== */
.stat-goal { font-size: 0.7rem; color: var(--muted); margin-top: 2px; white-space: nowrap; }

.win-stars { display: flex; justify-content: center; gap: 6px; margin: 2px 0 4px; font-size: 2.6rem; line-height: 1; }
.win-star { color: var(--card-soft); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12); }
.overlay.show .win-star.on {
  color: #f2b705;
  animation: star-in 0.55s cubic-bezier(0.3, 1.6, 0.5, 1) both;
  animation-delay: calc(0.35s + var(--i) * 0.28s);
}
@keyframes star-in {
  from { transform: scale(0) rotate(-60deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i {
  position: absolute;
  top: -16px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), 105vh) rotate(var(--rot)); opacity: 0.9; }
}

/* ---------- Medalha da vitória (win-medal.js) ---------- */
.win-stars { display: none; } /* as estrelas agora ficam dentro da medalha; o elemento continua para leitores de tela */
.win-medal { position: relative; width: 210px; height: 189px; margin: -6px auto 0; }
.medal { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25)); }
.medal * { transform-box: fill-box; transform-origin: center; }
.overlay.show .medal-body { animation: medal-in 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
.overlay.show .medal-ribbon { animation: ribbon-in 0.6s 0.15s ease-out both, ribbon-sway 2.4s 0.8s ease-in-out infinite alternate; transform-origin: 50% 0; }
.overlay.show .medal-star { animation: star-in 0.55s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
.medal-rays { animation: rays-spin 14s linear infinite; transform-origin: 100px 84px; transform-box: view-box; }
.medal-aura { animation: aura 2.2s ease-in-out infinite alternate; }
.medal-shine { animation: shine 2.6s 1.1s ease-in-out infinite; }
.medal-spark { animation: spark 1.8s ease-in-out infinite; }
.medal-fly { position: absolute; top: -6px; right: 6px; width: 34px; height: 34px; filter: drop-shadow(0 0 8px rgba(255, 220, 100, 0.95)); animation: fly-bob 2s ease-in-out infinite alternate; }
.medal-fly .mark-cat { width: 100%; height: 100%; animation: none; position: static; }
.modal h2.title-gold { color: #e0a010; text-shadow: 0 1px 0 #fff3b0, 0 2px 0 #a8741a, 0 3px 6px rgba(168, 116, 26, 0.45); } /* cor sólida: o degradê com background-clip pintava só parte das letras */
@keyframes medal-in { from { transform: scale(0) rotate(-25deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes ribbon-in { from { transform: translateY(-30px) scaleY(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ribbon-sway { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
@keyframes rays-spin { to { transform: rotate(360deg); } }
@keyframes aura { from { opacity: 0.6; transform: scale(0.94); } to { opacity: 1; transform: scale(1.04); } }
@keyframes shine { 0% { transform: translateX(-20px) rotate(20deg); } 60%, 100% { transform: translateX(150px) rotate(20deg); } }
@keyframes spark { 0%, 100% { transform: scale(0.2) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
@keyframes fly-bob { from { transform: translateY(-3px) rotate(8deg); } to { transform: translateY(3px) rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .medal *, .medal-fly { animation: none !important; } }

/* ---------- Recompensas durante a partida (js/rewards.js) ---------- */
.reward-pop, .reward-word {
  position: fixed;
  z-index: 250;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-family: var(--font-title);
  font-weight: 700;
  color: var(--rw-color, #ffd34a);
  -webkit-text-stroke: 3px #4a2a08;
  paint-order: stroke fill;
  text-shadow: 0 3px 0 #4a2a08, 0 0 14px rgba(255, 211, 74, 0.6);
  white-space: nowrap;
}
.reward-pop { font-size: 1.5rem; --rw-color: #ffe27a; animation: reward-rise 1.1s ease-out forwards; }
.reward-word { font-size: 2.1rem; animation: reward-word 1.3s cubic-bezier(0.3, 1.5, 0.5, 1) forwards; }
@keyframes reward-rise {
  0% { transform: translate(-50%, -30%) scale(0.4); opacity: 0; }
  20% { transform: translate(-50%, -80%) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -260%) scale(1); opacity: 0; }
}
@keyframes reward-word {
  0% { transform: translate(-50%, -50%) scale(0.2) rotate(-6deg); opacity: 0; }
  25% { transform: translate(-50%, -50%) scale(1.15) rotate(2deg); opacity: 1; }
  70% { transform: translate(-50%, -60%) scale(1) rotate(0); opacity: 1; }
  100% { transform: translate(-50%, -110%) scale(0.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .reward-pop { animation: reward-fade 1s ease-out forwards; }
  .reward-word { animation: reward-fade 1.2s ease-out forwards; }
  @keyframes reward-fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
}

/* faísca que corre pela linha e pela coluna quando todos os ✕ de um vagalume estão marcados */
.cell.clear-wave { animation: clear-wave 0.4s ease-out both; animation-delay: var(--cw, 0ms); z-index: 3; }
@keyframes clear-wave {
  0% { filter: brightness(1); transform: scale(1); }
  35% { filter: brightness(1.9) drop-shadow(0 0 8px rgba(255, 236, 130, 1)); transform: scale(1.12); }
  100% { filter: brightness(1); transform: scale(1); }
}
.reward-tag {
  position: fixed;
  z-index: 250;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.05rem;
  color: #ffd34a;
  -webkit-text-stroke: 2.5px #4a2a08;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 #4a2a08;
  animation: reward-tag 1.2s ease-out forwards;
}
@keyframes reward-tag {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  25% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  75% { transform: translate(-50%, -70%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -110%) scale(0.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .cell.clear-wave { animation: none; } .reward-tag { animation: reward-fade 1.1s ease-out forwards; } }

/* ---------- Tira de vagalumes por região ---------- */
.region-strip { display: flex; justify-content: center; gap: 5px; margin: 0 0 6px; padding: 0 4px; }
.region-strip[hidden] { display: none; }
.rs-chip {
  flex: 1 1 0;
  max-width: 34px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--rs) 38%, rgba(0, 0, 0, 0.25));
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18);
  transition: background 0.3s;
}
.rs-fly { width: 78%; height: 78%; filter: grayscale(1) brightness(0.55) opacity(0.45); transition: filter 0.3s; }
.rs-fly .mark-cat { width: 100%; height: 100%; animation: none; position: static; background: none; }
.rs-chip.lit { background: var(--rs); }
.rs-chip.lit .rs-fly { filter: none; }
.rs-chip.rs-pop { animation: rs-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes rs-pop { 0% { transform: scale(0.7); } 55% { transform: scale(1.3); filter: brightness(1.5); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .rs-chip.rs-pop { animation: none; } }

/* Erro: linha vermelha rápida ligando a casa errada ao vagalume que a contradiz, com etiqueta curta */
.miss-layer { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 255; pointer-events: none; }
.miss-line {
  stroke: #ff4a4a;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  filter: drop-shadow(0 0 5px rgba(255, 60, 60, 0.9));
  animation: miss-draw 0.9s ease-out forwards;
}
@keyframes miss-draw {
  0% { stroke-dashoffset: var(--len); opacity: 1; }
  25% { stroke-dashoffset: 0; opacity: 1; }
  70% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.miss-label {
  position: fixed;
  z-index: 256;
  transform: translate(-50%, -50%);
  pointer-events: none;
  padding: 2px 10px;
  border-radius: 999px;
  background: #d92d2d;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  animation: miss-label 0.95s ease-out forwards;
}
@keyframes miss-label { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.7); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 75% { opacity: 1; } 100% { opacity: 0; } }
.cell.miss-ring { animation: miss-ring 0.8s ease-out; z-index: 3; }
@keyframes miss-ring { 0%, 60% { box-shadow: 0 0 0 4px #ff4a4a, 0 0 14px 4px rgba(255, 60, 60, 0.8); } 100% { box-shadow: 0 0 0 0 rgba(255, 74, 74, 0); } }
@media (prefers-reduced-motion: reduce) { .miss-line { animation: reward-fade 0.9s ease-out forwards; stroke-dashoffset: 0; } .miss-label { animation: reward-fade 0.95s ease-out forwards; } .cell.miss-ring { animation: none; } }

/* Palavra da vitória escrita por vagalumes (win-swarm.js): o título de texto fica só para leitores de tela */
.win-swarm { display: block; margin: 2px auto 0; max-width: 100%; }
.win-swarm[hidden] { display: none; }
#win.swarm-on #win-title, #lose.swarm-on #lose-title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* asas da medalha de ouro: as peças são posicionadas com transform no SVG, então a origem tem de ser o canto (0 0), não o centro de cada peça */
.medal .medal-wings, .medal .medal-wings * { transform-box: view-box; transform-origin: 0 0; }
#lose.swarm-on .modal-icon { display: none; }