/* Supplied desktop and mobile backgrounds, matched by section. */
.site-header, .site-header.scrolled { background: linear-gradient(180deg, rgba(0, 0, 0, .98) 0%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, 0) 100%); box-shadow: none; }
#home { --section-background: url("assets/backgrounds/desktop/home.webp"); --home-preview: url("data:image/webp;base64,UklGRo4EAABXRUJQVlA4IIIEAACwFwCdASpgADYAPvVmp06qpaOiNVn5AVAeiWwAtkc5C4yfLw3iosVtmNuGuEiRujD6Ep2udkd9w+L+7Xf9kwKAwyRKp1s/au7x0MNYdT8kgSUF6iKk8dA5yySfhC8f4CBDuplmw8XdLlrg2lCDKQLkrZjzEM/anXGsFGtMqG5MZsRttxq5sOID6QlgQRc6GMJeYHxzxkLDqLTXh4XH2h85Sv9+5NKETebaVrESbgTASPDTQEZJS+JgNHRZB7Zxrq8iB4+R3kAA/u54N6v2L7zvXDOsqPLQQD31Z/ZC/g/8TIv72k38K3ZfijC9tzIJ6ik82k4YH3EDwT/qhNoLtFRaZlBZJE6dZesCpN1J7l4Agjhs5Q9LDkiivgyq7TJfhthUZf7cZID7z79g++/5ckU77TSzh6pBL0vBym/2EKXvRud63L/sRpEp+I2zHsrFHcaBzfdhCq1UNPwR2wxv56tdsgRs88pGrmV9Iz6l7hCSv6opshsZMsmi+WsTQQK6V0vXmLOnpy2SsfQ7Ztmi6mcykdoklE2kpCcfSMeeBVwxQI9UGVd4ok98LjA3AQKgd/rMby8+U7zj2XQO1+2UqRgeafMtA31y8x+5ss7ONl2XjPSa8zLt6KVuL33A1+Q5VBTZz8Z4UD5VkY6X585cAS9zpuMZOkjM7YFjybNTGvjDyaOLGUoIZq2LN5HkkKdv3SnOfpBhDRytZAzx39BOlRbETu0aID2OpHrS5RRNAKpnGDwcDryVbPwVJEUrCbkX6xtpTCIaspNzYMLM8HPILrYm5YAxQ2TxdNmUIG/KPPBAab82wwbRK+F6jDr9q6EnJgOKqgNJ/J2E/RfhhVtLAdnMck9MGDAaKW4WO1WwYgaY42bCmIQQD5IoplKHcKAGJN2vxDzncKfspS20FnielGnq0Nrf7VNvU2I9TTgG3Hy1l74wU0uwQ/UhNhkMOt1uOPkxsfriqSFhuv/B+xp6m4kzA5VMsAHX02lTCkwV5Er5okqJq36pMp1BCnCvOY5n9pAUshozriYemrjbjo66FxHs34patuppaS32StZ7EmjWyiUJJRPIRP8704ZSpp0v0Fb+WmyZp4Tz3oudLsOp5ixwtEw7mHSGhKv5U9+F8ybYVoTr9fDUHhoXRjppP+meUswqn9PtwWxUGJmqJHbEoU/U/fQLhWamkShe9r22oL5edlYNf0XPO/r/bruNWwIW8kKD2uUpZa5Csap2pXBPgBlMJl5FRH+uMF9S4LDWmPL4SIK5xog1cawNR5d+PHqNNabTRvwe4JvETMDRmfsoYEbaO9Vg2LmEwQQ1XyzAHNlu6ZO502RSLdwgrt6eOCv0vSjotX1wStQpX4t26wetuvyA01m5C5hafy7VtarvdO8Fb9/drhxWuLgdEGLdj2zMGdSNHb6faxCqUWoG2b4tJW6IgGTfFag4CvSwZ0Wz6UcSDRFq1Zmwq/8xbL1vOCW+9I4Riq6JS2kG+HlsftipDSLTlooHuXXnj7PHCSzyLuyg6dtERWBtdjCA+kVlowsZ2pgAAA=="); }
#settings { --section-background: url("assets/backgrounds/desktop/settings.webp"); }
#activities { --section-background: url("assets/backgrounds/desktop/activities.webp"); }
#equipment { --section-background: url("assets/backgrounds/desktop/equipment.webp"); }
#advanced { --section-background: url("assets/backgrounds/desktop/advanced.webp"); }
#community { --section-background: url("assets/backgrounds/desktop/community.webp"); }

/* Same-image inline preview stays visible while the full home background downloads. */
.hero-image { background-image: var(--section-background), var(--home-preview); }
main > .section:not(.section-sect-fullscreen)::before {
  background-image: var(--section-background) !important;
}

@media (max-width: 980px) {
#home { --section-background: url("assets/backgrounds/mobile/home.webp"); --home-preview: url("data:image/webp;base64,UklGRoIFAABXRUJQVlA4IHYFAACQGgCdASpAAHIAPu1gn06ppaKiNvsaqTAdiWwAucurLVeT4zbA7k7057iXnmHH0sldGYfBxuz5vVQ9HBUBTFN7RfuKV9TH4ziKOY48+Ru+PYpqtA8diYwO661tiddgYpw21ICDFzO/iF0wUZjmt06zpEyyyxDY+LBNdA52ptq4mYhI0T7hmjp01tNUcH4VM8MXVzcuPz+NisuKi1XTRoJB6GhiWDiO2ASiDnPB3GzzAk8ITNiXBhfiSTu4SUzjxkgCbBnFJ538R34Htfq2wIR4rLJn3gFIf/b875eQAAD+9b+0v+BrGaEqbNUcFDMCYgIabfco57WkoCW5pgi7pEVmHRx4XmGeTPhuOC3bXyZ5TGtXHmWSUW2uS2nHuuG+F2FhaOAvws31OSDpFh1YocxM/oPpjYXyXCFN3vHoPva71dSNq8tQ+JUuA8pgl8se2sWVLEMnDThVFM1za45I7Jrcu1IuCDYB7Pdfwy6GzGyqytpGLwqJEtYz8KIYxtHUv07pQXv7cb7otTKhi05pcY/ekKdUm0n6TbLD0G3JJStNGxDWUgR8HMCUJhhVQsB7JJRK2fX0oomhMASk9YFmmbWDxJkkUpgThVjl7ABbYi631UNSWydV36MyITqJdyRPTUBqX1/zgH8mb0huZXoFNGlbUDfJhTY8ctPQrLzirxLpXg4TnyWwsNKS/0q+DaEoHang4Y7logIJseqdkpqgC0KdakyTU/kD3YzlH/tXubADljONcj0p+2N1qs7WaDdEM3uTZqaRRVGiHH8mYc05J8lIoOZIun8IRKxz6HxFuMvfFz8KuB4qLtXcYSrdjhd5po1exLK2RDfksC8YewP4b7axiquCcyyMmhzxQi3N7U7WbpU1yewcHo7Yo0wKXxCXXTiAZGVzdkuwPwz7nJ09yCgi2w89Xu9tcLcahLga1Cc3URSbBdqv1X3TOQW1miXFlopIQ7clqUlzf+WPjSG5W0R77Gr3sC/0g0KfKoGOQE3zEqWt2JHWeJe2Z0N5iLt7UGn3W4jFSBN0L1w9SWNZCC+aPscKFiR/3WFZck3WRH99BD4CElj+Ue3d6TRSDwEev4LWxGw4PNUTbPKhiHe95IXt5LfNhoJJFm6TwPUhlqIG/wcXdb7Sew/5qA5DiEcKbJVM8KUs9AbK5YSsllPqIRwCSvXgwBmGgV9kN1g323DCXdIuZuDPMH6SGLDhNgnxUduQ8If82z9ne3+8hLgyktOOhUzpTjhZIwZmP7YYvTjliX22+9ttHRE0ZFbgMegYZDPreyo84c7IwwX4u2QqKPGHcRTdfmOpDhDpK/BLeujPhFgDj+/1X3bHPuWuPmfIhpU1iH+dt9ci/TR6IFVkpdqForDK9jbi/LxPjVzlRL/VGn8eVAX/691ZPy96OAQ20tnIz3BS4SL3HcnRu4ZFy2QSEm/hSZ2TMQBh3FRzX92zTmsJYmIodLkyxCNGXgqVLUKfms6Z2SJKqTunfoYycewTRvcj8EQJIN0BP5xxGR2mM05GJpo66/+VkZh5lysye/Je4DxobrvQCeRO2Utc6ZWTboGGMRqvz5nRphsfYnq+tzusgcLmf2PEbhjIYlhWs/vlqdyKSQHRS1eqA3ChvB+Kb71yJ8MK4vHx4ycXw58QdzXgNg/kBLkO6o9hQhVujN37a+jvzjwYCzO3+nOkcCfM96tK9hoF6BWWHbaAd+mMvzGt0qkl2IEFbmleSsw4TAQ7UjEJz5e5H2TU2xIfTa/wzQU37xHqPdHWy8T9w+3cHlOxN9a9QxmwQwm7N7i/rP+FcgeycQc7LH731MiCn7PEob0NCzP1poxUSQY7HFOIxrkdHXgVvnwxEF5dv8nIcFMRzo4AAAA="); }
#settings { --section-background: url("assets/backgrounds/mobile/settings.webp"); }
#activities { --section-background: url("assets/backgrounds/mobile/activities.webp"); }
#equipment { --section-background: url("assets/backgrounds/mobile/equipment.webp"); }
#advanced { --section-background: url("assets/backgrounds/mobile/advanced.webp"); }
#community { --section-background: url("assets/backgrounds/mobile/community.webp"); }
}

@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;
    background-image: var(--section-background), var(--home-preview);
    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;
    background-image: var(--section-background), var(--home-preview);
  }

  .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; }
  :root { --header-height: calc(52px + env(safe-area-inset-top)); }
  .site-header { display: flex !important; height: var(--header-height); gap: 0; padding: env(safe-area-inset-top) 8px 0; border-bottom: 0; }
  .site-header .mobile-header-logo, .site-header .menu-button { display: none !important; }
  .site-header .desktop-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); left: 0; gap: 0; padding: 0; }
  .site-header .desktop-nav a { min-width: 0; min-height: 44px; font-size: clamp(10px, 2.9vw, 14px); }
  .site-header .desktop-nav a::before { display: none; }
  .site-header .desktop-nav a::after { display: block; bottom: 8px; }
  .site-header .desktop-nav a:focus-visible { outline: 1px solid #f1d48d; outline-offset: -3px; }
  #home .hero-brand-logo { display: block; width: auto; max-width: 100%; height: clamp(88px, 24vw, 96px); margin: 0 auto; }
  #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(var(--header-height) + 8px) calc((100vw - var(--mobile-art-width)) / 2 + 8px) calc((100dvh - var(--mobile-art-height)) / 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; }
}

/* Keep the desktop two-column layout while grouping mobile notices. */
#home .home-notice-scroll { display: contents; }
@media (min-width: 981px) {
  #home > .hero-inner { grid-template-rows: auto auto; align-content: center; row-gap: 18px; }
  #home .hero-copy { grid-area: 1 / 1; }
  #home .home-notice-scroll > .notice-red { grid-area: 2 / 1; width: 100%; max-width: 640px; margin: 0; text-align: left; }
  #home .hero-notices { grid-area: 1 / 2 / 3 / 3; }
}

/* 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 .home-notice-scroll,
  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 .home-notice-scroll::-webkit-scrollbar,
  main > .section > .section-inner::-webkit-scrollbar { width: 5px; }
  #home .home-notice-scroll::-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; }
  /* Balance artwork and content: reduce top spacing on short mobile screens. */
  main > #home {
    --mobile-content-top: max(calc(var(--header-height) + 8px), calc(clamp(24px, calc(100dvh - 660px), 160px) - 50px));
    --mobile-content-bottom: 64px;
  }
  #home .hero-image::after { background-position: center top; }
  main > #home > .page-next { bottom: 8px; }
  #home > .hero-inner { display: flex; flex-direction: column; gap: 6px; width: min(560px, calc(100% - 24px)); padding: 0; overflow: hidden; }
  #home .hero-copy { flex: 0 0 auto; }
  #home .home-notice-scroll { display: block; flex: 0 1 auto; min-height: 0; width: 100%; overflow-y: auto; overflow-x: hidden; }
  #home .home-notice-scroll:focus-visible { outline: 1px solid #ab8648; outline-offset: -1px; }
  #home .hero-brand-logo + .online-status { min-height: 38px; margin: 20px 0 0; padding: 5px 14px; font-size: clamp(16px, 4.4vw, 18px); }
  #home .hero-tags { flex-wrap: nowrap; gap: 4px; margin: 6px 0; }
  #home .hero-tags span { min-height: 24px; padding: 2px 4px; font-size: clamp(10px, 2.8vw, 12px); white-space: nowrap; }
  #home .hero-tags .restriction-icon { width: 12px; height: 12px; }
  #home .hero-actions { gap: 6px; margin-top: 0; }
  #home .hero-actions .button { min-height: 40px; padding: 4px 3px; font-size: 15px; }
  #home .home-notice-scroll > .notice-red { width: 100%; margin-top: 0; text-align: left; }
  #home .hero-notices { gap: 0; margin-top: 6px; }
  #home :is(.notice-card, .home-announcements) { padding: 8px 10px; }
  #home .notice-card h2,
  #home .home-announcements h3 { margin: 0 0 4px; padding-bottom: 4px; font-size: 17px; line-height: 1.3; justify-content: center; text-align: center; }
  #home .home-announcements h3 svg { width: 17px; height: 17px; flex-basis: 17px; }
  #home .notice-card :is(li, p),
  #home .home-announcements p { font-size: clamp(12px, 3.2vw, 14px); line-height: 1.35; }
  #home .notice-card li { margin: 2px 0; padding-left: 10px; }
  #home .home-announcements li { gap: 6px; padding: 3px 0; }
  #home .home-announcements li > span { padding: 1px 4px; font-size: 12px; line-height: 1.45; }
  #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; }
}

/* Short portrait screens keep every notice without shrinking the body copy. */
@media (max-width: 980px) and (max-height: 620px) and (orientation: portrait) {
  #home .hero-brand-logo + .online-status { min-height: 36px; }
  #home .hero-tags { margin: 4px 0; }
  #home .hero-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #home .hero-actions .button { font-size: 11px; }
  #home .hero-actions .button svg { display: none; }
  #home :is(.notice-card, .home-announcements) { padding: 4px 8px; }
  #home .notice-card h2,
  #home .home-announcements h3 { margin-bottom: 2px; padding-bottom: 2px; }
  #home .home-announcements li { display: block; padding: 1px 0; font-size: 12px; line-height: 1.35; }
  #home .home-announcements li > span { margin-right: 6px; padding: 0 3px; font-size: 11px; line-height: 1.2; }
  #home .home-announcements p { display: inline; }
}

/* Short landscape screens reserve room for the independent notice scroller. */
@media (max-width: 980px) and (max-height: 500px) and (orientation: landscape) {
  #home .hero-brand-logo { height: 64px; }
  #home .hero-brand-logo + .online-status { margin-top: 8px; min-height: 36px; }
  #home .hero-tags { margin: 4px 0; }
  #home .hero-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Keep the original fallback for browsers with JavaScript disabled. */
.js main > :is(#home, #settings, #activities, #equipment, #advanced, #community):not(.is-background-ready) {
  --section-background: none;
}
.js main > section:not(.is-section-visible),
.js main > section:not(.is-section-visible)::before,
.js main > section:not(.is-section-visible)::after,
.js main > section:not(.is-section-visible) *,
.js main > section:not(.is-section-visible) *::before,
.js main > section:not(.is-section-visible) *::after,
body.is-page-hidden *,
body.is-page-hidden *::before,
body.is-page-hidden *::after {
  animation-play-state: paused !important;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Mobile full-bleed pages and compact content. */
@media (max-width: 980px) {
  #home .hero-image::after { background-size: cover; }
  main > .section:not(.section-sect-fullscreen)::before { background-size: cover !important; }
  main > :is(#settings, #activities, #equipment, #advanced, #community) {
    --mobile-art-width: 100vw;
    --mobile-art-height: 100dvh;
    --mobile-content-top: calc(var(--header-height) + 10px);
    --mobile-content-bottom: 54px;
  }
  :is(#settings, #activities, #equipment, #advanced, #community) > .section-inner { padding: 0 0 4px; }
  :is(#settings, #activities, #equipment, #advanced, #community) .section-heading { margin-bottom: 8px; }
  :is(#settings, #activities, #equipment, #advanced, #community) .section-heading h2 { margin: 2px 0; font-size: clamp(22px, 6vw, 28px); }
  :is(#settings, #activities, #equipment, #advanced, #community) .section-heading i { margin: 6px auto; }
  :is(#settings, #activities, #equipment, #advanced, #community) .section-heading p { font-size: 12px; line-height: 1.4; }
  :is(#settings, #activities, #equipment, #advanced, #community) :is(.settings-layout, .activity-grid, .advanced-grid, .community-layout, .qr-grid) { gap: 6px; }
  :is(#settings, #activities, #equipment, #advanced, #community) :is(.settings-panel, .settings-wide, .activity-card, .community-contact-panel, .community-panel) { padding: 8px 10px; }
  #settings .settings-panel h3 { margin: 0 0 6px; padding-bottom: 6px; font-size: 17px; line-height: 1.4; }
  #settings .settings-panel dl > div { padding: 4px 0; }
  #settings .settings-panel :is(dt, dd), #settings .settings-wide p { font-size: 13px; line-height: 1.5; }
  #settings .settings-wide h3 { font-size: 17px; }
  #settings .settings-wide hr { margin: 8px 0; }
  #settings .settings-wide .settings-payment, #settings .settings-wide .settings-reminder { font-size: 13px; line-height: 1.5; }
  :is(#activities, #advanced) .activity-card { gap: 0; }
  :is(#activities, #advanced) .activity-card h3 { margin-bottom: 4px; padding-bottom: 4px; font-size: 16px; line-height: 1.3; }
  :is(#activities, #advanced) .activity-card p { margin-bottom: 4px; font-size: 12px; line-height: 1.4; min-height: 0; }
  :is(#activities, #advanced) .activity-card span { padding-top: 4px; font-size: 11px; line-height: 1.3; }
  #activities .activity-grid, #advanced .advanced-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #community .community-contact-panel header { padding-bottom: 6px; }
  #community .community-contact-panel h3 { font-size: 15px; }
  #community .community-contact-panel .contact-row { min-height: 38px; }
  #community .community-contact-panel .contact-button { min-height: 36px; margin-top: 6px; font-size: 15px; }
  #community .qr-card { padding: 8px; }
  #community .qr-card h3 { margin-bottom: 6px; font-size: 16px; }
  #community .qr-button { width: min(100%, 120px); padding: 4px; }
  #community .qr-card p { margin-top: 5px; font-size: 12px; }
  #community .warning-bar { margin-top: 8px; padding: 8px 10px; gap: 6px; }
  #community .warning-bar strong { font-size: 17px; }
  #community .warning-bar span { font-size: 12px; line-height: 1.4; }
}

/* Long copy keeps a readable, keyboard-accessible detail view on phones. */
.mobile-detail-button { display: none; }
.mobile-detail-modal { display: none; transition: none; }
.mobile-detail-modal.open { display: grid; }
@media (max-width: 980px) {
  #settings .settings-panel .panel-title { padding-bottom: 6px; }
  :is(#activities, #advanced) > .section-inner { display: flex; flex-direction: column; }
  :is(#activities, #advanced) .section-heading { flex: 0 0 auto; }
  #activities .activity-grid, #advanced .advanced-grid { flex: 1 1 auto; min-height: 0; grid-auto-rows: minmax(0, 1fr); }
  :is(#activities, #advanced) .activity-card { padding: 6px 8px; }
  :is(#activities, #advanced) .activity-card > div { min-height: 0; }
  :is(#activities, #advanced) .activity-card p, #equipment .equipment-guide-entry p {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  :is(#activities, #advanced) .activity-card span { margin-top: auto; }
  .mobile-detail-button { display: block; min-height: 32px; margin-top: 4px; padding: 4px 8px; color: #f1d48d; font-size: 12px; line-height: 1.4; border: 1px solid rgba(224, 210, 176, .35); border-radius: 4px; background: rgba(0, 0, 0, .55); cursor: pointer; }
  .mobile-detail-button:focus-visible { outline: 2px solid #f1d48d; outline-offset: 2px; }
  .mobile-detail-modal .modal-panel { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); padding: 24px 18px; }
  .mobile-detail-modal h2 { flex: 0 0 auto; margin: 0 28px 14px 0; font-size: 22px; }
  .mobile-detail-body { min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; }
  .mobile-detail-body p { margin: 0 0 12px; font-size: 16px; line-height: 1.8; color: #f2e9db; overflow-wrap: anywhere; }
  #equipment .equipment-page-header { padding: 6px 8px; gap: 5px; }
  #equipment .equipment-page-title { font-size: 18px; }
  #equipment .equipment-tabs button, #equipment .equipment-subtabs button { min-height: 34px; padding: 4px 8px; font-size: 14px; }
  #equipment .equipment-subpage { padding: 8px; }
  #equipment .equipment-subpage-title { margin-bottom: 8px; font-size: 18px; }
  #equipment .equipment-guide-entry h4 { margin-bottom: 4px; font-size: 16px; }
  #equipment .equipment-guide-entry p { font-size: 13px; line-height: 1.4; }
  #equipment .equipment-guide-entry + .equipment-guide-entry { margin-top: 8px; padding-top: 8px; }
}
@media (max-width: 980px) and (max-height: 740px) {
  #activities .activity-card { padding: 4px 6px; }
  #activities .activity-card p { display: none; }
  #activities .activity-card h3 { font-size: 15px; margin-bottom: 2px; padding-bottom: 2px; }
  #activities .activity-card span { font-size: 10px; line-height: 1.25; padding-top: 2px; }
  #activities .mobile-detail-button { min-height: 30px; margin-top: 2px; padding: 3px 6px; }
  #community .qr-button { width: min(100%, 92px); }
  #community .community-contact-panel .contact-row { min-height: 34px; }
  #community .warning-bar strong { font-size: 15px; }
}

@media (max-width: 980px) and (max-height: 740px) {
  #settings .settings-layout { gap: 4px; }
  #settings :is(.settings-panel, .settings-wide) { padding: 5px 8px; }
  #settings .settings-panel .panel-title { padding-bottom: 2px; }
  #settings .settings-panel h3 { margin-bottom: 2px; padding-bottom: 2px; font-size: 15px; }
  #settings .settings-panel dl > div { padding: 2px 0; }
  #settings .settings-panel :is(dt, dd), #settings .settings-wide .settings-payment, #settings .settings-wide .settings-reminder { font-size: 12px; line-height: 1.4; }
  #settings .settings-wide h3 { font-size: 15px; }
  #settings .settings-wide hr { margin: 5px 0; }
}

@media (max-width: 980px) and (max-height: 620px) {
  #community .community-contact-panel { padding: 5px 8px; }
  #community .community-contact-panel h3 { font-size: 14px; }
  #community .community-contact-panel .contact-row { min-height: 32px; }
  #community .qr-button { width: min(100%, 76px); }
  #community .qr-card { padding: 5px; }
  #community .qr-card h3 { margin-bottom: 3px; font-size: 14px; }
  #community .qr-card p { margin-top: 3px; font-size: 11px; }
  #community .warning-bar { padding: 4px 6px; gap: 4px; }
  #community .warning-bar span { font-size: 11px; }
}

@media (max-width: 980px) and (max-height: 500px) and (orientation: landscape) {
  :is(#settings, #activities, #equipment, #advanced, #community) .section-heading h2 { font-size: 20px; }
  :is(#settings, #activities, #equipment, #advanced, #community) .section-heading p { display: none; }
  :is(#settings, #activities, #equipment, #advanced, #community) .section-heading i { margin: 3px auto; }
  #settings .settings-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #settings .settings-wide { grid-column: auto; }
  #settings .settings-panel dl > div { grid-template-columns: 1fr; gap: 0; }
  #activities .activity-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #advanced .advanced-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #community .community-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #community .section-heading { margin-bottom: 4px; }
  #community .community-contact-panel header { padding-bottom: 2px; }
  #community .community-contact-panel .contact-row { min-height: 30px; }
  #community .contact-row button { min-height: 28px; }
  #community .community-contact-panel .contact-button { min-height: 30px; margin-top: 4px; }
  #community .warning-bar { flex-direction: row; margin-top: 4px; }
}

/* Match the homepage notice cards without changing their blur or layout. */
#settings .settings-panel,
#settings .settings-wide,
#activities .activity-card,
#equipment .equipment-pages { background: rgba(9, 8, 7, .88); }

/* Community contacts live in the homepage contact dialog, not a sixth page. */
.contact-modal { display: none; transition: none; }
.contact-modal.open { display: grid; }
.contact-modal .modal-panel {
  display: flex;
  flex-direction: column;
  width: min(900px, 100%);
  max-height: calc(100dvh - 32px);
  padding: 24px;
}
.contact-modal .modal-panel > h2 { flex: 0 0 auto; margin-right: 32px; }
.contact-modal-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; text-align: left; }
.contact-modal #community .community-layout { gap: 12px; }
.contact-modal #community .qr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.contact-modal #community .warning-bar { margin-top: 12px; }
@media (max-width: 620px) {
  .contact-modal .modal-panel { padding: 16px 12px; }
  .contact-modal #community .community-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Make the horizontally scrollable mobile guide categories discoverable. */
.equipment-swipe-hint { display: none; }
@media (max-width: 980px) {
  #equipment .equipment-swipe-hint { display: block; width: fit-content; margin: 5px auto 0; padding: 1px 8px; background: transparent; border-radius: 3px; color: #765124; font-family: var(--serif); font-size: 14px; font-weight: 400; line-height: 1.35; text-align: center; }
  #equipment .equipment-tabs { scrollbar-color: #d5a55a rgba(0, 0, 0, .25); }
  #equipment .equipment-tabs::-webkit-scrollbar { height: 5px; }
  #equipment .equipment-tabs::-webkit-scrollbar-thumb { background: #d5a55a; border-radius: 4px; }
}

/* Latest announcements: date, title and native expand/collapse control. */
#home .home-announcements li { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
#home .home-announcements li > time { color: #e7bf79; font-size: 12px; line-height: 1.8; white-space: nowrap; }
#home .announcement-details { min-width: 0; }
#home .announcement-details summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
#home .announcement-details summary::-webkit-details-marker { display: none; }
#home .announcement-details summary strong { flex: 1; min-width: 0; color: #f1d48d; font-weight: 600; }
#home .announcement-details .announcement-open { flex: 0 0 auto; padding: 2px 5px; border: 1px solid rgba(225, 185, 99, .45); border-radius: 3px; color: #ffe5ac; font-size: 12px; line-height: 1.35; white-space: nowrap; }
#home .announcement-details[open] .announcement-open { background: rgba(225, 185, 99, .15); }
#home .home-announcements .announcement-details p { display: block; margin-top: 7px; line-height: 1.55; }
@media (max-width: 980px) {
  #equipment .equipment-swipe-hint { text-align: center; }
  #home .home-announcements li { display: grid; }
}