/* The game is 16:9. It is sized so the whole game fits between the fixed site header and
   the bottom of the screen: as wide as the page allows, never taller than the space left. */
.ffg {
  --ffg-header: 108px;              /* fixed site header on desktop */
  --ffg-gap: 20px;
  --ffg-teal: #0e4853;
  --ffg-ink: #034752;
  /* The site header is fixed over the page, so start below it. */
  padding: calc(var(--ffg-header) + var(--ffg-gap)) clamp(12px, 2.5vw, 32px) clamp(48px, 6vw, 80px);
}
@media (max-width: 991px) {
  .ffg { --ffg-header: 90px; --ffg-gap: 14px; }
}

.ffg__frame {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 1680px;
  aspect-ratio: 1366 / 768;
  border-radius: 14px;
  overflow: hidden;
  background: var(--ffg-teal);
  box-shadow: 0 14px 40px rgba(3, 71, 82, 0.18);
}
@supports (width: min(1px, 2px)) {
  .ffg__frame {
    width: min(100%, 1680px, calc((100vh - var(--ffg-header) - 2 * var(--ffg-gap)) * 1366 / 768));
  }
}
@supports (height: 100svh) {
  .ffg__frame {
    width: min(100%, 1680px, calc((100svh - var(--ffg-header) - 2 * var(--ffg-gap)) * 1366 / 768));
  }
}
/* Phones: use the full width; the game opens full screen from its "Tap to play" card. */
@media (max-width: 600px) {
  .ffg { padding-left: 12px; padding-right: 12px; }
  .ffg__frame { width: 100%; border-radius: 10px; }
}

.ffg__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--ffg-teal);
}

.ffg__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}
.ffg__note {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(4, 22, 25, 0.8);
  color: #fff;
  font-size: 14px;
}

.ffg__about {
  max-width: 760px;
  margin: clamp(28px, 4vw, 48px) auto 0;
  text-align: center;
  color: var(--ffg-ink);
}
.ffg__title {
  margin: 0 0 12px;
  color: var(--ffg-ink);
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.1;
}
.ffg__intro p {
  margin: 0 0 8px;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.5;
  color: var(--ffg-ink);
}
.ffg__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}
.ffg__ctas .btn-wrapper { margin: 0; }