/* ==========================================================================
   JOGOSRÁPIDOS — flux.css
   Jogo de reflexo em canvas. O enquadramento de tela cheia vem do modo stage
   (base.css). Aqui ficam os estilos próprios do FLUX, sem Bootstrap.
   ========================================================================== */

.flux {
  --flux-cyan: #00f2ff;
  --flux-purple: #7000ff;
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(circle at center, #0f0f0f 0%, #000 100%);
  border-radius: var(--radius);
}
.flux canvas { display: block; max-width: 100%; max-height: 100%; background: transparent; box-shadow: none; border-radius: 0; }

/* HUD de pontuação */
.flux__hud { position: absolute; top: 1.5rem; width: 100%; display: flex; flex-direction: column; align-items: center; pointer-events: none; z-index: 10; }
.flux__score { font-family: var(--font-title); font-size: clamp(2.5rem, 8vw, 3.5rem); font-weight: 700; letter-spacing: -0.125rem; line-height: 1; color: var(--snow); }
.flux__best { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1875rem; color: var(--flux-cyan); margin-top: 0.5rem; opacity: 0.85; }

/* Telas (menu e fim de game) */
.flux__tela { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(12px); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 100; padding: 2rem; text-align: center; transition: opacity 0.4s, transform 0.4s; }
.flux__tela--oculta { opacity: 0; pointer-events: none; transform: scale(1.05); }
.flux__titulo { font-family: var(--font-title); font-size: clamp(3.5rem, 12vw, 5.5rem); font-weight: 700; line-height: 1; background: linear-gradient(135deg, var(--flux-cyan), var(--flux-purple)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 1rem; }
.flux__legenda { color: var(--smoke); margin-bottom: 2.5rem; }

/* Cartão de resultado */
.flux__resultado { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1.5rem; padding: 2.5rem; width: 100%; max-width: 21.25rem; margin-bottom: 2rem; }
.flux__resultado-rotulo { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.0625rem; color: var(--smoke); margin-bottom: 0.75rem; }
.flux__resultado-num { font-family: var(--font-title); font-size: 4rem; font-weight: 700; line-height: 1; color: var(--snow); }
.flux__resultado-pts { color: var(--flux-cyan); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.0625rem; }
.flux__recorde-linha { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.flux__recorde-linha span { color: var(--smoke); font-size: 0.8rem; }
.flux__recorde-linha b { font-family: var(--font-title); font-size: 1.35rem; color: var(--snow); }

/* Botões (sem Bootstrap) */
.flux__btn { background: #fff; color: #000; border: none; padding: 1.05rem 3rem; font-family: var(--font-text); font-weight: 700; border-radius: 3.125rem; text-transform: uppercase; letter-spacing: 1px; width: 100%; max-width: 17.5rem; margin-bottom: 1rem; cursor: pointer; transition: transform 0.2s; }
.flux__btn:active { transform: scale(0.95); }

/* Dica de controles */
.flux__dica { position: absolute; bottom: 2rem; display: flex; gap: 3rem; opacity: 0.4; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.125rem; color: var(--snow); }

/* Botões laterais virtuais (desktop + mobile) */
.flux__btn-lado {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 50; width: 3.5rem; height: 7rem;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15);
  color: #fff; font-size: 1.5rem; border-radius: 0.5rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; touch-action: manipulation; user-select: none;
  transition: background 0.15s, transform 0.15s;
}
.flux__btn-lado:active { background: rgba(255,255,255,0.2); transform: translateY(-50%) scale(0.92); }
.flux__btn-lado--esq { left: 0.5rem; border-radius: 0 0.5rem 0.5rem 0; }
.flux__btn-lado--dir { right: 0.5rem; border-radius: 0.5rem 0 0 0.5rem; }