/* Pringles Football — game.css
   UI joc 7 suturi. Overlay full-screen peste landing. */

/* ===== Overlay container ===== */
.fbg-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  overflow: hidden;
  color: #fff;
  font-family: 'Montserrat', Arial, sans-serif;
  background: #1a0608;
}
.fbg-overlay.is-open { display: block; }

html.fbg-open,
body.fbg-open {
  overflow: hidden;
  height: 100%;
}

/* Background stadion noapte cu confetti */
.fbg-overlay--card {
  background-image:
    linear-gradient(to bottom, rgba(120, 8, 14, 0.6) 0%, rgba(50, 5, 8, 0.85) 100%),
    url('../img/game/confetti.png');
  background-size: auto, 800px auto;
  background-position: center, center;
  background-repeat: no-repeat, repeat;
}

/* ===== Layout ===== */
.fbg-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

/* ===== Close button ===== */
.fbg-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fbg-close:hover { background: rgba(0, 0, 0, 0.75); }

/* ===== Modal Card (intro / regulament / lose) ===== */
.fbg-card {
  background: #e7151e;
  border: 4px solid #fff;
  border-radius: 28px;
  padding: 30px 28px 28px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  position: relative;
  text-align: center;
}

.fbg-card__ball {
  position: absolute;
  top: -38px;
  left: 50%;
  transform: translateX(-50%);
  width: 76px;
  height: 76px;
  background: url('../img/game/minge.png') center/contain no-repeat;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.fbg-card h2 {
  margin: 8px 0 16px;
  font-family: 'Roboto Condensed', 'Montserrat', Arial, sans-serif;
  font-weight: 800;
  font-size: 34px;
  letter-spacing: 1px;
  color: #fff200;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 #6e0c11, 2px 2px 0 #000;
}

.fbg-card p {
  margin: 8px 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  color: #fff;
}

.fbg-card p .num {
  color: #fff200;
  font-weight: 800;
  font-size: 24px;
}

.fbg-card__row-ball {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 6px 14px;
}
.fbg-card__row-ball::before,
.fbg-card__row-ball::after {
  content: '';
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 1px;
}
.fbg-card__row-ball-icon {
  width: 48px;
  height: 48px;
  background: url('../img/game/minge.png') center/contain no-repeat;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

/* ===== CTA buttons ===== */
.fbg-btn {
  display: inline-block;
  background: #fff200;
  color: #e7151e;
  border: 0;
  border-radius: 999px;
  padding: 14px 36px;
  font-family: 'Roboto Condensed', 'Montserrat', Arial, sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 5px 0 #b30c14, 0 8px 18px rgba(0, 0, 0, 0.35);
  text-decoration: none;
  margin-top: 16px;
  transition: transform .08s, box-shadow .08s;
}
.fbg-btn:hover { transform: translateY(-1px); }
.fbg-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #b30c14, 0 3px 6px rgba(0, 0, 0, 0.3); }

.fbg-btn--ghost {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: none;
}
.fbg-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }

/* ===== Ecran joc (gameplay) ===== */
.fbg-play {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 20px;
  box-sizing: border-box;
  background: url('../img/game/kv_homepage.png') center center/cover no-repeat;
}

/* Counter sus */
.fbg-counter {
  background: #e7151e;
  border: 4px solid #fff200;
  border-radius: 60px;
  padding: 10px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
  margin-top: 8px;
}
.fbg-counter__num {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 54px;
  font-weight: 800;
  color: #fff200;
  text-shadow: 3px 3px 0 #6e0c11;
  line-height: 1;
}
.fbg-counter__label {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.05;
  text-align: left;
}
.fbg-counter__slots {
  display: flex;
  gap: 6px;
}
.fbg-counter__slot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #2bbf3b;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform .25s, background .25s;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2);
}
.fbg-counter__slot.is-hit { background: #2bbf3b; }
.fbg-counter__slot.is-miss { background: #e7151e; }
.fbg-counter__slot.is-hit::after {
  content: '';
  width: 22px;
  height: 22px;
  background: url('../img/game/minge.png') center/contain no-repeat;
}
.fbg-counter__slot.is-miss::after {
  content: '\2715';
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}
.fbg-counter__slot.is-current {
  transform: scale(1.18);
  box-shadow: 0 0 0 4px rgba(255, 242, 0, .8), inset 0 -3px 0 rgba(0, 0, 0, 0.2);
}

/* Camp de joc — peste KV se proiecteaza keeper + ball */
.fbg-field {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
}

/* Portar — pozitionat in centrul portii (in KV poarta e ~ 50% horizontal, ~ 38% vertical) */
.fbg-keeper {
  position: absolute;
  top: 38%;
  left: var(--keeper-x, 50%);
  width: 13%;
  max-width: 110px;
  min-width: 64px;
  height: auto;
  z-index: 3;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(var(--keeper-rot, 0deg)) scale(var(--keeper-scale, 1));
  transition: left .55s cubic-bezier(.4, .2, .6, 1),
              transform .55s cubic-bezier(.4, .2, .6, 1);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
}

/* ===== Aim area — full-screen click target, fara cursor ===== */
.fbg-aim-area {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5;
  cursor: none; /* sageata galbena tine loc de cursor */
  background: transparent;
}
.fbg-aim-area.is-disabled { cursor: default; pointer-events: none; }

/* Sageata galbena — varful coincide exact cu pozitia cursorului */
.fbg-aim-arrow {
  position: absolute;
  top: var(--aim-y, 50%);
  left: var(--aim-x, 50%);
  width: 90px;
  height: 90px;
  background: url('../img/game/directie.png') center/contain no-repeat;
  pointer-events: none;
  /* translate(-50%, 0) => varful (top center al imaginii) coincide cu cursor */
  transform: translate(-50%, 0);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7))
          drop-shadow(0 0 14px rgba(255, 242, 0, 0.55));
  transition: opacity .25s;
  z-index: 7;
  opacity: 0;
}
.fbg-aim-arrow.is-visible { opacity: 1; }
.fbg-aim-area.is-disabled ~ .fbg-aim-arrow { opacity: 0; }

/* Hint deasupra portii */
.fbg-shoot-hint {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #fff200;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #6e0c11, 0 0 16px rgba(255, 242, 0, .5);
  animation: fbg-hint-blink 1.2s ease-in-out infinite;
  pointer-events: none;
  white-space: nowrap;
  z-index: 6;
}
@keyframes fbg-hint-blink {
  0%, 100% { opacity: .7; }
  50%      { opacity: 1; }
}
.fbg-shoot-hint.is-hidden { opacity: 0; animation: none; }

/* Minge la baza terenului */
.fbg-ball-wrap {
  position: absolute;
  bottom: 6vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
}
.fbg-ball {
  width: 96px;
  height: 96px;
  background: url('../img/game/minge.png') center/contain no-repeat;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55));
  animation: fbg-ball-idle-pulse 1.6s ease-in-out infinite;
}
@keyframes fbg-ball-idle-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

.fbg-ball-wrap.is-shooting .fbg-ball {
  animation: none;
  /* transform setat inline din JS rAF — curba parabolica smooth */
}

/* ===== Flash mesaj GOL / RATARE ===== */
.fbg-flash {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.5);
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 110px;
  font-weight: 800;
  letter-spacing: 6px;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s, transform .35s cubic-bezier(.34, 1.56, .64, 1);
  text-transform: uppercase;
}
.fbg-flash--gol {
  color: #fff200;
  text-shadow:
    -4px -4px 0 #2bbf3b,
     4px -4px 0 #2bbf3b,
    -4px  4px 0 #2bbf3b,
     4px  4px 0 #2bbf3b,
     0     8px 0 #186b13,
     0    18px 28px rgba(0, 0, 0, .55);
}
.fbg-flash--ratare {
  color: #fff;
  text-shadow:
    -4px -4px 0 #e7151e,
     4px -4px 0 #e7151e,
    -4px  4px 0 #e7151e,
     4px  4px 0 #e7151e,
     0     8px 0 #6e0c11,
     0    18px 28px rgba(0, 0, 0, .55);
}
.fbg-flash.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (max-width: 720px) {
  .fbg-flash { font-size: 72px; letter-spacing: 3px; }
}

/* ===== Outcome — WIN ===== */
.fbg-win {
  text-align: center;
  width: 100%;
  max-width: 480px;
  padding: 20px 16px;
}
.fbg-win__top-slots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: -28px;
  z-index: 4;
  position: relative;
}
.fbg-win h2 {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 72px;
  letter-spacing: 4px;
  color: #fff200;
  margin: 0 0 -14px;
  line-height: 1;
  text-shadow:
    -3px -3px 0 #e7151e,
     3px -3px 0 #e7151e,
    -3px  3px 0 #e7151e,
     3px  3px 0 #e7151e,
     0     5px 0 #6e0c11,
     0     8px 12px rgba(0, 0, 0, .5);
  position: relative;
  z-index: 2;
}
.fbg-win__inner {
  background: linear-gradient(to bottom, #4eb938 0%, #2b8a23 100%);
  border: 4px solid #fff;
  border-radius: 26px;
  padding: 30px 22px 22px;
  color: #fff;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
  position: relative;
}
.fbg-win__inner h3 {
  font-size: 22px;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  margin: 0 0 14px;
  font-weight: 800;
  color: #fff;
  text-shadow: 2px 2px 0 #1d6818;
}
.fbg-win__prize {
  width: 180px;
  height: 180px;
  margin: 10px auto 16px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
}

/* Form date livrare in WIN */
.fbg-addr-form {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 16px;
  padding: 16px 14px;
  color: #222;
  text-align: left;
}
.fbg-addr-form h4 {
  margin: 0 0 10px;
  font-size: 14px;
  color: #1a1a1a;
  text-align: center;
  font-weight: 700;
}
.fbg-addr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
}
.fbg-addr-grid label {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  font-weight: 600;
  color: #333;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.fbg-addr-grid label.full { grid-column: 1 / -1; }
.fbg-addr-grid input,
.fbg-addr-grid textarea {
  border: 1px solid #bbb;
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 13px;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  margin-top: 3px;
}
.fbg-addr-grid textarea { resize: vertical; min-height: 50px; }
.fbg-addr-form .err {
  color: #e7151e;
  font-size: 12px;
  margin: 6px 0 0;
  min-height: 14px;
}
.fbg-addr-form button[type=submit] {
  width: 100%;
  margin-top: 12px;
}
.fbg-addr-form__success {
  text-align: center;
  padding: 16px 4px;
}
.fbg-addr-form__success p {
  color: #1a1a1a;
  font-weight: 700;
}

/* ===== Outcome — LOSE ===== */
.fbg-lose__slots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: -50px auto 12px;
  position: relative;
  z-index: 2;
}

/* Confetti overlay (peste win scene) */
.fbg-confetti {
  position: absolute;
  inset: 0;
  background: url('../img/game/confetti.png') center/cover no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s;
  z-index: 1;
}
.fbg-confetti.is-on { opacity: .9; }

/* ===== Mobile ===== */
@media (max-width: 720px) {
  .fbg-card { max-width: 92%; padding: 28px 18px 22px; border-width: 3px; }
  .fbg-card h2 { font-size: 28px; }
  .fbg-card p { font-size: 15px; }

  .fbg-counter { padding: 8px 14px; gap: 10px; border-width: 3px; border-radius: 40px; }
  .fbg-counter__num { font-size: 38px; }
  .fbg-counter__label { font-size: 11px; }
  .fbg-counter__slot { width: 22px; height: 22px; }
  .fbg-counter__slot.is-hit::after { width: 14px; height: 14px; }
  .fbg-counter__slot.is-miss::after { font-size: 13px; }

  .fbg-keeper { width: 14%; max-width: 56px; min-width: 38px; }
  .fbg-keeper.dive-left  { transform: translate(calc(-50% - 60px), -45%) rotate(-18deg); }
  .fbg-keeper.dive-right { transform: translate(calc(-50% + 60px), -45%) rotate(18deg); }

  .fbg-ball { width: 70px; height: 70px; }
  .fbg-direction { width: 56px; }
  .fbg-ball-wrap.shoot-left  .fbg-ball { transform: translate(-130px, -30vh) scale(0.32); }
  .fbg-ball-wrap.shoot-center .fbg-ball { transform: translate(0, -32vh) scale(0.28); }
  .fbg-ball-wrap.shoot-right .fbg-ball { transform: translate(130px, -30vh) scale(0.32); }

  .fbg-win h2 { font-size: 48px; letter-spacing: 2px; }
  .fbg-win__prize { width: 140px; height: 140px; }
  .fbg-win__inner { padding: 24px 16px 18px; }
  .fbg-addr-grid { grid-template-columns: 1fr; }
}