:root {
  --spillplaz-cyan: #34d8e5;
  --spillplaz-dark: #12191f;
  --spillplaz-slate: #1b252f;
}

html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  max-width: 100%;
  overflow-x: hidden;
  background: var(--spillplaz-dark);
}

.hero {
  min-height: 58vh;
  background: linear-gradient(rgba(119, 91, 255, .72), rgba(92, 126, 255, .7)), url("assets/images/hero/partner-map.jpg") center/cover;
}

.hero-logo { width: min(18rem, 55vw); }
.btn-spillplaz {
  --bs-btn-color: #fff;
  --bs-btn-bg: #c80068;
  --bs-btn-border-color: #c80068;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #a90058;
  --bs-btn-hover-border-color: #a90058;
  padding: 12px 24px;
  border-radius: 100px;
  font-size: 15px;
  line-height: 1;
}
.floating-contact {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1080;
  box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .3);
}
.section-dark { background-color: var(--spillplaz-dark); }
.section-slate { background-color: var(--spillplaz-slate); }
.text-cyan { color: var(--spillplaz-cyan); }
.offer-card img { height: 220px; object-fit: cover; }
.offer-card .card-body { min-height: 250px; }
.offer-group { display: flex; flex-direction: column; }
.offer-group .offer-card { flex: 1 1 auto; }
.store-badge { width: 100%; max-width: 205px; height: auto; }
.social-link { color: #fff; width: 32px; height: 32px; }
.social-link:hover { color: var(--spillplaz-cyan); }
.social-link svg { width: 30px; height: 30px; }
.footer-email { color: #cc3366; }
.footer-email:hover { color: #a82956; }
.legal-footer { min-height: 150px; }

.detail-hero {
  min-height: 58vh;
  background-position: center;
  background-size: cover;
}

.detail-hero-logo { width: 76px; }
.detail-nav-wordmark { width: min(230px, 38vw); height: auto; }
.detail-icon { max-width: 180px; max-height: 180px; object-fit: contain; }
.detail-description { text-align: justify; hyphens: auto; }
.detail-copy { max-width: 960px; }

@media (max-width: 575.98px) {
  .row.g-5 {
    --bs-gutter-x: 1.5rem;
  }

  .hero {
    min-height: auto;
  }

  .hero-logo {
    width: min(10rem, 45vw);
  }

  .hero h1 {
    font-size: clamp(2rem, 10vw, 2.75rem);
  }

  .floating-contact {
    right: .75rem;
    bottom: calc(.75rem + env(safe-area-inset-bottom));
    padding: 10px 18px;
    font-size: 14px;
  }

  main > section {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  main h2,
  main h3 {
    overflow-wrap: anywhere;
  }

  .offer-card img {
    height: 185px;
  }

  .offer-card .card-body {
    min-height: auto;
    padding: 1.25rem !important;
  }

  .detail-hero {
    min-height: 400px;
  }

  .detail-hero nav {
    gap: .5rem;
  }

  .detail-hero-logo {
    width: 46px;
  }

  .detail-nav-wordmark {
    width: min(125px, 29vw);
  }

  .detail-hero nav > a:first-child {
    gap: .5rem !important;
  }

  .detail-hero nav .btn-spillplaz {
    flex-shrink: 0;
    padding: 9px 10px;
    font-size: 12.5px;
    white-space: nowrap;
  }

  .detail-hero h1 {
    font-size: clamp(2rem, 10vw, 3rem);
    overflow-wrap: anywhere;
  }

  .detail-description {
    line-height: 1.7 !important;
  }

  .detail-icon {
    max-width: 140px;
    max-height: 140px;
  }

  .store-badge {
    max-width: 180px;
  }
}