/* ============================================================
   BALL SHOT GAME — ball_shot_game.css  v2.3
   ============================================================
   FIX PRINCIPAL v2.3:
   El problema era que #game-area tiene p-4/p-6 y overflow-y-auto.
   Con min-height:100% en el wrapper, flex-grow:1 en el canvas-wrap
   no funciona porque el padre no tiene una altura DEFINITIVA.
   Solución: la clase .ball-shot-active anula el padding y overflow
   del #game-area, y el wrapper usa height:100% + flex:1 1 0% en
   canvas-wrap para distribuir correctamente el espacio real.
   ============================================================ */

/* ── Override #game-area cuando ball-shot está activo ────────
   Se añade esta clase desde JS en buildGameUI() y se quita en
   showFinalScore() y close(). Anula el p-4/p-6 y el scroll.   */
#game-area.ball-shot-active {
  padding:    0 !important;
  overflow:   hidden !important;
}

/* ── Loading Screen ──────────────────────────────────────── */
.bsg-loading {
  height: 100%;
  width:  100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
}

.bsg-loading-ball {
  font-size: 3.5rem;
  animation: bsg-bounce 0.75s ease-in-out infinite alternate;
}

@keyframes bsg-bounce {
  from { transform: translateY(0px);   }
  to   { transform: translateY(-14px); }
}

.bsg-loading-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #60a5fa;
}

.bsg-loading-track {
  width: 180px;
  height: 7px;
  background: #1e293b;
  border-radius: 9999px;
  overflow: hidden;
  border: 1px solid rgba(96, 165, 250, 0.2);
}

.bsg-loading-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(to right, #3b82f6, #8b5cf6);
  transition: width 0.25s ease;
}

.bsg-loading-pct {
  font-size: 0.8rem;
  font-weight: 600;
  color: #818cf8;
  font-variant-numeric: tabular-nums;
}

/* ── Game Wrapper ────────────────────────────────────────────
   Ahora que #game-area.ball-shot-active tiene padding:0,
   height:100% funciona y el wrapper ocupa TODA la altura del
   game-area. box-sizing:border-box + padding propio dan el
   margen estético interno.                                    */
.ball-shot-wrap {
  height: 100%;
  width:  100%;
  box-sizing: border-box;
  padding: 0.45rem 0.5rem;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;

  overflow: hidden;
}

/* ── Shared card (glass dark-blue) ──────────────────────── */
.bsg-card {
  background: linear-gradient(
    135deg,
    #111827 0%,
    #172554 40%,
    #0f172a 100%
  );
  border: 1px solid rgba(96, 165, 250, 0.25);
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.08),
    0 0 18px rgba(37, 99, 235, 0.12),
    0 4px 18px rgba(0, 0, 0, 0.35);
  border-radius: 0.875rem;
}

/* ── Top Info Card ───────────────────────────────────────── */
.ball-shot-top-card {
  width: 100%;
  max-width: 48rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.6rem 0.9rem;
}

/* ── Image frame ─────────────────────────────────────────── */
.bsg-img-frame {
  position: relative;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 2px solid rgba(96, 165, 250, 0.5);
  background: #0f172a;
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.12),
    0 0 16px rgba(59, 130, 246, 0.25);
}

.bsg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.35s ease;
}

/* Shimmer while image loads */
.bsg-img-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0)    0%,
    rgba(255, 255, 255, 0.07) 50%,
    rgba(255, 255, 255, 0)   100%
  );
  background-size: 200% 100%;
  animation: bsg-shimmer 1.2s infinite linear;
  display: none;
}

@keyframes bsg-shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

/* Translation overlay (shown after answering) */
.bsg-img-translation {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(6, 182, 212, 0.90);
  color: #0c1526;
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
  padding: 5px 6px;
  line-height: 1.25;
  border-radius: 0 0 0.625rem 0.625rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: bsg-slide-up 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes bsg-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Top info text */
.bsg-top-info {
  flex: 1;
  min-width: 0;
}

.bsg-q-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: #fbbf24;
  line-height: 1.3;
}

.bsg-q-hint {
  font-size: 0.68rem;
  color: #64748b;
  margin-top: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bsg-progress {
  flex-shrink: 0;
  font-family: ui-monospace, monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: #818cf8;
}

/* ── Divider ─────────────────────────────────────────────── */
.bsg-divider {
  width: 100%;
  max-width: 48rem;
  height: 1px;
  flex-shrink: 0;
  background: linear-gradient(to right, transparent, #3b82f6 50%, transparent);
  opacity: 0.5;
}

/* ── Canvas Wrapper ──────────────────────────────────────────
   flex: 1 1 0%  →  basis 0 + grow para llenar espacio real.
   Con basis:auto el flex-grow tomaría el valor del min-height
   anterior como punto de partida, haciendo que el canvas no
   creciera hasta su tamaño real.                              */
.bsg-canvas-wrap {
  width: 100%;
  flex: 1 1 0%;          /* crecer desde 0, no desde min-height */
  position: relative;
  overflow: hidden;
  min-height: 100px;     /* mínimo de seguridad */
}

.bsg-canvas {
  width:  100%;
  height: 100%;
  display: block;
}

/* ── Feedback Layer ──────────────────────────────────────── */
.bsg-feedback-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.bsg-feedback-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 1rem 2.25rem;
  border-radius: 1rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: bsg-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.bsg-feedback-box.correct {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(52, 211, 153, 0.45);
  box-shadow:
    0 0 30px rgba(52, 211, 153, 0.22),
    inset 0 0 15px rgba(52, 211, 153, 0.06);
}

.bsg-feedback-box.wrong {
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(251, 113, 133, 0.45);
  box-shadow:
    0 0 30px rgba(251, 113, 133, 0.22),
    inset 0 0 15px rgba(251, 113, 133, 0.06);
}

@keyframes bsg-pop {
  from { transform: scale(0.4) translateY(16px); opacity: 0; }
  to   { transform: scale(1)   translateY(0px);  opacity: 1; }
}

.bsg-fb-icon { font-size: 2.25rem; line-height: 1; }

.bsg-fb-msg {
  font-size: 1.375rem;
  font-weight: 800;
  color: #f1f5f9;
  line-height: 1.2;
}

.bsg-fb-cd {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(241, 245, 249, 0.5);
  margin-top: 0.1rem;
}

/* ── Controls ────────────────────────────────────────────── */
.bsg-controls {
  width: 100%;
  max-width: 48rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.6rem 0.9rem;
}

.bsg-power-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.bsg-power-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.bsg-power-lbl {
  font-size: 0.7rem;
  font-weight: 700;
  color: #60a5fa;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.bsg-power-sub {
  font-size: 0.62rem;
  color: #475569;
  white-space: nowrap;
}

.bsg-power-track {
  width: 100%;
  height: 1.125rem;
  background: #0f172a;
  border-radius: 9999px;
  overflow: hidden;
  border: 1px solid rgba(96, 165, 250, 0.18);
}

.bsg-power-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(to right, #22c55e, #eab308, #ef4444);
  transition: width 0.1s linear;
}

/* ── Shoot Button ────────────────────────────────────────── */
.bsg-shoot-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.7rem 1.5rem;
  flex-shrink: 0;
  border: none;
  border-radius: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;

  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  box-shadow:
    0 0 16px rgba(59, 130, 246, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.3);
  transition:
    transform  0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.bsg-shoot-btn:not(:disabled):active { transform: scale(0.93); }

.bsg-shoot-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

.bsg-shoot-btn.charging {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  box-shadow:
    0 0 22px rgba(239, 68, 68, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.3);
  animation: bsg-pulse-btn 0.45s ease-in-out infinite alternate;
}

@keyframes bsg-pulse-btn {
  from { transform: scale(1);    box-shadow: 0 0 14px rgba(239,68,68,.4); }
  to   { transform: scale(1.05); box-shadow: 0 0 30px rgba(239,68,68,.75); }
}

.bsg-shoot-icon  { font-size: 1.4rem;  line-height: 1; }
.bsg-shoot-label { font-size: 0.78rem; font-weight: 700; }

/* ── Móvil < 640px ───────────────────────────────────────── */
@media (max-width: 640px) {

  .ball-shot-wrap {
    padding: 0.35rem 0.4rem;
    gap: 0.35rem;
  }

  .ball-shot-top-card {
    padding: 0.45rem 0.6rem;
    gap: 0.55rem;
  }

  .bsg-img-frame   { width: 72px; height: 72px; }

  .bsg-img-translation { font-size: 0.65rem; padding: 4px 5px; }

  .bsg-q-label   { font-size: 0.8rem;  }
  .bsg-q-hint    { display: none; }

  .bsg-progress  { font-size: 0.82rem; }

  .bsg-controls  { padding: 0.45rem 0.6rem; gap: 0.55rem; }
  .bsg-power-sub { display: none; }

  .bsg-shoot-btn   { padding: 0.6rem 1.1rem; }
  .bsg-shoot-icon  { font-size: 1.15rem; }
  .bsg-shoot-label { font-size: 0.7rem;  }

  .bsg-fb-icon { font-size: 1.75rem; }
  .bsg-fb-msg  { font-size: 1.1rem;  }
}

/* ── Desktop ≥ 640px ─────────────────────────────────────── */
@media (min-width: 640px) {
  .bsg-img-frame { width: 112px; height: 112px; }

  .bsg-img-translation { font-size: 0.82rem; padding: 6px 8px; }

  .bsg-q-label { font-size: 1rem;    }
  .bsg-q-hint  { font-size: 0.72rem; }
}