/* MelumiyaChat v70 — mobile-first polish + preserve all existing artwork.
   Mobile only. Desktop composition is intentionally untouched. */

@media (max-width: 820px) {
  :root{
    --bg:#050207;
    --panel:#160a18;
    --line:#4d3154;
    --text:#fff9ff;
    --muted:#c9b9cb;
    --soft:#a48ea8;
    --indigo:#8f6697;
    --violet:#b889c2;
  }

  html{scroll-padding-top:76px;background:#050207!important}
  body{
    background:
      radial-gradient(circle at 7% 0%,rgba(118,80,127,.18),transparent 26rem),
      radial-gradient(circle at 100% 18%,rgba(74,43,83,.12),transparent 24rem),
      linear-gradient(180deg,#040105 0%,#08030a 50%,#050207 100%)!important;
    color:#fff9ff;
    overflow-x:hidden;
  }

  .shell{width:min(100% - 30px,var(--max))!important}

  /* Compact, useful mobile header. */
  .nav{background:rgba(5,1,8,.94)!important;border-bottom-color:rgba(132,91,143,.20)!important;backdrop-filter:blur(18px)}
  .nav-inner{min-height:66px!important;gap:10px!important}
  .brand{gap:8px!important}
  .brand img{width:42px!important;height:42px!important;border-radius:12px!important}
  .brand span{display:none!important}
  .nav-links,.nav-actions .secondary{display:none!important}
  .nav-actions{gap:8px!important;margin-left:auto}
  .nav-actions .button.primary{padding:10px 14px!important;border-radius:13px!important;font-size:.91rem!important;line-height:1.15;white-space:nowrap;min-height:42px!important;box-shadow:0 10px 28px rgba(88,56,95,.22)!important}

  /* Mobile typography: editorial, not billboard-sized. */
  .hero h1,.page-hero h1,
  body.changelog-page .changelog-hero h1,
  body.adult-page .adult-hero h1{
    font-size:clamp(2.55rem,11.5vw,3.35rem)!important;
    line-height:.98!important;
    letter-spacing:-.045em!important;
    text-wrap:balance;
  }
  .section h2,.page-section h2,
  body.v63-public-polish .page-section h2,
  body.adult-page .page-section h2{
    font-size:clamp(2rem,9.5vw,2.65rem)!important;
    line-height:1.03!important;
    letter-spacing:-.034em!important;
    text-wrap:balance;
  }
  .lead,.section-head p,.page-section p{font-size:1rem!important;line-height:1.6!important}
  .eyebrow{font-size:.72rem!important;letter-spacing:.17em!important;margin-bottom:10px!important}

  .hero,.page-hero{padding:42px 0 34px!important}
  .section,.page-section{padding:46px 0!important}
  .section.tight{padding:34px 0!important}
  .section-head{margin-bottom:22px!important}
  .footer{margin-top:34px!important;padding:34px 0 24px!important}

  /* Buttons should not dominate the whole viewport. */
  .button,.button.large{padding:11px 15px!important;border-radius:14px!important;font-size:.96rem!important;min-height:44px}
  .hero-actions{gap:9px!important;margin-top:22px!important}
  .hero-actions .button{flex:1 1 150px}
  .pill{padding:6px 9px!important;font-size:.75rem!important}

  /* Eliminate the remaining navy card language on phones. */
  .metric-card,.feature-card,.quote-card,.info-card,
  .proof-card,.truth-card,.source-box,.status-card,.legal-card,
  .flow-step,.mini-panel,.mini-field,.notice,
  .creator-program-callout,.creator-application-form,.creator-application-points span,
  .home-continuity-card,.home-core-card,.architecture-node,.architecture-strip,
  .story-card,.detail-card,.mini,.cta-panel,.callout,
  .adult-summary-card,.adult-card,.adult-note,.current-release-card,.release,
  .faq-list details{
    border-color:rgba(132,91,143,.28)!important;
    background:
      radial-gradient(circle at 100% 0%,rgba(118,80,127,.10),transparent 42%),
      linear-gradient(180deg,rgba(27,12,30,.93),rgba(10,4,12,.97))!important;
    box-shadow:0 16px 42px rgba(0,0,0,.20)!important;
  }
  .feature-card,.info-card,.quote-card,.proof-card,.truth-card,.source-box,.status-card,.legal-card{padding:20px!important;border-radius:20px!important;min-height:0!important}
  .proof-card-head,.verified-strip,.sample-badge,.mini-bubble,.plain-note,.compare-page .faq-list details{
    border-color:rgba(132,91,143,.28)!important;
    background:rgba(29,13,32,.88)!important;
    color:#e8dce9!important;
  }
  .mini-bubble.user{background:rgba(91,53,99,.54)!important}
  .proof-caption,.microcopy,.source-marker,.last-verified{color:#a994ad!important}
  .feature-card h3,.info-card h3,.truth-card h3,.legal-card h3{font-size:clamp(1.42rem,6.5vw,1.72rem)!important;margin:20px 0 8px!important;line-height:1.08!important}
  .feature-card p,.info-card p,.truth-card p,.legal-card p{font-size:.96rem!important;line-height:1.58!important;color:#c4b5c7!important}
  .quote-card{padding:26px 20px!important}
  .quote-card blockquote{font-size:clamp(1.9rem,8.7vw,2.5rem)!important;line-height:1.08!important}

  .feature-grid,.info-grid,.proof-grid,.truth-grid,.status-grid,.download-grid,.footer-grid{grid-template-columns:1fr!important;gap:14px!important}

  /* Home: retain the cinematic crowd artwork and make it actually visible. */
  .marketing-showcase .home-crowd-hero{
    min-height:570px!important;
    align-items:flex-end!important;
    background:#050207!important;
  }
  .marketing-showcase .home-crowd-hero::after{
    background-position:60% 10%!important;
    background-size:cover!important;
    opacity:.68!important;
    filter:saturate(.82) contrast(.96) brightness(.86)!important;
  }
  .marketing-showcase .home-crowd-hero::before{
    background:linear-gradient(180deg,rgba(5,2,8,.08) 0%,rgba(5,2,8,.24) 29%,rgba(5,2,8,.80) 57%,#050207 83%)!important;
  }
  .marketing-showcase .home-crowd-content{padding:245px 0 42px!important;max-width:100%!important}
  .marketing-showcase .home-crowd-content h1{font-size:clamp(2.85rem,12vw,3.6rem)!important}
  .marketing-showcase .home-crowd-content .lead{font-size:1rem!important}
  .marketing-showcase .home-core-strip{padding:12px 0 4px!important}
  .marketing-showcase .home-core-grid{gap:10px!important}
  .marketing-showcase .home-core-card{min-height:0!important;padding:18px!important}

  /* PRICE ART: use the same generated tier artwork on every mobile plan card,
     including the homepage cards (not only /plans/). */
  .plan-grid{grid-template-columns:1fr!important;gap:16px!important}
  .plan-grid > .plan{
    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;
    min-height:0!important;
    padding:22px!important;
    border-radius:22px!important;
    background-color:#09050b!important;
    background-repeat:no-repeat!important;
    background-size:cover!important;
    background-position:center 24%!important;
    box-shadow:0 20px 56px rgba(0,0,0,.32)!important;
  }
  .plan-grid > .plan::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:0!important;
    pointer-events:none!important;
    background:linear-gradient(180deg,rgba(6,2,8,.12) 0%,rgba(7,3,10,.36) 28%,rgba(7,3,10,.82) 64%,rgba(5,2,7,.97) 100%)!important;
  }
  .plan-grid > .plan > *{position:relative!important;z-index:1!important}
  .plan-grid > .plan:nth-child(1){background-image:url('/assets/tier-free-background.webp')!important;border-color:rgba(141,94,151,.45)!important}
  .plan-grid > .plan:nth-child(2){background-image:url('/assets/tier-plus-background.webp')!important;border-color:rgba(183,113,194,.55)!important}
  .plan-grid > .plan:nth-child(3){background-image:url('/assets/tier-pro-background.webp')!important;border-color:rgba(191,91,142,.52)!important}
  .plan-grid > .plan:nth-child(4){background-image:url('/assets/tier-ultra-background.webp')!important;border-color:rgba(197,139,73,.54)!important}
  .plan .tier{font-size:.72rem!important;letter-spacing:.16em!important;color:#d3a8d8!important}
  .plan .price,.plan .price[data-price]{font-size:clamp(2.35rem,11vw,3.05rem)!important;line-height:1!important;margin-top:8px!important;color:#fff9ff!important}
  .plan .period{font-size:.82rem!important;color:#c1afc5!important}
  .plan h3{font-size:clamp(1.55rem,7.2vw,2rem)!important;line-height:1.08!important;margin:18px 0 8px!important}
  .plan p{font-size:.94rem!important;line-height:1.55!important;color:#d0c0d2!important}
  .plan ul{margin:17px 0 18px!important;gap:7px!important;font-size:.91rem!important;line-height:1.45!important}
  .plan .button{margin-top:6px!important;width:100%!important}

  /* DOWNLOAD ART: desktop's art belongs on mobile too — both /download/ and homepage. */
  .download-grid{gap:16px!important}
  .download-grid > .download-card{
    position:relative!important;
    overflow:hidden!important;
    padding:176px 20px 20px!important;
    min-height:0!important;
    border-radius:22px!important;
    border-color:rgba(132,91,143,.30)!important;
    background:linear-gradient(180deg,rgba(26,11,29,.96),rgba(10,4,12,.98))!important;
  }
  .download-grid > .download-card::before{
    content:""!important;
    position:absolute!important;
    left:0!important;right:0!important;top:0!important;
    height:158px!important;
    background-size:cover!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
    z-index:0!important;
    opacity:1!important;
  }
  .download-grid > .download-card::after{
    content:""!important;
    position:absolute!important;
    left:0!important;right:0!important;top:72px!important;height:104px!important;
    background:linear-gradient(180deg,transparent,rgba(10,4,12,.99))!important;
    z-index:0!important;
    pointer-events:none!important;
  }
  .download-grid > .download-card > *{position:relative!important;z-index:1!important}
  .download-grid > .download-card:nth-child(1)::before{background-image:url('/assets/download-web-exact.webp')!important}
  .download-grid > .download-card:nth-child(2)::before{background-image:url('/assets/download-windows-exact.webp')!important}
  .download-grid > .download-card:nth-child(3)::before{background-image:url('/assets/download-android-exact.webp')!important}
  .download-card h3{font-size:clamp(1.75rem,8vw,2.2rem)!important;margin:8px 0!important;line-height:1.08!important}
  .download-card p{min-height:0!important;font-size:.96rem!important;line-height:1.55!important}
  .download-card .button{width:100%!important;margin-top:8px!important}
  .download-status,.download-number{font-size:.8rem!important;line-height:1.45!important}

  /* Character creation/product artwork — keep the image above the proof copy. */
  .character-media-stage{min-height:410px!important;padding:16px!important;border-color:rgba(132,91,143,.30)!important}
  .character-stage-image{opacity:.78!important;filter:saturate(.88) contrast(1.02)!important;background-position:center 30%!important}
  .character-media-stage::before{background:linear-gradient(180deg,rgba(6,2,8,.06),rgba(6,2,8,.18) 40%,rgba(8,3,10,.92) 78%,#08030a 100%)!important}
  .stage-dialogue blockquote{font-size:clamp(1.5rem,7vw,1.92rem)!important}
  .creation-media-slot,.scenario-media-slot,.group-media-stage{border-color:rgba(132,91,143,.30)!important;background:linear-gradient(180deg,rgba(25,11,28,.94),rgba(9,4,11,.98))!important}

  /* Scenario artwork: full-width, useful crops instead of tiny poster slivers. */
  .scenario-grid,.scenario-real-grid{grid-template-columns:1fr!important;gap:16px!important}
  .scenario-card{min-height:360px!important;border-color:rgba(132,91,143,.30)!important;background:#0c050e!important}
  .scenario-card img{opacity:.88!important}
  .scenario-real-media{aspect-ratio:16/12!important;min-height:260px!important}
  .scenario-real-media img{object-fit:cover!important;width:100%!important;height:100%!important}
  .scenario-copy{padding:18px!important}

  /* Creator + support hero artwork: show it as the hero, not a faint wallpaper. */
  body.creators-art-page .page-hero,
  body.support-art-page .page-hero{min-height:500px!important;align-items:flex-end!important;padding-top:230px!important}
  body.creators-art-page .page-hero::before,
  body.support-art-page .page-hero::before{width:100%!important;height:100%!important;opacity:.82!important;background-position:center top!important}
  body.creators-art-page .page-hero::after,
  body.support-art-page .page-hero::after{background:linear-gradient(180deg,rgba(7,2,8,.06) 0%,rgba(7,2,8,.22) 35%,rgba(7,2,8,.90) 68%,#070208 92%)!important}
  body.creators-art-page .page-hero .shell,
  body.support-art-page .page-hero .shell{padding-bottom:26px!important}

  /* Tables, forms and comparison content: compact + plum. */
  .table-wrap{border-color:rgba(132,91,143,.30)!important;background:#100613!important;border-radius:18px!important}
  th{color:#d0a8d4!important;background:rgba(84,48,91,.18)!important}
  td{color:#eadfeb!important}
  th,td{padding:12px 13px!important}
  .creator-application-form input,.creator-application-form select,.creator-application-form textarea{
    border-color:rgba(132,91,143,.34)!important;background:#0d050f!important;color:#f8eff8!important;
  }

  /* Less vertical marathon. */
  .architecture-strip,.cta-panel,.character-showcase,.memory-visual,.story-beats,.worldbible-visual{padding:20px!important}
  .architecture-flow{gap:10px!important}
  .architecture-node{padding:16px!important;min-height:0!important}
  .architecture-node strong{font-size:1.05rem!important}
  .home-continuity-grid{gap:12px!important}
  .home-continuity-card{padding:20px!important;min-height:0!important}
  .home-continuity-card h3{font-size:1.55rem!important}
  .home-continuity-card p{font-size:.94rem!important;line-height:1.55!important}

  .footer-brand img{width:min(220px,72vw)!important}
  .footer-grid{gap:22px!important}
  .footer h4{margin-bottom:7px!important}
  .footer a{margin:5px 0!important}
}

@media (max-width: 430px){
  .shell{width:calc(100% - 26px)!important}
  .nav-inner{min-height:62px!important}
  .brand img{width:39px!important;height:39px!important}
  .nav-actions .button.primary{font-size:.86rem!important;padding:9px 12px!important}
  .hero h1,.page-hero h1,body.changelog-page .changelog-hero h1,body.adult-page .adult-hero h1{font-size:clamp(2.35rem,11.3vw,3rem)!important}
  .section h2,.page-section h2,body.v63-public-polish .page-section h2,body.adult-page .page-section h2{font-size:clamp(1.9rem,9.2vw,2.4rem)!important}
  .marketing-showcase .home-crowd-hero{min-height:540px!important}
  .marketing-showcase .home-crowd-content{padding-top:228px!important}
  .plan-grid > .plan{padding:20px!important}
  .download-grid > .download-card{padding-left:18px!important;padding-right:18px!important}
}