/* Efeitos em pixel art: tela de partículas, textos flutuantes, flash, abanão e cartão de celebração. */

/* ===== Camadas: flash 410 < celebração 420 < textos 440 < partículas 460 ===== */
.fx-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 460;
  pointer-events: none;
  image-rendering: pixelated;
}

.fx-sr,
.fx-sr-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Texto flutuante (+XP, combo, erro) ===== */
.fx-float {
  --fx-o: #1C1626;
  --fx-s: #B45309;
  position: fixed;
  z-index: 440;
  pointer-events: none;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  color: #FDE047;
  transform: translate(-50%, -100%);
  text-shadow:
    2px 0 0 var(--fx-o), -2px 0 0 var(--fx-o), 0 2px 0 var(--fx-o), 0 -2px 0 var(--fx-o),
    2px 2px 0 var(--fx-o), -2px -2px 0 var(--fx-o), 2px -2px 0 var(--fx-o), -2px 2px 0 var(--fx-o),
    0 4px 0 var(--fx-s), 2px 4px 0 var(--fx-s), -2px 4px 0 var(--fx-s);
  animation: fxPopIn 160ms steps(1, end) both, fxRise 900ms steps(9, end) 120ms forwards;
}
.fx-float--combo { color: #FDBA74; --fx-o: #450A0A; --fx-s: #EF4444; font-size: 16px; }
.fx-float--bad { color: #FECACA; --fx-o: #450A0A; --fx-s: #B91C1C; }

@keyframes fxPopIn {
  0% { scale: 0.5; }
  50% { scale: 1.5; }
  100% { scale: 1; }
}
@keyframes fxRise {
  0% { translate: 0 0; opacity: 1; }
  66% { opacity: 1; }
  100% { translate: 0 -56px; opacity: 0; }
}

/* ===== Flash de ecrã (muito curto e subtil) ===== */
.fx-flash {
  position: fixed;
  inset: 0;
  z-index: 410;
  pointer-events: none;
  opacity: 0;
  animation: fxFlash 180ms steps(3, end) forwards;
}
.fx-flash--good { background: #34D399; }
.fx-flash--bad { background: #EF4444; }
@keyframes fxFlash {
  0% { opacity: 0.14; }
  100% { opacity: 0; }
}
[data-theme="dark"] .fx-flash--good { background: #10B981; }

/* ===== Abanão em degraus de 4px ===== */
.fx-shake { animation: fxShake 320ms steps(1, end); }
@keyframes fxShake {
  0% { translate: -4px 0; }
  14% { translate: 4px 0; }
  28% { translate: -4px 0; }
  42% { translate: 4px 0; }
  57% { translate: -4px 0; }
  71% { translate: 4px 0; }
  85% { translate: 0 0; }
  100% { translate: 0 0; }
}

/* ===== Cartão de celebração (nível / troféu) ===== */
.fx-cele {
  --ray-a: #FBBF24;
  --ray-b: #FDE047;
  --fx-edge: #1C1626;
  --fx-drop: rgba(28, 22, 38, 0.35);
  --fx-accent: #D97706;
  --fx-accent-ink: #FFFFFF;
  --fx-accent-dark: #92400E;
  --fx-plate: #FEF3C7;
  position: fixed;
  inset: 0;
  z-index: 420;
  display: grid;
  place-items: center;
  padding: 16px;
  cursor: pointer;
  background-color: rgba(30, 27, 75, 0.3);
  /* 2x2 dither so the dim backdrop reads as pixels, not blur */
  background-image: repeating-conic-gradient(rgba(30, 27, 75, 0.22) 0 25%, transparent 0 50%);
  background-size: 4px 4px;
  animation: fxFadeIn 200ms steps(4, end) both;
}
.fx-cele.fx-tier-level {
  --ray-a: #818CF8;
  --ray-b: #A5B4FC;
  --fx-accent: #4F46E5;
  --fx-accent-dark: #312E81;
  --fx-plate: #E0E7FF;
}
.fx-cele.fx-tier-gold {
  --fx-accent-ink: #1C1626; /* white on #D97706 is only 3.2:1 */
}
.fx-cele.fx-tier-silver {
  --ray-a: #94A3B8;
  --ray-b: #CBD5E1;
  --fx-accent: #64748B;
  --fx-accent-dark: #334155;
  --fx-plate: #E2E8F0;
}
.fx-cele.fx-tier-bronze {
  --ray-a: #F59E0B;
  --ray-b: #FDBA74;
  --fx-accent: #B45309;
  --fx-accent-dark: #78350F;
  --fx-plate: #FFEDD5;
}
[data-theme="dark"] .fx-cele {
  --fx-edge: #F59E0B;
  --fx-drop: rgba(0, 0, 0, 0.55);
  --fx-plate: #2A2210;
  background-color: rgba(2, 6, 23, 0.62);
  background-image: repeating-conic-gradient(rgba(2, 6, 23, 0.4) 0 25%, transparent 0 50%);
}
[data-theme="dark"] .fx-cele.fx-tier-level { --fx-edge: #818CF8; --fx-plate: #1E1B4B; }
[data-theme="dark"] .fx-cele.fx-tier-silver { --fx-edge: #CBD5E1; --fx-plate: #1E293B; }
[data-theme="dark"] .fx-cele.fx-tier-bronze { --fx-edge: #FB923C; --fx-plate: #2A1708; }

/* Moldura pixel: sombras nos 4 lados deixam os cantos em degrau */
.fx-cele-card {
  position: relative;
  width: min(100% - 8px, 360px);
  margin: 0 4px;
  padding: 32px 24px 20px;
  background: var(--surface);
  color: var(--ink);
  text-align: center;
  box-shadow:
    inset 0 4px 0 0 var(--fx-plate),
    inset 0 -4px 0 0 var(--surface2),
    0 -4px 0 0 var(--fx-edge),
    0 4px 0 0 var(--fx-edge),
    -4px 0 0 0 var(--fx-edge),
    4px 0 0 0 var(--fx-edge),
    0 12px 0 0 var(--fx-drop),
    8px 8px 0 0 var(--fx-drop);
  animation: fxCardIn 360ms steps(1, end) both;
}
.fx-cele-card:focus { outline: none; }
@keyframes fxCardIn {
  0% { scale: 0.5; }
  25% { scale: 0.75; }
  50% { scale: 1.08; }
  75% { scale: 0.98; }
  100% { scale: 1; }
}
@keyframes fxFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.fx-cele.is-out { animation: fxFadeOut 180ms steps(3, end) forwards; }
.fx-cele.is-out .fx-cele-card { animation: fxCardOut 180ms steps(3, end) forwards; }
@keyframes fxFadeOut { to { opacity: 0; } }
@keyframes fxCardOut { to { scale: 0.85; translate: 0 8px; } }

/* Fita do topo com pontas em degrau */
.fx-cele-eyebrow {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 16px);
  padding: 8px 12px;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 8px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--fx-accent-ink);
  background: var(--fx-accent);
  box-shadow:
    0 -4px 0 0 var(--fx-accent),
    0 4px 0 0 var(--fx-accent-dark),
    -4px 0 0 0 var(--fx-accent),
    4px 0 0 0 var(--fx-accent),
    -4px 4px 0 0 var(--fx-accent-dark),
    4px 4px 0 0 var(--fx-accent-dark);
}

/* Palco do ícone: raios em degraus a rodar por saltos de 10deg */
.fx-cele-stage {
  position: relative;
  width: 176px;
  height: 168px;
  margin: 4px auto 12px;
  display: grid;
  place-items: center;
}
.fx-cele-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 216px;
  height: 216px;
  margin: -108px 0 0 -108px;
  background: repeating-conic-gradient(var(--ray-a) 0 10deg, transparent 10deg 20deg, var(--ray-b) 20deg 30deg, transparent 30deg 40deg);
  -webkit-mask-image: radial-gradient(circle closest-side, #000 0 36%, rgba(0, 0, 0, 0.7) 36% 52%, rgba(0, 0, 0, 0.4) 52% 70%, rgba(0, 0, 0, 0.15) 70% 86%, transparent 86%);
  mask-image: radial-gradient(circle closest-side, #000 0 36%, rgba(0, 0, 0, 0.7) 36% 52%, rgba(0, 0, 0, 0.4) 52% 70%, rgba(0, 0, 0, 0.15) 70% 86%, transparent 86%);
  opacity: 0.9;
  animation: fxRaysIn 240ms steps(3, end) both, fxSpin 8s steps(36, end) infinite;
}
[data-theme="dark"] .fx-cele-rays { opacity: 0.7; }
@keyframes fxSpin {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}
@keyframes fxRaysIn {
  0% { scale: 0.4; }
  100% { scale: 1; }
}

/* Disco pixel por trás do ícone (círculo em escada via clip-path) */
.fx-cele-plate {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 104px;
  height: 104px;
  margin: -52px 0 0 -52px;
  background: var(--fx-plate);
  clip-path: polygon(32px 0, 72px 0, 72px 4px, 84px 4px, 84px 8px, 92px 8px, 92px 12px, 96px 12px, 96px 20px, 100px 20px, 100px 32px, 104px 32px, 104px 72px, 100px 72px, 100px 84px, 96px 84px, 96px 92px, 92px 92px, 92px 96px, 84px 96px, 84px 100px, 72px 100px, 72px 104px, 32px 104px, 32px 100px, 20px 100px, 20px 96px, 12px 96px, 12px 92px, 8px 92px, 8px 84px, 4px 84px, 4px 72px, 0 72px, 0 32px, 4px 32px, 4px 20px, 8px 20px, 8px 12px, 12px 12px, 12px 8px, 20px 8px, 20px 4px, 32px 4px);
}

.fx-cele-icon {
  position: relative;
  line-height: 0;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 0 rgba(28, 22, 38, 0.3));
  animation: fxIconPop 420ms steps(1, end) 140ms both, fxBob 1.2s steps(1, end) 600ms infinite;
}
.fx-cele-icon svg { display: block; }
@keyframes fxIconPop {
  0% { scale: 0; }
  20% { scale: 0.5; }
  40% { scale: 1.25; }
  70% { scale: 0.92; }
  100% { scale: 1; }
}
/* Bobs with top (not translate) so the sprite never lands on a fractional, blurred layer */
@keyframes fxBob {
  0%, 100% { top: 0; }
  50% { top: -4px; }
}

/* Brilhos a cintilar à volta do ícone */
.fx-spark {
  position: absolute;
  width: 20px;
  height: 20px;
  line-height: 0;
  animation: fxTwinkle 900ms steps(1, end) infinite;
}
.fx-spark svg { display: block; }
.fx-spark--1 { left: 12px; top: 20px; }
.fx-spark--2 { right: 8px; top: 8px; animation-delay: 300ms; }
.fx-spark--3 { right: 16px; bottom: 28px; animation-delay: 600ms; }
.fx-spark--4 { left: 24px; bottom: 12px; animation-delay: 150ms; }
.fx-spark--5 { left: 50%; top: -4px; margin-left: 28px; animation-delay: 450ms; scale: 0.6; }
.fx-spark--6 { left: 0; top: 50%; animation-delay: 750ms; scale: 0.6; }
@keyframes fxTwinkle {
  0% { opacity: 1; scale: 1; }
  33% { opacity: 1; scale: 0.6; }
  66% { opacity: 0; }
  100% { opacity: 1; scale: 1; }
}

.fx-cele-title {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.fx-cele--level .fx-cele-title { font-size: 24px; line-height: 1.5; }
.fx-cele-sub {
  margin: 8px auto 0;
  max-width: 30ch;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink2);
  text-wrap: pretty;
}
.fx-cele-hint {
  margin-top: 20px;
  display: block;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 8px;
  line-height: 2;
  text-wrap: balance;
  text-transform: uppercase;
  color: var(--muted);
}
.fx-cele-caret {
  display: inline-block;
  vertical-align: -1px;
  margin-right: 8px;
  background: var(--fx-accent);
  width: 6px;
  height: 10px;
  clip-path: polygon(0 0, 2px 0, 2px 2px, 4px 2px, 4px 4px, 6px 4px, 6px 6px, 4px 6px, 4px 8px, 2px 8px, 2px 10px, 0 10px);
  animation: fxBlink 800ms steps(1, end) infinite;
}
[data-theme="dark"] .fx-cele-caret { background: var(--fx-edge); }
@keyframes fxBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Barra segmentada que esvazia até fechar sozinho */
.fx-cele-timer {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: 4px;
  overflow: hidden;
}
.fx-cele-timer > i {
  display: block;
  height: 100%;
  background: var(--fx-accent);
  opacity: 0.55;
  transform-origin: left center;
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 12px);
  mask-image: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 12px);
  animation: fxDrain 3500ms steps(14, end) 100ms forwards;
}
[data-theme="dark"] .fx-cele-timer > i { background: var(--fx-edge); }
@keyframes fxDrain {
  from { width: 100%; }
  to { width: 0; }
}
.fx-cele.is-still .fx-cele-timer { display: none; }

@media (max-width: 420px) {
  .fx-cele-card { padding: 32px 16px 20px; }
  .fx-cele--level .fx-cele-title { font-size: 16px; line-height: 1.75; }
  .fx-cele-stage { width: 160px; height: 144px; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-float, .fx-flash, .fx-canvas { display: none; }
  .fx-cele, .fx-cele *, .fx-shake { animation: none !important; }
}