/* Mobile-only finishing pass. Every rule is isolated by the campaign id. */
@media (max-width: 768px) {
  .legacy-mobile-special-896 {
    background-color: #731100;
    background-image: url("https://imgs.dgrhw.net/api/secrecymaster/html_up/2019/1/20190131094930857.png");
    background-position: top center !important;
    background-repeat: repeat-y;
    background-size: 430px auto;
  }
  .legacy-mobile-special-896 .bodyer {
    width: min(100%, 430px) !important;
    margin-inline: auto;
  }
  .legacy-mobile-special-896 .qr_nav img {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1;
    object-fit: contain;
  }

  .legacy-mobile-special-1005 { background: #180500; }
  .legacy-mobile-special-1005 .mobile_box {
    width: min(100%, 520px) !important;
    margin-inline: auto;
  }
  .legacy-mobile-special-1005 .master_content .person_price,
  .legacy-mobile-special-1005 .master_content .story_desc p {
    font-size: 15px !important;
    line-height: 24px !important;
  }
  .legacy-mobile-special-1005 .master_content .story_desc {
    width: calc(100% - 32px) !important;
    max-width: 472px;
  }
  .legacy-mobile-special-1005 .master_content .story_img {
    width: calc(100% - 16px) !important;
    max-width: 504px;
  }

  .legacy-mobile-special-1291 { background: #264cc4; }
  .legacy-mobile-special-1291 .cow-biography-mobile {
    width: min(100%, 600px) !important;
    margin-inline: auto;
  }
  .legacy-mobile-special-1291 .cow-biography-mobile .banner {
    position: relative;
    height: auto !important;
    aspect-ratio: 390 / 358;
  }
  /* The title is drawn into the artwork, but the real H1 must remain in the
     accessibility and SEO tree rather than using the old display:none. */
  .legacy-mobile-special-1291 .cow-biography-mobile .banner h1 {
    display: block !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    position: absolute !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
  }
  .legacy-mobile-special-1005 .story_img img,
  .legacy-mobile-special-1291 .story_img img { height: auto !important; }
  .legacy-mobile-special-1005 .story_img img[role="button"],
  .legacy-mobile-special-1291 .story_img img[role="button"] { cursor: zoom-in; }
  .legacy-mobile-special-1005 .story_img img[role="button"]:focus-visible,
  .legacy-mobile-special-1291 .story_img img[role="button"]:focus-visible {
    outline: 3px solid #20c8ef;
    outline-offset: 3px;
  }
  /* Several 1291 preview images are intentionally transparent over a CSS
     background. Put the keyboard focus ring on that visible wrapper too. */
  .legacy-mobile-special-1005 .story_img:has(img[role="button"]:focus-visible),
  .legacy-mobile-special-1291 .story_img:has(img[role="button"]:focus-visible) {
    outline: 3px solid #20c8ef;
    outline-offset: 3px;
  }
}

@media (max-width: 359px) {
  .legacy-mobile-special-1005 .mobile_box .master_content .character_file_list,
  .legacy-mobile-special-1005 .mobile_box .master_content .code {
    width: calc(100% - 32px) !important;
  }
  .legacy-mobile-special-1005 .mobile_box .master_content .code .text_list {
    width: 100% !important;
  }
  .legacy-mobile-special-1291 .cow-biography-mobile .desc-chunk .chunk-title h2 {
    padding-inline: 8px !important;
    font-size: 18px !important;
    line-height: 26px !important;
  }
  .legacy-mobile-special-1291 .cow-biography-mobile .desc-chunk .chunk-content,
  .legacy-mobile-special-1291 .cow-biography-mobile .describe .text {
    padding-inline: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .legacy-mobile-special-1005 .mui-preview-image,
  .legacy-mobile-special-1291 .mui-preview-image {
    animation-duration: 0.01ms !important;
  }
}