/* Shared mobile presentation for all case-detail pages. */
@media (max-width: 1024px), (pointer: coarse) {
  html,
  body {
    width: 100vw !important;
    height: var(--case-screen-height, 100dvh) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #071226 !important;
  }

  #caseNav,
  #caseNav.hidden {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 56px !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    pointer-events: auto !important;
    border: .5px solid rgba(205,214,224,.28) !important;
    border-top: 0 !important;
    border-radius: 0 0 8px 8px !important;
    background: rgba(244,249,255,.94) !important;
    box-shadow: 0 3px 12px rgba(3,16,34,.06) !important;
    backdrop-filter: blur(17px) saturate(120%) !important;
  }

  #caseNav .nav-shell {
    width: 100% !important;
    min-height: 56px !important;
    height: 56px !important;
    padding: 0 22px 0 18px !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #caseNav .nav-logo {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }

  #caseNav .nav-logo img {
    width: 140px !important;
    height: auto !important;
    max-height: 39px !important;
    object-fit: contain !important;
  }

  #caseNav .nav-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
  }

  #caseNav .nav-actions .nav-btn:first-child { display: none !important; }
  #caseNav .nav-actions .nav-btn.primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    height: 32px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    background: linear-gradient(135deg,#009fe3,#08c4ff) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0,159,227,.18) !important;
  }

  #caseNav .nav-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    background: rgba(245,247,251,.98) !important;
    border-bottom: 1px solid rgba(0,140,200,.10) !important;
    box-shadow: 0 16px 40px rgba(0,167,230,.12) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-8px) !important;
    transition: opacity .25s,transform .25s,visibility .25s !important;
  }

  #caseNav.mobile-nav-open .nav-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }

  #caseNav.case-nav-overlay-hidden {
    opacity: 0 !important;
    transform: translateY(-110%) !important;
    pointer-events: none !important;
  }

  #caseNav .nav-menu li { width: 100% !important; }
  #caseNav .nav-menu a {
    display: block !important;
    padding: 12px 22px !important;
    font-size: 14px !important;
    color: #536170 !important;
  }
  #caseNav .nav-menu a::after { display: none !important; }

  .case-mobile-toggle {
    display: flex;
    width: 40px;
    height: 40px;
    margin-left: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
  .case-mobile-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: #536170;
  }

  /* Keep the full landscape viewport; the navigation overlays the unused image edge. */
  .slide > .media-shell,
  .slide > .scene,
  .banner-inner,
  .product-shell {
    inset: 0 !important;
    width: 100% !important;
    height: var(--case-screen-height, 100dvh) !important;
  }

  #deck,
  .slide {
    width: 100vw !important;
    height: var(--case-screen-height, 100dvh) !important;
    min-height: var(--case-screen-height, 100dvh) !important;
    margin: 0 !important;
  }

  .media-shell img,
  .media-shell video,
  .sequence-track video,
  .banner-full,
  .product-stage img,
  .scene video {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
  }

  .media-shell.zoomable:hover img,
  .media-shell.zoomable:hover video,
  .product-stage:hover img { transform: none !important; }

  /* 宽幅信息图完整显示，避免裁掉左右文字或设备。 */
  body.case-fit-contain .media-shell img,
  body.case-fit-contain .media-shell video,
  body.case-fit-contain .sequence-track video,
  body.case-fit-contain .banner-full,
  body.case-fit-contain .product-stage img,
  body.case-fit-contain .scene video {
    object-fit: contain !important;
  }
  body.case-fit-contain .slide,
  body.case-fit-contain .banner-inner,
  body.case-fit-contain .product-shell,
  body.case-fit-contain .product-stage,
  body.case-fit-contain .scene {
    background: #f4f8fd !important;
  }

  .header {
    top: 14px !important;
    left: 50% !important;
    z-index: 210 !important;
    width: calc(100% - 88px) !important;
    max-width: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.48) !important;
  }
  .header h1 {
    color: rgba(120,200,255,.72) !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    letter-spacing: .42em !important;
  }
  .header .cn {
    margin-top: 7px !important;
    color: rgba(180,225,255,.94) !important;
    font-size: 19px !important;
    line-height: 1.2 !important;
    letter-spacing: .28em !important;
  }
  .slide.light .header h1 {
    color: rgba(50,110,180,.62) !important;
    text-shadow: 0 2px 10px rgba(255,255,255,.72) !important;
  }
  .slide.light .header .cn {
    color: rgba(17,24,39,.9) !important;
    text-shadow: 0 2px 10px rgba(255,255,255,.82) !important;
  }
  .progress { right: 9px !important; gap: 10px !important; }
  .hint {
    left: 50% !important;
    bottom: 9px !important;
    z-index: 220 !important;
    pointer-events: none !important;
  }
  .hint .arrow-group { display: none !important; }
  .hint .idx {
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    color: rgba(120,200,255,.78) !important;
    font-size: 13px !important;
    letter-spacing: .28em !important;
    text-shadow: 0 2px 9px rgba(0,0,0,.58) !important;
  }
  .hint.dark .idx {
    color: rgba(40,110,190,.72) !important;
    text-shadow: 0 2px 9px rgba(255,255,255,.8) !important;
  }
}

@media (min-width: 1025px) and (pointer: fine) {
  .case-mobile-toggle { display: none; }
}

#caseNav .nav-logo { cursor: pointer; }

@media (max-width: 1024px), (pointer: coarse) {
  .case-orientation-tip {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 30px;
    background: #071226;
    color: rgba(235,244,255,.9);
    text-align: center;
    font-family: "OPPO Sans","PingFang SC",sans-serif;
    cursor: pointer;
  }
  .case-orientation-tip.is-dismissed { display: none; }

  .case-orientation-visual {
    position: relative;
    width: 112px;
    height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .case-orientation-phone {
    position: relative;
    width: 44px;
    height: 76px;
    border: 3px solid #14baf2;
    border-radius: 10px;
    box-shadow: 0 0 24px rgba(0,183,255,.22);
    animation: casePhoneRotate 2.4s ease-in-out infinite;
  }
  .case-orientation-phone::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: #14baf2;
  }
  .case-orientation-arrow {
    position: absolute;
    inset: -6px;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    overflow: visible;
    animation: caseArrowRotate 2.4s ease-in-out infinite;
  }
  .case-orientation-arrow .arc,
  .case-orientation-arrow .head {
    fill: none;
    stroke: rgba(255,255,255,.84);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  @keyframes casePhoneRotate {
    0%,22% { transform: rotate(0deg); }
    55%,78% { transform: rotate(90deg); }
    100% { transform: rotate(0deg); }
  }
  @keyframes caseArrowRotate {
    0%,22% { transform: rotate(-42deg); opacity: 1; }
    42% { transform: rotate(0deg); opacity: 0; }
    55%,80% { transform: rotate(0deg); opacity: 0; }
    92%,100% { transform: rotate(-42deg); opacity: 1; }
  }
  .case-orientation-title { font-size: 20px; font-weight: 500; }
  .case-orientation-sub { font-size: 13px; line-height: 1.7; color: rgba(210,225,240,.62); }
}

@media (min-width: 1025px) and (pointer: fine) {
  .case-orientation-tip { display: none; }
}