/* Nobigames global brand layer: loaded last on every generated page. */
:root {
  --brand: #2563eb;
  --brand-2: #1d4ed8;
  --brand-3: #60a5fa;
  --ac-cyan: #2563eb;
  --ac-green: #1d4ed8;
  --nobi-blue: #2563eb;
  --nobi-blue-dark: #1e40af;
  --nobi-blue-light: #dbeafe;
  --nobi-ink: #0f172a;
  --nobi-line: rgba(37, 99, 235, 0.12);
}

html body {
  color: var(--nobi-ink) !important;
  background-color: #f8fbff !important;
  background-image:
    linear-gradient(135deg, transparent 47.8%, rgba(37, 99, 235, 0.045) 48%, rgba(37, 99, 235, 0.045) 52%, transparent 52.2%),
    linear-gradient(45deg, transparent 47.8%, rgba(37, 99, 235, 0.045) 48%, rgba(37, 99, 235, 0.045) 52%, transparent 52.2%),
    linear-gradient(180deg, #ffffff 0%, #f3f7ff 55%, #ffffff 100%) !important;
  background-size: 42px 42px, 42px 42px, auto !important;
}

/* Turn the previous square/grid backdrop into a subtle crossed-line field. */
html body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 27px, rgba(37, 99, 235, 0.045) 28px 29px, transparent 30px 56px),
    repeating-linear-gradient(-45deg, transparent 0 27px, rgba(96, 165, 250, 0.04) 28px 29px, transparent 30px 56px) !important;
  background-size: 56px 56px !important;
  opacity: 0.9 !important;
}

html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.28);
  outline-offset: 3px;
}

/* Square gaming badge with an N monogram and crossed controller-style face. */
.mh-brand-mark,
.brand-wordmark-mark {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(45deg, transparent 46%, rgba(255, 255, 255, 0.17) 47% 53%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, rgba(255, 255, 255, 0.13) 47% 53%, transparent 54%),
    linear-gradient(145deg, #60a5fa 0%, #2563eb 48%, #1e40af 100%) !important;
  box-shadow: 0 9px 22px rgba(37, 99, 235, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  font-family: "Saira", "Rajdhani", Arial, sans-serif !important;
  font-size: 27px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.05em !important;
  text-shadow: 0 2px 5px rgba(15, 23, 42, 0.3) !important;
  transform: none !important;
}

.mh-brand-mark::after,
.brand-wordmark-mark::after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: -6px 0 0 rgba(255, 255, 255, 0.72), 0 -6px 0 rgba(255, 255, 255, 0.72);
}

.mh-brand-name,
.brand-wordmark-name {
  color: var(--nobi-ink);
  letter-spacing: -0.035em;
}

.mh-brand-name span,
.brand-wordmark-name span {
  color: var(--nobi-blue) !important;
}

/* The footer wordmark sits on navy: keep Nobi white and games blue. */
.footer-v2-logo .brand-wordmark-name {
  color: #ffffff !important;
}

.footer-v2-logo .brand-wordmark-name span {
  color: #60a5fa !important;
}

.mh-eyebrow,
.mh-section-heading__eyebrow,
.mh-hero h1 span,
.mh-section-heading span,
.mh-header-search,
.mh-quick-nav a > span:last-child {
  color: var(--nobi-blue) !important;
}

.mh-eyebrow::before,
.mh-section-heading::before,
.mh-section-heading__eyebrow::before {
  background: linear-gradient(90deg, #60a5fa, #2563eb) !important;
}

.mh-faq-item summary::after {
  color: #1d4ed8 !important;
  background: #dbeafe !important;
  border: 1px solid rgba(37, 99, 235, 0.18);
}

.mh-bento-card:not(.mh-bento-card--intro) .mh-bento-card__number {
  color: #1d4ed8 !important;
  background: #dbeafe !important;
  border: 1px solid rgba(37, 99, 235, 0.18);
}

.mh-site-header,
.site-header,
.header,
.top-header {
  border-color: rgba(37, 99, 235, 0.14);
}

.mh-button--primary,
.mh-header-cta,
.btn-primary,
.primary-button,
.download-button,
.play-button,
.policy-button,
.footer-v2-button {
  color: #ffffff !important;
  border-color: #2563eb;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22);
}

/* Keep every blue action readable across generated templates and states. */
:is(
  .mh-button--primary,
  .mh-header-cta,
  .mh-section-link,
  .mh-category-chip.is-selected,
  .search-filter-row button.is-active,
  .btn-primary,
  .primary-button,
  .download-button,
  .play-button,
  .policy-button,
  .footer-v2-button,
  .btn-down,
  .pwa-install-bridge__button,
  .sticky-download-cta__button,
  .online-play-btn,
  .launch-play-btn,
  [data-pwa-play-cta="true"]
) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

:is(
  .mh-button--primary,
  .mh-header-cta,
  .mh-section-link,
  .mh-category-chip.is-selected,
  .search-filter-row button.is-active,
  .btn-primary,
  .primary-button,
  .download-button,
  .play-button,
  .policy-button,
  .footer-v2-button,
  .btn-down,
  .pwa-install-bridge__button,
  .sticky-download-cta__button,
  .online-play-btn,
  .launch-play-btn,
  [data-pwa-play-cta="true"]
) :is(span, strong, small, b, em, svg, path) {
  color: #ffffff !important;
  fill: currentColor !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* CTA icon tiles stay blue even though the surrounding button copy is white. */
:is(
  .sticky-online-game-cta__icon,
  .sticky-download-cta__icon,
  .sticky-store-cta__icon
) {
  color: #2563eb !important;
  background: linear-gradient(145deg, #eff6ff, #dbeafe) !important;
  border-color: rgba(37, 99, 235, 0.42) !important;
  -webkit-text-fill-color: #2563eb !important;
}

body .sticky-online-game-cta__button .sticky-online-game-cta__icon,
body .sticky-download-cta__button .sticky-download-cta__icon,
body .sticky-store-cta__button .sticky-store-cta__icon {
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
}

body .sticky-store-cta__button .sticky-store-cta__icon {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body .sticky-online-game-cta__button .sticky-online-game-cta__icon svg,
body .sticky-online-game-cta__button .sticky-online-game-cta__icon path,
body .sticky-online-game-cta__button .sticky-online-game-cta__icon use,
body .sticky-download-cta__button .sticky-download-cta__icon svg,
body .sticky-download-cta__button .sticky-download-cta__icon path,
body .sticky-download-cta__button .sticky-download-cta__icon use,
body .sticky-store-cta__button .sticky-store-cta__icon svg,
body .sticky-store-cta__button .sticky-store-cta__icon path,
body .sticky-store-cta__button .sticky-store-cta__icon use {
  color: #2563eb !important;
  fill: #2563eb !important;
  stroke: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
}

:is(
  .sticky-online-game-cta__icon,
  .sticky-download-cta__icon,
  .sticky-store-cta__icon
) :is(svg, path, use) {
  color: #2563eb !important;
  fill: #2563eb !important;
  stroke: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
}

.footer-v2,
.site-footer {
  --brand: #60a5fa;
  --brand-2: #2563eb;
  border-color: rgba(96, 165, 250, 0.22);
}

::selection {
  color: #ffffff;
  background: #2563eb;
}

@media (max-width: 640px) {
  .mh-brand-mark,
  .brand-wordmark-mark {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 10px !important;
    font-size: 24px !important;
  }
}
/* Keep the App Store mark compact in both available and unavailable buttons. */
.page-left > section.download .download-btns .btn:has(> .appstore-mark) {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  overflow: hidden;
}

.page-left > section.download .download-btns .btn > .appstore-mark {
  position: relative !important;
  inset: auto !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  flex: 0 0 44px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  background: transparent !important;
  transform: none !important;
}

.page-left > section.download .download-btns .btn:has(> .appstore-mark) > span {
  position: relative;
  z-index: 1;
  display: block !important;
  flex: 0 1 auto;
  max-width: calc(100% - 56px);
  opacity: 1 !important;
  white-space: normal;
}

@media (max-width: 767px) {
  .page-left > section.download .download-btns .btn:has(> .appstore-mark) {
    min-height: 78px !important;
    height: 78px !important;
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  .page-left > section.download .download-btns .btn > .appstore-mark {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    flex-basis: 36px !important;
  }

  .page-left > section.download .download-btns .btn:has(> .appstore-mark) > span {
    max-width: calc(100% - 46px);
  }
}

/* Semantic headings keep the same visual rhythm as the former title divs. */
.app-title h1.title {
  margin: 0;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Keep supporting fact cards quiet so the primary Download CTA remains dominant. */
.detail-page .info-grid:not(.download-key-facts) .info-card {
  border-color: #d9e6f8 !important;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 5px 14px rgba(31, 41, 55, 0.045) !important;
}

.detail-page .info-grid:not(.download-key-facts) .info-card .icon {
  opacity: 0.76 !important;
  filter: saturate(0.68) brightness(1.1);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.09) !important;
}

/* The play screen now carries only the two secondary facts from the detail page. */
body.online-game-player .play-key-facts .info-card[data-meta="controls"] .icon {
  --info-svg: url("../icons/stat-version.svg");
}

body.online-game-player .play-key-facts .info-card[data-meta="type"] .icon {
  --info-svg: url("../icons/stat-price.svg");
}