/* Mobile app shell, touch UX, and PWA display-mode polish - cream site */

:root {
  --app-header-h: 88px;
  --app-dock-h: 72px;
  --app-gutter-mobile: 16px;
  --app-paper: #faf8f3;
  --app-ink: #121413;
  --app-line: #d8d6cf;
  --app-orange: #fc4d2e;
  --app-yellow: #ffe44f;
}

/* Prefer text-style arrows over iOS emoji glyphs (➡️↗️↘️) */
.arrow,
.btn [aria-hidden="true"],
.button [aria-hidden="true"],
.card-bottom b[aria-hidden="true"],
.circle-btn,
.round,
.read b[aria-hidden="true"],
.topic .up,
.policy-back-icon,
.shot-body b[aria-hidden="true"] {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-variant-emoji: text;
}

/*
  iOS Safari paints unstyled buttons system-blue unless color + fill are set.
  Inherit body ink by default; explicit color rules still win via currentColor.
*/
button {
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

.menu-btn,
.menu-button,
.menu-toggle,
.icon-btn,
.filter-btn,
.filter,
.reset-btn,
.nav-mega-trigger {
  color: var(--app-ink, #121413);
  -webkit-text-fill-color: var(--app-ink, #121413);
}

.filter-btn.is-selected,
.filter[aria-pressed="true"] {
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.policy-tabs a {
  -webkit-text-fill-color: currentColor;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html.rycx-app {
  min-height: 100%;
}

body.rycx-app {
  min-height: 100dvh;
  background: var(--app-paper);
  color: var(--app-ink);
}

@supports (padding: env(safe-area-inset-top)) {
  .site-header,
  .header {
    padding-top: env(safe-area-inset-top, 0px);
  }
}

@media (display-mode: standalone) {
  html.rycx-app {
    overscroll-behavior-y: contain;
  }

  body.rycx-app {
    background: var(--app-paper);
  }

  .site-header,
  .header {
    background: rgba(250, 248, 243, 0.96);
    border-bottom: 1px solid var(--app-line);
  }

  .cookie-banner {
    background: var(--app-ink);
    color: #fffefa;
  }
}

@media (max-width: 820px) {
  :root {
    --app-header-h: 64px;
    --gutter: clamp(16px, 4.5vw, 28px);
    --pad: 21px;
  }

  .site-header,
  .header {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  .nav {
    min-height: var(--app-header-h);
    gap: 12px;
  }

  .logo-link img {
    width: min(168px, 46vw);
    height: auto;
    max-height: 44px;
  }

  .btn,
  .button,
  .btn-secondary,
  .landing-button,
  .contact-link,
  .policy-tabs a,
  .mobile-dock-item {
    min-height: 44px;
  }

  main,
  .content,
  .landing-shell,
  .policy-shell {
    overflow-x: clip;
  }

  .cookie-banner {
    border-radius: 18px;
  }
}

@media (max-width: 560px) {
  .mobile-dock {
    left: max(10px, env(safe-area-inset-left, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    border-radius: 24px;
  }

  .mobile-games-sheet-panel {
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
}

/* Game landings in standalone / narrow viewports */
@media (max-width: 820px) {
  body.game-site-page :is(.landing-shell, .page-shell, .game-page) :is(.landing-hero, .hero, .game-hero) {
    min-height: unset;
  }

  body.game-site-page :is(.landing-shell, .page-shell, .game-page) .landing-actions,
  body.game-site-page :is(.landing-shell, .page-shell, .game-page) .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  body.game-site-page :is(.landing-shell, .page-shell, .game-page) .landing-actions .landing-button,
  body.game-site-page :is(.landing-shell, .page-shell, .game-page) .hero-actions .button,
  body.game-site-page :is(.landing-shell, .page-shell, .game-page) .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  body.game-site-page :is(.landing-shell, .page-shell, .game-page) .screenshot-grid,
  body.game-site-page :is(.landing-shell, .page-shell, .game-page) .landing-screenshot-grid,
  body.game-site-page :is(.landing-shell, .page-shell, .game-page) .shot-grid {
    grid-template-columns: 1fr;
  }
}