/* Cross-page mobile stability layer for index/tools/services/games/kontakt */

@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
  }

  /* Shared content framing */
  body.tools-page .page,
  body.games-page .page {
    width: min(23.5rem, calc(100% - 1rem));
    margin-top: calc(env(safe-area-inset-top, 0px) + 4.9rem) !important;
    margin-bottom: 1.4rem !important;
    padding-bottom: 0.35rem;
  }

  body.tools-page .page_intro,
  body.games-page .page_intro {
    width: 100%;
    margin-bottom: 0.78rem !important;
  }

  body.tools-page .page_title,
  body.games-page .page_title {
    font-size: clamp(1.26rem, 5.4vw, 1.72rem);
    line-height: 1.18;
  }

  body.tools-page .page_text,
  body.games-page .page_text {
    font-size: 0.9rem;
    line-height: 1.52;
    max-width: 100%;
  }

  body.tools-page .cards,
  body.games-page .cards {
    width: 100%;
    margin-top: 0.64rem;
    gap: 0.72rem;
  }

  body.tools-page .card,
  body.games-page .card {
    width: 100%;
    max-width: 100%;
    padding: 0.92rem !important;
  }

  body.tools-page .card_main,
  body.games-page .card_main {
    gap: 0.72rem;
  }

  body.tools-page .card_media,
  body.games-page .card_media {
    width: 80px;
    min-width: 80px;
    height: 80px;
  }

  body.tools-page .card_title,
  body.games-page .card_title {
    font-size: 1rem;
  }

  body.tools-page .card_text,
  body.games-page .card_text {
    font-size: 0.86rem;
    line-height: 1.44;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  body.tools-page .card_cta,
  body.games-page .card_cta {
    margin-top: 0.2rem;
    min-height: 36px;
  }

  /* Services and contact keep their own mobile layout, only tighten overflow safety */
  body.services_page .services_page_wrap,
  body.contact_page .contact_page_wrap {
    width: min(23.5rem, calc(100% - 1rem));
  }

  body.services_page .services_page_title,
  body.contact_page .contact_page_title {
    font-size: clamp(1.26rem, 5.4vw, 1.72rem);
    line-height: 1.18;
  }

  body.services_page .services_page_text,
  body.contact_page .contact_page_text {
    font-size: 0.9rem;
    line-height: 1.52;
    max-width: 100%;
  }

  body.contact_page .contact_page_intro {
    width: 100%;
  }

  body.contact_page .contact_section,
  body.contact_page :where(section, div, article):has(> #contact_form),
  body.contact_page :where(section, div, article):has(> form#contact_form),
  body.contact_page :where(section, div, article):has(> .contact_form) {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.contact_page .contact_textarea {
    min-height: 118px;
  }

  /* Footer spacing safety */
  body.has-site-footer main {
    padding-bottom: 0.6rem;
  }

  body.has-site-footer #site-footer {
    margin-top: 0.6rem !important;
  }

  /* Index: keep brand and nav from colliding */
  #graph-brand {
    top: calc(env(safe-area-inset-top, 0px) + 62px) !important;
    width: min(72vw, 300px) !important;
  }
}

@media (max-width: 420px) {
  body.tools-page .page,
  body.games-page .page,
  body.services_page .services_page_wrap,
  body.contact_page .contact_page_wrap {
    width: calc(100% - 0.8rem);
  }

  body.tools-page .page_text,
  body.games-page .page_text,
  body.services_page .services_page_text,
  body.contact_page .contact_page_text {
    font-size: 0.86rem;
    line-height: 1.46;
  }
}