/* ===== WIĘCEJ GOLI ===== */
#page-gole { overflow-x: clip; }
#page-gole .container { max-width: 680px; }

/* Tytuł w jednej linii */
#page-gole .title-top { white-space: nowrap; font-size: clamp(16px, 5vw, 76px); }

/* Scoreboard jak wisielec — większy */

/* Tło — stadion z liniami boiska */
#page-gole::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 40% 50% at 5% 50%, rgba(245,200,66,0.05) 0%, transparent 70%),
    radial-gradient(ellipse 35% 40% at 95% 60%, rgba(26,122,58,0.08) 0%, transparent 70%);
}

/* Piłki i liczby w tle */
.gl-bg-ball {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  opacity: 0.07;
}
.gl-bg-num {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  font-family: 'Bebas Neue', sans-serif;
  color: rgba(255,255,255,0.05);
  font-size: clamp(32px, 5vw, 60px);
  letter-spacing: 4px;
  user-select: none;
}

.gl-progress-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gl-progress-bar {
  width: 100%;
  height: 5px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.gl-progress-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.gl-timer-bar {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.07);
  border-radius: 2px;
  overflow: hidden;
}
.gl-timer-info {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 2px;
}
.gl-timer-sec {
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(240,244,239,0.45);
  line-height: 1;
  transition: color 0.3s;
}
.gl-timer-sec.danger { color: rgba(231,76,60,0.7); }
.gl-timer-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 2px;
  transition: width 0.1s linear, background 0.3s;
}
.gl-timer-fill.danger { background: #e74c3c; }

.gl-vs {
  display: flex;
  gap: 10px;
  align-items: stretch;
  width: 100%;
}

.gl-card {
  flex: 1;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.18s;
  position: relative;
  min-height: 180px;
  justify-content: center;
}
.gl-card:hover:not(.gl-disabled) {
  border-color: rgba(245,200,66,0.5);
  background: rgba(245,200,66,0.06);
  transform: translateY(-2px);
}
.gl-card.gl-selected {
  border-color: var(--gold);
  background: rgba(245,200,66,0.1);
}
.gl-card.gl-correct {
  border-color: #2ecc71;
  background: rgba(46,204,113,0.12);
}
.gl-card.gl-wrong {
  border-color: #e74c3c;
  background: rgba(231,76,60,0.1);
}
.gl-card.gl-disabled { cursor: default; }

.gl-flag {
  line-height: 1;
  display: flex;
  justify-content: center;
}
.gl-flag img { width: 44px; height: auto; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.gl-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(18px, 4vw, 26px);
  letter-spacing: 1px;
  text-align: center;
  line-height: 1.1;
  color: #f0f4ef;
}
.gl-club {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(240,244,239,0.7);
  text-align: center;
}
.gl-goals-reveal {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  color: var(--gold);
  line-height: 1;
  opacity: 0;
  transition: opacity 0.3s;
}
.gl-goals-reveal.visible { opacity: 1; }
.gl-goals-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(240,244,239,0.35);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.3s;
}
.gl-goals-label.visible { opacity: 1; }

.gl-vs-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 4px;
  color: rgba(240,244,239,0.3);
  flex-shrink: 0;
  width: 52px;
}

.gl-feedback {
  min-height: 36px;
  text-align: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  transition: opacity 0.3s;
}
.gl-feedback.correct { color: #2ecc71; }
.gl-feedback.wrong   { color: #e74c3c; }
.gl-feedback.draw    { color: rgba(240,244,239,0.5); }

.gl-streak-badge.pulse {
  animation: glPulse 0.4s ease;
}
@keyframes glBonusFly {
  0%   { opacity:1; transform: translateY(0); }
  100% { opacity:0; transform: translateY(-30px); }
}
@keyframes glPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); background: rgba(245,200,66,0.25); }
  100% { transform: scale(1); }
}

@keyframes glCorrectFlash {
  0%   { box-shadow: 0 0 0 0 rgba(46,204,113,0.6); }
  100% { box-shadow: 0 0 0 16px rgba(46,204,113,0); }
}
.gl-card.gl-correct { animation: glCorrectFlash 0.5s ease; }

@keyframes glWrongShake {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-6px); }
  75%     { transform: translateX(6px); }
}
.gl-card.gl-wrong { animation: glWrongShake 0.35s ease; }


/* ===== WIĘCEJ GOLI — ANIMACJE ===== */
/* Narastanie liczby */
@keyframes glCountUp {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}
.gl-goals-reveal.counting {
  animation: glCountUp 0.3s ease forwards;
}
/* Spotlight */
.gl-card.gl-spotlight {
  box-shadow: 0 0 0 3px #2ecc71, 0 0 40px rgba(46,204,113,0.5);
  transition: box-shadow 0.3s ease;
}
.gl-card.gl-dimmed {
  opacity: 0.45;
  transition: opacity 0.3s ease;
}
/* Ripple na karcie */
.gl-card { position: relative; overflow: hidden; }
.gl-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(46,204,113,0.3);
  transform: scale(0);
  animation: glRippleAnim 0.8s ease forwards;
  pointer-events: none;
}
@keyframes glRippleAnim {
  to { transform: scale(4); opacity: 0; }
}