/* MIIGO_BODY_PHONE_SHELL_SIZE_CENTER_20260624
   电脑端手机壳：
   - 比例按 490.2mm 高 × 234mm 宽
   - 换算为 430px 宽 × 901px 高
   - 去掉刘海黑线
   - 去掉底部白底残留
   - 页面在电脑屏幕左右上下居中
*/

@media (min-width: 768px) {
  html {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background:
      radial-gradient(circle at top, rgba(255,255,255,.12), transparent 260px),
      linear-gradient(135deg, #101827 0%, #050816 100%) !important;
  }

  body {
    width: 430px !important;
    max-width: 430px !important;

    height: 901px !important;
    min-height: 901px !important;
    max-height: 901px !important;

    margin: 0 auto !important;

    background: #f6f7fb !important;

    border: 13px solid #111827 !important;
    border-radius: 44px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    box-shadow:
      0 26px 80px rgba(0,0,0,.48),
      0 0 0 1px rgba(255,255,255,.10) inset !important;

    box-sizing: border-box !important;
    position: relative !important;
  }

  /* 去掉手机上面的黑线/刘海 */
  body::before,
  body::after {
    display: none !important;
    content: none !important;
  }

  /* 底部导航固定在手机壳里面，去掉下面白底 */
  #miigo-v4-tabbar,
  .miigo-v4-tabbar,
  .miigo-shell-bottom,
  .miigo-final-bottom-nav,
  .miigo-bottom-nav,
  .miigo-drama-bottom-nav {
    position: fixed !important;

    left: 50% !important;
    right: auto !important;

    bottom: calc((100vh - 901px) / 2 + 13px) !important;
    top: auto !important;

    transform: translateX(-50%) !important;

    width: 404px !important;
    max-width: 404px !important;
    min-width: 404px !important;

    height: 56px !important;
    min-height: 56px !important;

    margin: 0 !important;
    border-radius: 0 0 30px 30px !important;
    overflow: hidden !important;
    z-index: 2147482000 !important;
  }
}

/* MIIGO_BODY_PHONE_SHELL_SCROLLBAR_NOTCH_FIX_20260624
   清理手机壳右侧滚动条黑线/白底，恢复顶部摄像头刘海
*/
@media (min-width: 768px) {
  html {
    background:
      radial-gradient(circle at top, rgba(255,255,255,.12), transparent 260px),
      linear-gradient(135deg, #101827 0%, #050816 100%) !important;
  }

  body {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    background: #f6f7fb !important;
  }

  body::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  body::-webkit-scrollbar-track,
  body::-webkit-scrollbar-thumb {
    display: none !important;
    background: transparent !important;
  }

  /* 恢复顶部摄像头/刘海 */
  body::before {
    display: block !important;
    content: "" !important;
    position: fixed !important;
    left: 50% !important;
    top: calc((100vh - 901px) / 2 + 13px) !important;
    transform: translateX(-50%) !important;
    width: 112px !important;
    height: 25px !important;
    background: #111827 !important;
    border-radius: 0 0 17px 17px !important;
    z-index: 2147482600 !important;
    pointer-events: none !important;
  }

  body::after {
    display: block !important;
    content: "" !important;
    position: fixed !important;
    left: 50% !important;
    top: calc((100vh - 901px) / 2 + 23px) !important;
    transform: translateX(-50%) !important;
    width: 38px !important;
    height: 4px !important;
    background: rgba(255,255,255,.32) !important;
    border-radius: 999px !important;
    z-index: 2147482700 !important;
    pointer-events: none !important;
  }

  /* 底部导航贴住壳内底部，避免下面露白 */
  #miigo-v4-tabbar,
  .miigo-v4-tabbar,
  .miigo-shell-bottom,
  .miigo-final-bottom-nav,
  .miigo-bottom-nav,
  .miigo-drama-bottom-nav {
    bottom: calc((100vh - 901px) / 2 + 13px) !important;
    top: auto !important;
    width: 404px !important;
    max-width: 404px !important;
    min-width: 404px !important;
    border-radius: 0 0 30px 30px !important;
  }
}

/* MIIGO_PHONE_SHELL_BG_COLOR_FIX_20260624
   电脑端背景与手机壳颜色区分：
   - 外面电脑屏背景改浅一点
   - 手机壳继续黑色
   - 不动底部导航
*/
@media (min-width: 768px) {
  html {
    background:
      radial-gradient(circle at top, rgba(255,255,255,.75), transparent 320px),
      linear-gradient(135deg, #E8EEF8 0%, #D8E1EE 45%, #C8D3E3 100%) !important;
  }

  body {
    border-color: #080B12 !important;
    box-shadow:
      0 28px 90px rgba(8, 11, 18, .38),
      0 0 0 1px rgba(255,255,255,.16) inset !important;
  }

  body::before {
    background: #080B12 !important;
  }
}