/*
  Mobile visual pass - 2026-06-20
  Purpose: keep the public/admin unified build visually consistent on phones,
  without touching saved content/checkpoint data.
*/

html,
body,
#root {
  max-width: 100%;
  overflow-x: hidden;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

@media (max-width: 767px) {
  :root {
    --echo-mobile-pad: clamp(14px, 4vw, 22px);
    --echo-mobile-bottom-safe: calc(18px + env(safe-area-inset-bottom, 0px));
  }

  main,
  .site-edit-surface {
    overflow-x: hidden !important;
  }

  /* Keep the audio control from covering titles and hero images on mobile. */
  .soundtrack-player {
    top: auto !important;
    left: auto !important;
    right: calc(12px + env(safe-area-inset-right, 0px)) !important;
    bottom: var(--echo-mobile-bottom-safe) !important;
    transform: none !important;
  }

  .soundtrack-toggle-button {
    width: 3.1rem !important;
    height: 3.1rem !important;
  }

  .soundtrack-player-shell,
  .soundtrack-flyout {
    max-width: calc(100vw - 1.5rem) !important;
  }

  /* Home carousel: preserve the desktop card feel without overflowing the phone. */
  .home-portal-view {
    min-height: 100vh !important;
    min-height: 100svh !important;
    padding: clamp(2.6rem, 8svh, 4.8rem) var(--echo-mobile-pad) calc(5.25rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .home-card-stage {
    width: min(29rem, calc(100vw - 1rem)) !important;
    max-width: min(29rem, calc(100vw - 1rem)) !important;
    height: clamp(27rem, 68svh, 35rem) !important;
    overflow: visible !important;
  }

  .home-portal-card {
    width: clamp(13.2rem, 60vw, 16.25rem) !important;
    height: clamp(20rem, 88vw, 25rem) !important;
    border-radius: 1.45rem !important;
  }

  /* Generic detail hero pages should become cinematic banners, not tall posters. */
  .detail-frame-shell {
    min-height: auto !important;
    padding: 1rem var(--echo-mobile-pad) 0 !important;
  }

  .detail-hero {
    min-height: auto !important;
    gap: 1.2rem !important;
    padding: clamp(2.2rem, 9vw, 3.5rem) 0 clamp(2.4rem, 9vw, 4rem) !important;
  }

  .detail-hero h1 {
    font-size: clamp(3rem, 16vw, 5.4rem) !important;
    line-height: 0.86 !important;
    overflow-wrap: anywhere;
  }

  .detail-hero p {
    max-width: 100% !important;
  }

  /* Universo / P.O.R.T.A.L detail view. */
  .universe-premise-page {
    min-height: auto !important;
    border-width: 0 !important;
    padding: var(--echo-mobile-pad) !important;
  }

  .universe-premise-page > header {
    gap: 0.9rem !important;
    padding-bottom: 0.9rem !important;
  }

  .universe-premise-page > header > div {
    width: 100% !important;
  }

  .universe-tab-back-button {
    height: 2.6rem !important;
    padding-inline: 0.95rem !important;
  }

  .universe-theme-status,
  .universe-theme-secondary {
    min-height: 2.55rem !important;
    padding: 0.72rem 0.95rem !important;
  }

  .universe-theme-secondary {
    flex: 1 1 12rem !important;
    text-align: center !important;
  }

  .universe-premise-layout {
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(1.15rem, 5vw, 2rem) 0 calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .universe-premise-text-panel,
  .universe-premise-text-panel > div {
    max-width: 100% !important;
  }

  .universe-main-title-glow {
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .universe-premise-text-panel .universe-main-title-glow,
  .universe-cards-intro .universe-main-title-glow,
  .universe-cards-focus .universe-main-title-glow {
    font-size: clamp(2.7rem, 13vw, 4.75rem) !important;
    line-height: 0.9 !important;
  }

  .universe-premise-text-panel p,
  .universe-main-scroll-text {
    max-width: 100% !important;
  }

  .universe-premise-copy {
    margin-top: clamp(1.5rem, 6vw, 2.4rem) !important;
    padding-left: 0 !important;
    border-left: 0 !important;
  }

  .universe-premise-paragraph,
  .universe-premise-callout,
  .universe-typewriter-paragraph {
    max-width: 100% !important;
    font-size: clamp(1rem, 4.25vw, 1.13rem) !important;
    line-height: 1.72 !important;
  }

  .universe-premise-section-title {
    font-size: clamp(2.1rem, 10vw, 3.4rem) !important;
    line-height: 0.98 !important;
  }

  /*
    Main fix for the reported screenshot:
    the premise banner had a desktop min-height, so it became almost square on phones.
  */
  .universe-premise-banner,
  .universe-premise-inline-visual,
  .universe-premise-media-shell,
  .universe-premise-gallery figure {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: clamp(0.85rem, 4vw, 1.15rem) !important;
  }

  .universe-premise-banner {
    margin-top: clamp(1.25rem, 5vw, 2rem) !important;
  }

  .universe-premise-banner img,
  .universe-premise-banner video,
  .universe-premise-inline-visual img,
  .universe-premise-inline-visual video,
  .universe-premise-media-shell img,
  .universe-premise-media-shell video,
  .universe-premise-gallery figure img,
  .universe-premise-gallery figure video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .universe-premise-inline-caption {
    left: 0.75rem !important;
    right: 0.75rem !important;
    bottom: 0.75rem !important;
  }

  /* Universo carousel: same stacked-card language, scaled for touch screens. */
  .universe-cards-view {
    padding: 2.4rem var(--echo-mobile-pad) calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .universe-card-stage {
    height: clamp(32rem, 75svh, 39rem) !important;
    margin-top: 1.75rem !important;
    border-radius: 1.25rem !important;
    overflow: hidden !important;
  }

  .universe-card-frame {
    width: clamp(15rem, 72vw, 20rem) !important;
    height: clamp(23rem, 103vw, 31rem) !important;
    border-radius: 1.25rem !important;
  }

  .universe-card-controls {
    bottom: 1rem !important;
    max-width: calc(100vw - 2rem) !important;
  }

  /* Conteudo Extra / Produtos. */
  .product-members-page {
    padding: clamp(2.5rem, 8vw, 4rem) var(--echo-mobile-pad) calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .product-members-page h1,
  .product-members-page h2 {
    font-size: clamp(2.55rem, 13vw, 4.6rem) !important;
    line-height: 0.94 !important;
    text-wrap: balance;
  }

  .product-members-page h3 {
    font-size: clamp(1.7rem, 8vw, 2.6rem) !important;
    line-height: 1 !important;
  }

  .member-sample-stage {
    min-height: clamp(30rem, 72svh, 37rem) !important;
  }

  .member-sample-card {
    width: clamp(15rem, 76vw, 21rem) !important;
    height: clamp(23rem, 108vw, 32rem) !important;
  }

  .member-sample-copy {
    right: 0.85rem !important;
    bottom: 0.85rem !important;
    left: 0.85rem !important;
    max-width: none !important;
  }

  .product-members-page .codex-exclusive-upload-surface,
  .product-members-page [data-admin-drop-target='media'],
  .product-members-page [data-admin-drop-target='panel'],
  .product-members-page [data-admin-drop-target='exclusive-section'] {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  .product-members-page .codex-exclusive-upload-surface img,
  .product-members-page .codex-exclusive-upload-surface video,
  .product-members-page [data-admin-drop-target='media'] img,
  .product-members-page [data-admin-drop-target='media'] video,
  .product-members-page [data-admin-drop-target='panel'] img,
  .product-members-page [data-admin-drop-target='panel'] video,
  .product-members-page [data-admin-drop-target='exclusive-section'] img,
  .product-members-page [data-admin-drop-target='exclusive-section'] video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Sobre / páginas de texto com imagem. */
  .about-copy-page {
    padding: clamp(2.4rem, 8vw, 4rem) var(--echo-mobile-pad) calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .about-copy-hero {
    min-height: auto !important;
    gap: 1.4rem !important;
    padding-block: 1.5rem !important;
  }

  .about-copy-hero h1,
  .about-copy-page h1,
  .about-copy-page h2 {
    font-size: clamp(2.55rem, 13vw, 4.7rem) !important;
    line-height: 0.94 !important;
    text-wrap: balance;
  }

  .about-copy-hero-visual,
  .about-copy-visual,
  .about-copy-section figure {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  .about-copy-hero-visual img,
  .about-copy-hero-visual video,
  .about-copy-visual img,
  .about-copy-visual video,
  .about-copy-section figure img,
  .about-copy-section figure video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

@media (max-width: 380px) {
  .universe-premise-text-panel .universe-main-title-glow,
  .universe-cards-intro .universe-main-title-glow,
  .universe-cards-focus .universe-main-title-glow {
    font-size: clamp(2.35rem, 12vw, 4rem) !important;
  }

  .home-portal-card,
  .universe-card-frame,
  .member-sample-card {
    transform-origin: center center;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .soundtrack-player {
    bottom: 10px !important;
  }

  .home-portal-view,
  .universe-cards-view,
  .product-members-page,
  .about-copy-page {
    padding-top: 1.5rem !important;
    padding-bottom: 3.75rem !important;
  }

  .home-card-stage,
  .universe-card-stage,
  .member-sample-stage {
    height: min(78svh, 28rem) !important;
    min-height: 22rem !important;
  }
}

/* Universo: phones render typography immediately; desktop animation stays on. */
@media (max-width: 767px), (max-width: 900px) and (pointer: coarse) {
  .universe-main-title-glow,
  .universe-main-scroll-text,
  .universe-premise-paragraph,
  .universe-premise-callout,
  .universe-typewriter-paragraph,
  .universe-typewriter-paragraph > span,
  .universe-premise-section-title,
  .universe-theme-pill,
  .universe-theme-status,
  .universe-theme-secondary,
  .universe-card-frame h1,
  .universe-card-frame h2,
  .universe-card-frame h3,
  .universe-card-frame p {
    animation: none !important;
    transition: none !important;
    filter: none !important;
    will-change: auto !important;
  }

  .universe-typewriter-ghost,
  .universe-typewriter-cursor {
    display: none !important;
  }

  .universe-typewriter-live {
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Keep the cinematic lighting, but render it as stable painted layers. */
  html[data-codex-universe-route='true'] .universe-premise-page,
  html[data-codex-universe-route='true'] .universe-theme-page {
    animation: none !important;
    transition: none !important;
    background-position: center top !important;
    will-change: auto !important;
  }

  html[data-codex-universe-route='true'] .universe-premise-page::before,
  html[data-codex-universe-route='true'] .universe-theme-page::before {
    animation: none !important;
    transition: none !important;
    mix-blend-mode: normal !important;
    opacity: 0.06 !important;
    will-change: auto !important;
  }

  html[data-codex-universe-route='true'] .universe-theme-atmosphere,
  html[data-codex-universe-route='true'] .universe-theme-grid,
  html[data-codex-universe-route='true'] .universe-theme-noise,
  html[data-codex-universe-route='true'] .universe-cinematic-depth,
  html[data-codex-universe-route='true'] .universe-cinematic-vignette,
  html[data-codex-universe-route='true'] .universe-cinematic-letterbox {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    will-change: auto !important;
  }

  html[data-codex-universe-route='true'] .universe-premise-text-panel::after {
    animation: none !important;
    transition: none !important;
    filter: none !important;
    opacity: 0.24 !important;
    will-change: auto !important;
  }

  /*
    "Sobre" particle field: the drift animates background-position, which forces
    a full repaint every frame and fights smooth scrolling on weaker phones.
    Keep the exact particle texture, just hold it static on phones.
  */
  .about-particles {
    animation: none !important;
  }
}

/*
  Honor reduced-motion at every width. The build's reduced-motion block only
  covers the universe layers, so the about-page particle drift kept repainting
  for users who explicitly asked for less motion. Same texture, no motion.
*/
@media (prefers-reduced-motion: reduce) {
  .about-particles {
    animation: none !important;
  }
}