/* Supplied desktop and mobile backgrounds, matched by section. */
#home { --section-background: url("assets/backgrounds/桌面端/官方首页.png"); }
#settings { --section-background: url("assets/backgrounds/桌面端/服务器设定.png"); }
#activities { --section-background: url("assets/backgrounds/桌面端/特色活动.png"); }
#equipment { --section-background: url("assets/backgrounds/桌面端/升级路线.png"); }
#advanced { --section-background: url("assets/backgrounds/桌面端/进阶攻略.png"); }
#community { --section-background: url("assets/backgrounds/桌面端/玩家社区.png"); }

.hero-image { background-image: var(--section-background); }
main > .section:not(.section-sect-fullscreen)::before {
  background-image: var(--section-background) !important;
}

@media (max-width: 980px) {
#home { --section-background: url("assets/backgrounds/移动端/官方首页.png"); }
#settings { --section-background: url("assets/backgrounds/移动端/服务器设定.png"); }
#activities { --section-background: url("assets/backgrounds/移动端/特色活动.png"); }
#equipment { --section-background: url("assets/backgrounds/移动端/升级路线.png"); }
#advanced { --section-background: url("assets/backgrounds/移动端/进阶攻略.png"); }
#community { --section-background: url("assets/backgrounds/移动端/玩家社区.png"); }
}

@media (max-width: 980px) {
  .hero-image {
    z-index: 0;
    overflow: hidden;
    background: #080707 !important;
    background-image: none !important;
    animation: none !important;
    transform: none !important;
  }

  .hero-image::before,
  .hero-image::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }

  .hero-image::before {
    z-index: 0;
    inset: -7%;
    background: var(--section-background) center / cover no-repeat;
    filter: blur(16px);
    opacity: 0.64;
    transform: scale(1.08);
  }

  .hero-image::after {
    z-index: 1;
    inset: 0;
    background: var(--section-background) center / contain no-repeat;
  }

  .hero-shade {
    z-index: 2;
  }

  main > .section:not(.section-sect-fullscreen)::before,
  main > .section:not(.section-sect-fullscreen)::after {
    background-position: center !important;
    background-repeat: no-repeat !important;
    animation: none !important;
  }

  main > .section:not(.section-sect-fullscreen)::before {
    z-index: 1;
    opacity: 1;
    background-size: contain !important;
    transform: none !important;
  }

  main > .section:not(.section-sect-fullscreen)::after {
    z-index: 0;
    inset: -7%;
    opacity: 0.64 !important;
    filter: blur(16px);
    background-size: cover !important;
    transform: scale(1.08) !important;
  }

  main > .section:not(.section-sect-fullscreen)::after {
    background-image: var(--section-background) !important;
  }

  main > .section:not(.section-sect-fullscreen) > .section-inner {
    position: relative;
    z-index: 2;
  }
}

main > #home { order: 0; }
main > #settings { order: 10; }
main > #activities { order: 20; }
main > #classes { order: -10; }
main > #equipment { order: 50; }
main > #community { order: 60; }

@media (prefers-reduced-motion: reduce) {
  .hero-image,
  main > .section::before,
  main > .section::after {
    animation: none !important;
  }
}

/* Backgrounds 0–2, particles above them, readable content above particles. */
#home { isolation: isolate; }
#home > .ember-field { z-index: 3; }
#home > .hero-inner { z-index: 4; }
main > .section > .ember-field { z-index: 2; }
main > .section > .section-inner { z-index: 3; }
.sect-preview-stage > .ember-field { z-index: 1; }
.sect-preview-stage > .sect-preview-info-layer { z-index: 2; }
.sect-preview-stage > .sect-preview-role-layer { z-index: 3; }

/* Keep mobile content inside the same 9:16 rectangle as its background. */
@media (max-width: 980px) {
  main > :is(#home, #settings, #activities, #equipment, #advanced, #community, #classes) {
    --mobile-art-width: min(100vw, 56.25dvh);
    --mobile-art-height: min(177.777778vw, 100dvh);
    --mobile-content-top: max(calc((100dvh - var(--mobile-art-height)) / 2 + 18px), calc(var(--header-height) + 10px));
    --mobile-content-bottom: calc((100dvh - var(--mobile-art-height)) / 2 + 64px);
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;
    padding: var(--mobile-content-top) 0 var(--mobile-content-bottom);
    overflow: hidden;
    align-items: stretch;
  }

  #home > .hero-inner,
  :is(#settings, #activities, #equipment, #advanced, #community) > .section-inner {
    width: calc(var(--mobile-art-width) - 24px);
    max-width: none;
    height: 100%;
    min-height: 0;
    max-height: none;
    margin: 0 auto;
    padding: 0 3px 12px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #ab8648 transparent;
    scroll-padding-block: 12px;
    -webkit-overflow-scrolling: touch;
  }

  #home > .hero-inner { display: block; }
  #home :is(.hero-copy, .hero-notices) { width: 100%; max-width: none; min-width: 0; }
  #home .hero-notices { margin-top: 20px; }
  #home .hero-brand-logo { width: min(76%, 260px); margin: 0 auto 12px; }
  #home .online-status { max-width: 100%; min-height: 38px; padding: 6px 10px; gap: 6px; font-size: clamp(14px, 3.8vw, 19px); }
  #home .hero-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 12px 0; padding: 0; overflow: visible; }
  #home .hero-tags span { min-height: 28px; padding: 3px 8px; font-size: 12px; }
  #home .hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
  #home .hero-actions .button { min-width: 0; min-height: 42px; padding: 6px 3px; font-size: 17px; gap: 4px; }
  #home .hero-actions .button-icon { width: 17px; height: 17px; flex: 0 0 17px; }

  :is(#settings, #activities, #equipment, #advanced, #community) .section-heading { margin-bottom: 16px; }
  :is(#settings, #activities, #equipment, #advanced, #community) .section-heading h2 { font-size: clamp(28px, 7.5vw, 36px); }
  :is(#settings, #activities, #equipment, #advanced, #community) .section-heading p { font-size: 16px; }
  :is(#settings, #activities, #equipment, #advanced, #community) :is(.settings-layout, .activity-grid, .advanced-grid, .community-layout, .qr-grid) { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  :is(#settings, #activities, #equipment, #advanced, #community) :is(.settings-panel, .settings-wide, .activity-card, .community-contact-panel, .community-panel) { min-width: 0; padding: 16px; }
  :is(#settings, #activities, #equipment, #advanced, #community) :is(p, dd, .warning-bar span) { overflow-wrap: anywhere; }
  #settings .settings-panel dl > div { padding: 10px 0; }
  #community .warning-bar { width: 100%; padding: 14px; gap: 10px; }

  #equipment > .section-inner { display: flex; overflow: hidden; }
  #equipment .equipment-workspace { display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0; }
  #equipment .equipment-menu-shell { flex: 0 0 auto; padding: 6px; border: 1px solid #b58a54; border-radius: 6px; background: #fff4df; }
  #equipment .equipment-menu-frame { display: none; }
  #equipment .equipment-tabs { flex-direction: row; flex-wrap: nowrap; height: auto; gap: 6px; overflow-x: auto; overflow-y: hidden; }
  #equipment .equipment-tabs button { flex: 0 0 auto; width: auto; min-height: 36px; padding: 5px 10px; font-size: 18px; }
  #equipment .equipment-tabs button::after { display: none; }
  #equipment .equipment-pages { flex: 1 1 auto; }
  #equipment .equipment-page-header { gap: 8px; padding: 12px; }
  #equipment .equipment-page-title { font-size: 23px; }
  #equipment .equipment-subtabs { max-width: 100%; }
  #equipment .equipment-subtabs button { font-size: 16px; min-height: 36px; }
  #equipment .equipment-body-scroll { overflow-y: auto; overscroll-behavior-y: contain; }
  #equipment .equipment-guide-entry p { font-size: 15px; }

  main > :is(#home, #settings, #activities, #equipment, #advanced, #community, #classes) > .page-next { bottom: calc((100dvh - var(--mobile-art-height)) / 2 + 8px); }
  main > :is(#home, #settings, #activities, #equipment, #advanced, #community, #classes) > .page-corners { inset: calc((100dvh - var(--mobile-art-height)) / 2 + 8px) calc((100vw - var(--mobile-art-width)) / 2 + 8px); }

  #classes .sect-preview-embed { width: var(--mobile-art-width); height: var(--mobile-art-height); margin: calc((100dvh - var(--mobile-art-height)) / 2) auto 0; }
  #classes {
    --entry-button-size: clamp(88px, 25vw, 104px);
    --mobile-sect-intro-height: 132px;
    --mobile-sect-dock-color: #242431;
    --mobile-sect-dock-opacity: 1;
  }
  #classes .sect-preview-controls { display: none; }
  #classes .sect-preview-mobile-picker { bottom: 0; background: transparent; }
  #classes .sect-preview-stage::after {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0;
    background: linear-gradient(var(--mobile-sect-dock-color), var(--mobile-sect-dock-color)) center bottom / 100% calc(108px + var(--mobile-sect-intro-height) + 28px) no-repeat;
    opacity: var(--mobile-sect-dock-opacity);
    pointer-events: none;
  }
  #classes .entry-gateway {
    left: calc((100vw - var(--mobile-art-width)) / 2);
    right: auto;
    bottom: calc((100dvh - var(--mobile-art-height)) / 2 + 108px + var(--mobile-sect-intro-height));
    width: var(--mobile-art-width);
  }
  #classes .entry-gateway::before {
    display: block;
    right: 0;
    bottom: 28px;
    left: 0;
    width: auto;
    height: calc(var(--entry-button-size) + 6px);
    background: url("assets/sect-preview/entrance-base-matched.png") center top / auto 100% no-repeat;
    opacity: var(--mobile-sect-dock-opacity);
    transform: none;
  }
  #classes .sect-preview-role-layer {
    height: calc(100% - 108px - var(--mobile-sect-intro-height) - 28px);
    overflow: hidden;
  }
  #classes .sect-preview-role-layer img { inset: 0 auto auto 50%; width: 230%; max-width: none; }
  #classes .sect-preview-info-layer { z-index: 4; }
  #classes .sect-preview-info-copy {
    bottom: 108px;
    left: 0;
    width: 100%;
    max-width: none;
    height: var(--mobile-sect-intro-height);
    margin: 0;
    padding: 12px 14px;
    border: 0;
    border-top: 1px solid rgba(198, 149, 57, .36);
    border-bottom: 1px solid rgba(198, 149, 57, .36);
    border-radius: 0;
    transform: none;
    overflow-y: auto;
    font-size: clamp(12px, 3vw, 14px);
    line-height: 1.8;
    color: #fff3dc;
    background: transparent;
    box-shadow: none;
    text-shadow: 0 1px 3px #000;
  }
  #classes .sect-preview-info-copy p { white-space: normal; }
  #classes .sect-preview-info-panel.is-active .sect-preview-info-copy { pointer-events: auto; }
}

/* Fixed mobile pages with readable, independently scrolling content. */
@media (max-width: 980px) {
  html { scroll-snap-type: y mandatory; scrollbar-width: none; }
  html::-webkit-scrollbar { display: none; }
  main > :is(#home, #settings, #activities, #equipment, #advanced, #community, #classes) {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  #home > .hero-inner,
  main > .section > .section-inner,
  .sect-preview-info-copy,
  .equipment-body-scroll,
  .mobile-menu,
  .download-modal-body {
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: #ab8648 rgba(0, 0, 0, .15);
    -webkit-overflow-scrolling: touch;
  }
  #home > .hero-inner::-webkit-scrollbar,
  main > .section > .section-inner::-webkit-scrollbar { width: 5px; }
  #home > .hero-inner::-webkit-scrollbar-thumb,
  main > .section > .section-inner::-webkit-scrollbar-thumb { background: #ab8648; border-radius: 6px; }
  main .reveal { opacity: 1; transform: none; }
  #equipment .equipment-tabs { scrollbar-width: thin; }
  #equipment .equipment-subtabs { flex-wrap: wrap; overflow: visible; }
  #equipment .equipment-subtabs button { flex: 1 0 auto; }
  #equipment .equipment-subpage { padding: 14px; }
  #equipment .equipment-guide-entry p { font-size: 16px; line-height: 1.8; }
  #equipment .equipment-guide-entry + .equipment-guide-entry { margin-top: 14px; padding-top: 14px; }
  :is(#activities, #advanced) .activity-grid,
  #advanced .advanced-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  :is(#activities, #advanced) .activity-card { min-height: 0; padding: 16px; }
  :is(#activities, #advanced) .activity-card h3 { margin-bottom: 8px; padding-bottom: 8px; font-size: 21px; }
  :is(#activities, #advanced) .activity-card p { margin-bottom: 10px; font-size: 16px; line-height: 1.8; }
  #home .hero-notices { gap: 10px; margin-top: 12px; }
  #home .notice-card { padding: 16px; }
  #home .notice-card :is(li, p),
  #home .home-announcements p { font-size: 15px; line-height: 1.8; }
  #home .notice-card h2 { font-size: 21px; }
  #home .home-announcements { margin-top: 12px; padding: 12px; }
  #home .home-announcements li { padding: 8px 0; }
  #settings .settings-panel :is(dt, dd),
  #settings .settings-wide p { font-size: 16px; }
  #community .qr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #community .qr-card { padding: 14px; }
  #community .qr-button { width: min(100%, 160px); }
  #community .community-layout { gap: 12px; }
  #classes .sect-preview-info-copy { font-size: 14px; }
  .mobile-menu { overflow-y: auto; }
  #downloadModal .download-tutorial li { font-size: 15px; }
}