/* ========================================================================== */
/* MARIO GRID — CAPACITOR / NATIVE WEBVIEW COMPATIBILITY LAYER             */
/* Applies only when nativeShellRuntime.js confirms a Capacitor native shell. */
/* ========================================================================== */

html.capacitor-native {
  --native-safe-top-fallback: 0px;
  --native-safe-right-fallback: 0px;
  --native-safe-bottom-fallback: 0px;
  --native-safe-left-fallback: 0px;
  --native-safe-top: max(env(safe-area-inset-top, 0px), var(--native-safe-top-fallback));
  --native-safe-right: max(env(safe-area-inset-right, 0px), var(--native-safe-right-fallback));
  --native-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--native-safe-bottom-fallback));
  --native-safe-left: max(env(safe-area-inset-left, 0px), var(--native-safe-left-fallback));
  --native-content-inline: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: #020307;
}

html.capacitor-android {
  /* Android 15+ is edge-to-edge by default. env() wins when WebView exposes it. */
  --native-safe-top-fallback: 28px;
  --native-safe-bottom-fallback: 8px;
}

html.capacitor-ios {
  --native-safe-top-fallback: 20px;
  --native-safe-bottom-fallback: 8px;
}

html.capacitor-native,
html.capacitor-native body,
html.capacitor-native #root {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  overflow-x: clip;
}

html.capacitor-native body {
  min-height: var(--native-viewport-height, 100dvh);
  overscroll-behavior-x: none;
  touch-action: pan-y pinch-zoom;
  background: #020307;
}

html.capacitor-native img,
html.capacitor-native video,
html.capacitor-native canvas,
html.capacitor-native svg {
  max-width: 100%;
}

html.capacitor-native input,
html.capacitor-native select,
html.capacitor-native textarea,
html.capacitor-native button {
  max-width: 100%;
}

html.capacitor-native :where(
  .app-page,
  .landing-page,
  .auth-page,
  .dashboard-page,
  .ix-scene,
  .loading,
  .notice-layer,
  .earn-process-overlay
) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

html.capacitor-native :where(
  .app-header,
  .launch-banner,
  .hero-screen,
  .compact-status,
  .auth-compact-layout,
  .auth-compact-card,
  .dashboard-wrap,
  .dashboard-brandbar,
  .dash-launch-card,
  .dash-stats-grid,
  .dash-section,
  .earn-compact-page,
  .team-showcase,
  .team-network-page,
  .profile-showcase,
  .notification-panel
) > * {
  min-width: 0;
}

/* ---------- edge-to-edge / system bars ----------------------------------- */

html.capacitor-android .app-header {
  box-sizing: border-box;
  min-height: calc(62px + var(--native-safe-top));
  padding-top: var(--native-safe-top);
  padding-right: var(--native-safe-right);
  padding-left: var(--native-safe-left);
}

html.capacitor-android .dashboard-page {
  min-height: var(--native-viewport-height, 100dvh);
  padding-top: calc(8px + var(--native-safe-top));
  padding-right: max(7px, var(--native-safe-right));
  padding-bottom: calc(86px + var(--native-safe-bottom));
  padding-left: max(7px, var(--native-safe-left));
}

html.capacitor-android .dashboard-nav {
  right: max(7px, var(--native-safe-right));
  bottom: max(6px, var(--native-safe-bottom));
  left: max(7px, var(--native-safe-left));
  width: min(
    calc(100% - max(14px, calc(var(--native-safe-left) + var(--native-safe-right)))),
    430px
  );
}

html.capacitor-android .auth-compact-layout {
  box-sizing: border-box;
  min-height: var(--native-viewport-height, 100dvh);
  padding-top: max(10px, var(--native-safe-top));
  padding-right: max(10px, var(--native-safe-right));
  padding-bottom: max(10px, var(--native-safe-bottom));
  padding-left: max(10px, var(--native-safe-left));
}

html.capacitor-android .notice-layer,
html.capacitor-android .earn-process-overlay {
  box-sizing: border-box;
  padding-top: calc(12px + var(--native-safe-top));
  padding-right: calc(12px + var(--native-safe-right));
  padding-bottom: calc(12px + var(--native-safe-bottom));
  padding-left: calc(12px + var(--native-safe-left));
}

html.capacitor-android .ix-scene {
  box-sizing: border-box;
  padding-top: var(--native-safe-top);
  padding-right: var(--native-safe-right);
  padding-bottom: var(--native-safe-bottom);
  padding-left: var(--native-safe-left);
}

/* ---------- stable WebView viewport --------------------------------------- */

html.capacitor-native :where(.app-page, .landing-page, .auth-page, .loading) {
  min-height: var(--native-viewport-height, 100dvh);
}

html.capacitor-native.native-keyboard-open .auth-compact-layout {
  min-height: var(--native-viewport-height, 100dvh);
  align-items: start;
  overflow-y: auto;
}

html.capacitor-native.native-keyboard-open .auth-compact-card {
  min-height: auto;
}

html.capacitor-native.native-input-focused {
  scroll-padding-bottom: calc(var(--native-keyboard-inset, 0px) + 18px);
}

/* ---------- horizontal overflow containment ------------------------------ */

html.capacitor-native .app-header,
html.capacitor-native .launch-banner,
html.capacitor-native .hero-screen,
html.capacitor-native .compact-status,
html.capacitor-native .dashboard-wrap,
html.capacitor-native .dashboard-brandbar,
html.capacitor-native .dash-launch-card,
html.capacitor-native .dash-referral-row,
html.capacitor-native .dash-stats-grid,
html.capacitor-native .dash-earning-grid,
html.capacitor-native .dash-team-strip,
html.capacitor-native .dash-activity,
html.capacitor-native .earn-compact-page,
html.capacitor-native .team-showcase,
html.capacitor-native .profile-showcase {
  max-width: 100%;
  min-width: 0;
}

html.capacitor-native :where(
  .brand,
  .brand > span,
  .launch-banner > div,
  .hero-copy,
  .cta-row,
  .trust-rail,
  .steps,
  .dashboard-brand,
  .dashboard-brand > div,
  .single-reward-card > div,
  .earn-compact-header > div,
  .earn-quant-top > div,
  .earn-sector-name,
  .earn-sector-range,
  .team-network-heading > div,
  .team-referral-content,
  .team-referral-link-copy
) {
  min-width: 0;
}

html.capacitor-native :where(
  .hero-description,
  .auth-compact-brand p,
  .notice p,
  .dash-notification,
  .single-reward-card p,
  .profile-inner-hero p,
  .earn-inline-error,
  .earn-process-error p,
  .team-referral-content p
) {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

html.capacitor-native :where(
  .mini-link,
  .compact-cta,
  .text-action,
  .trust-rail .interactive-text,
  .steps .interactive-text,
  .single-reward-card b,
  .single-reward-card p,
  .dashboard-nav button span,
  .profile-settings-list button b,
  .team-copy-button,
  .team-native-share
) {
  white-space: normal;
  overflow-wrap: anywhere;
}

html.capacitor-native .interactive-text {
  max-width: 100%;
}

html.capacitor-native .interactive-word {
  max-width: 100%;
}

html.capacitor-native .interactive-word > [data-letter] {
  will-change: auto;
}

/* ---------- landing / header --------------------------------------------- */

html.capacitor-native .app-header {
  gap: 8px;
}

html.capacitor-native .brand {
  flex: 1 1 auto;
}

html.capacitor-native .brand img {
  flex: 0 0 auto;
}

html.capacitor-native .brand > span {
  overflow: hidden;
}

html.capacitor-native .brand b,
html.capacitor-native .brand small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.capacitor-native .mini-link {
  flex: 0 1 auto;
  line-height: 1.2;
  text-align: center;
}

html.capacitor-native .launch-banner {
  grid-template-columns: minmax(0, 1fr) minmax(136px, auto);
}

html.capacitor-native .launch-banner small,
html.capacitor-native .launch-banner strong {
  max-width: 100%;
  overflow-wrap: anywhere;
}

html.capacitor-native .countdown {
  width: 100%;
  max-width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

html.capacitor-native .countdown > div {
  min-width: 0;
}

html.capacitor-native .hero-screen {
  overflow: visible;
}

html.capacitor-native .hero-title {
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
}

html.capacitor-native .cta-row,
html.capacitor-native .trust-rail,
html.capacitor-native .steps {
  flex-wrap: wrap;
}

html.capacitor-native .compact-cta,
html.capacitor-native .text-action {
  min-width: 0;
}

/* ---------- dashboard ----------------------------------------------------- */

html.capacitor-native .dashboard-brandbar {
  gap: 8px;
}

html.capacitor-native .dashboard-brand {
  flex: 1 1 auto;
}

html.capacitor-native .dashboard-brand img {
  flex: 0 0 auto;
}

html.capacitor-native .dashboard-brand b,
html.capacitor-native .dashboard-brand small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.capacitor-native .notification-panel {
  right: 0;
  width: min(calc(100vw - 24px), 310px);
  max-width: calc(100vw - 24px);
}

html.capacitor-native .notification-panel article > div {
  min-width: 0;
}

html.capacitor-native .notification-panel article p {
  overflow-wrap: anywhere;
}

html.capacitor-native .dash-countdown {
  width: 100%;
  max-width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

html.capacitor-native .dash-countdown div {
  min-width: 0;
}

html.capacitor-native .dash-stat,
html.capacitor-native .dash-stat small,
html.capacitor-native .dash-stat strong,
html.capacitor-native .dash-stat em {
  min-width: 0;
  max-width: 100%;
}

html.capacitor-native .dash-stat small,
html.capacitor-native .dash-stat em {
  overflow-wrap: anywhere;
}

html.capacitor-native .single-reward-card {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

html.capacitor-native .dashboard-nav button {
  min-width: 0;
  min-height: 43px;
}

html.capacitor-native .dashboard-nav button span {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  line-height: 1.15;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* ---------- earnings ------------------------------------------------------ */

html.capacitor-native .earn-compact-page,
html.capacitor-native .earn-balance-grid,
html.capacitor-native .earn-quant-card,
html.capacitor-native .earn-sector-list,
html.capacitor-native .earn-sector-row,
html.capacitor-native .earn-process-modal {
  min-width: 0;
  max-width: 100%;
}

html.capacitor-native .earn-quant-button > span:nth-child(2) strong,
html.capacitor-native .earn-quant-button > span:nth-child(2) small,
html.capacitor-native .earn-quant-stats small,
html.capacitor-native .earn-quant-stats b,
html.capacitor-native .earn-process-phases small,
html.capacitor-native .earn-process-result p {
  max-width: 100%;
}

html.capacitor-native .earn-process-overlay {
  width: 100%;
}

/* ---------- team / profile ------------------------------------------------ */

html.capacitor-native .team-referral-grid {
  grid-template-columns: minmax(0, 1fr) minmax(108px, 138px);
}

html.capacitor-native .team-referral-content h1,
html.capacitor-native .team-referral-content p {
  max-width: 100%;
}

html.capacitor-native .team-referral-kicker,
html.capacitor-native .team-social-label,
html.capacitor-native .team-network-heading {
  flex-wrap: wrap;
}

html.capacitor-native .team-referral-link-shell {
  grid-template-columns: minmax(0, 1fr) auto;
}

html.capacitor-native .profile-card,
html.capacitor-native .profile-detail-list,
html.capacitor-native .profile-settings-list {
  max-width: 100%;
  min-width: 0;
}

/* ---------- long-language tuning ----------------------------------------- */

html.capacitor-native[lang='de'] :where(
  .brand small,
  .launch-banner small,
  .kicker,
  .dashboard-title,
  .dash-section h2,
  .team-network-heading > div > span,
  .team-referral-kicker > span:first-child
),
html.capacitor-native[lang='pl'] :where(
  .brand small,
  .launch-banner small,
  .kicker,
  .dashboard-title,
  .dash-section h2,
  .team-network-heading > div > span,
  .team-referral-kicker > span:first-child
),
html.capacitor-native[lang='ro'] :where(
  .brand small,
  .launch-banner small,
  .kicker,
  .dashboard-title,
  .dash-section h2,
  .team-network-heading > div > span,
  .team-referral-kicker > span:first-child
),
html.capacitor-native[lang='ru'] :where(
  .brand small,
  .launch-banner small,
  .kicker,
  .dashboard-title,
  .dash-section h2,
  .team-network-heading > div > span,
  .team-referral-kicker > span:first-child
) {
  letter-spacing: 0.08em;
}

/* ---------- compact phones ------------------------------------------------ */

@media (max-width: 520px) {
  html.capacitor-native {
    --native-content-inline: 8px;
  }

  html.capacitor-native .app-header,
  html.capacitor-native .launch-banner,
  html.capacitor-native .hero-screen,
  html.capacitor-native .compact-status {
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
  }

  html.capacitor-native .mini-link {
    max-width: 46%;
    padding-inline: 10px;
  }

  html.capacitor-native .launch-banner {
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) minmax(138px, 44%);
  }

  html.capacitor-native .countdown {
    gap: 0;
  }

  html.capacitor-native .countdown > div {
    padding-inline: 2px;
  }

  html.capacitor-native .hero-title {
    line-height: 1.02;
  }

  html.capacitor-native .cta-row {
    row-gap: 10px;
  }

  html.capacitor-native .auth-compact-layout {
    padding-right: max(0px, var(--native-safe-right));
    padding-left: max(0px, var(--native-safe-left));
  }

  html.capacitor-native .auth-compact-card {
    width: min(100%, 390px);
    max-width: 100%;
    min-height: calc(
      var(--native-viewport-height, 100dvh)
      - var(--native-safe-top)
      - var(--native-safe-bottom)
    );
  }

  html.capacitor-native .dashboard-wrap {
    width: min(100%, 430px);
  }

  html.capacitor-native .dash-countdown strong {
    font-size: clamp(1.28rem, 7vw, 1.65rem);
  }

  html.capacitor-native .earn-sector-row {
    width: 100%;
  }

  html.capacitor-native .team-referral-grid {
    grid-template-columns: minmax(0, 1fr) minmax(96px, 118px);
    gap: 9px;
  }
}

@media (max-width: 390px) {
  html.capacitor-native .brand b {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
  }

  html.capacitor-native .brand small {
    font-size: 0.28rem;
    letter-spacing: 0.12em;
  }

  html.capacitor-native .mini-link {
    max-width: 43%;
    font-size: 0.56rem;
  }

  html.capacitor-native .launch-banner {
    grid-template-columns: minmax(0, 1fr) minmax(130px, 46%);
  }

  html.capacitor-native .launch-banner small {
    letter-spacing: 0.12em;
  }

  html.capacitor-native .launch-banner strong {
    font-size: 0.7rem;
  }

  html.capacitor-native .countdown b {
    font-size: 0.76rem;
  }

  html.capacitor-native .dashboard-brand img {
    width: 62px;
    height: 50px;
  }

  html.capacitor-native .dashboard-brand b {
    font-size: 0.86rem;
    letter-spacing: 0.2em;
  }

  html.capacitor-native .dashboard-brand small {
    letter-spacing: 0.18em;
  }

  html.capacitor-native .team-referral-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 340px) {
  html.capacitor-native .launch-banner {
    grid-template-columns: 1fr;
  }

  html.capacitor-native .countdown {
    margin-top: 6px;
  }

  html.capacitor-native .mini-link {
    max-width: 40%;
    padding-inline: 8px;
  }

  html.capacitor-native .dash-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html.capacitor-native .dash-stat:nth-child(2) {
    border-right: 0;
  }

  html.capacitor-native .dash-stat:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(120, 128, 172, 0.18);
  }
}

/* Reduce expensive text effects while the keyboard is animating. */
html.capacitor-native.native-keyboard-open .interactive-word > [data-letter] {
  transform: none !important;
  filter: none !important;
  text-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html.capacitor-native * {
    scroll-behavior: auto !important;
  }
}