/* One platform chapter; both original device renderers keep their own markup. */
#mobile { padding-block: 42px; }
#mobile > .chapter-heading { margin-bottom: 30px; }
#mobile > .chapter-heading p { max-width: none; }
#mobile .mobile-band { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: clamp(28px,3vw,56px); align-items: center; }
#mobile .mobile-touch, #mobile .gamepad-panel { min-width: 0; }
#mobile .mobile-device-stage { padding: 0; }
.presentation-page #mobile .mobile-device-stage .platform-devices { display: block; width: 100%; max-width: 540px; padding: 10px 0 65px; }
#mobile .mobile-copy { margin-top: 18px; text-align: center; }
.presentation-page #mobile .platform-badges { justify-content: center; margin: 0; gap: 8px; }
#mobile .mobile-features { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 0; font-size: 14px; }
#mobile .mobile-features li { margin: 0; padding-left: 16px; }
#mobile .gamepad-panel { padding-left: 28px; border-left: 1px solid #987a4138; }
#mobile .gamepad-panel .gp-toolbar { align-items: center; gap: 14px; margin-bottom: 8px; flex-wrap: wrap; }
#mobile .gamepad-panel .gp-layout { grid-template-columns: minmax(0,1fr); gap: 10px; }
#mobile .gamepad-panel .gp-label { width: 17.5%; }
#mobile .gamepad-panel .gp-label button { font-size: 10px; min-height: 26px; padding: 2px 0; gap: 4px; }
#mobile .gamepad-panel .gp-label img { width: 18px; height: 18px; }
#mobile .gamepad-panel .gp-label strong { font-size: 8px; }
#mobile .gamepad-panel .gp-aside { width: 100%; margin: 0; padding: 12px 0 0; border-left: 0; border-top: 1px solid #987a4138; text-align: center; }
#mobile .gamepad-panel .gp-aside h3 { margin: 5px 0; font-size: 19px; }
#mobile .gamepad-panel .gp-quickbar { margin: 16px auto 12px; }
#mobile .gamepad-panel .gp-aside .gp-status { margin-top: 10px; padding-top: 8px; }
/* Chapter-list dependency: Black Hole remains the left render after the removed
   Gamepad chapter; Titles remains on the right. Later shared CSS had overridden
   Black Hole's existing render-left class. Keep this correction desktop-only. */
@media (min-width: 900px) {
  .presentation-page #blackhole.render-left > .chapter-composition { grid-template-columns: minmax(280px,.8fr) minmax(420px,1.2fr); }
  .presentation-page #blackhole.render-left .chapter-render { grid-column: 1; }
  .presentation-page #blackhole.render-left .chapter-content { grid-column: 2; }
}
@media (max-width: 899px) {
  #mobile .mobile-band { grid-template-columns: minmax(0,1fr); gap: 30px; }
  #mobile .mobile-touch, #mobile .gamepad-panel { width: 100%; max-width: 640px; margin-inline: auto; }
  #mobile .gamepad-panel { padding: 24px 0 0; border-left: 0; border-top: 1px solid #987a4138; }
  .presentation-page #mobile .mobile-device-stage .platform-devices { max-width: 500px; }
  .presentation-page #mobile .mobile-device-stage .platform-phone { position: absolute; bottom: 0; right: 0; width: 65%; margin: 0; transform: rotate(-3deg); }
}
@media (max-width: 700px) {
  #mobile { padding-block: 30px; }
  #mobile > .chapter-heading { margin-bottom: 20px; }
  #mobile > .chapter-heading p { font-size: 14px; }
  #mobile .mobile-features { font-size: 13px; gap: 6px 16px; }
  #mobile .gamepad-panel .gp-label { width: auto; }
  #mobile .gamepad-panel .gp-label button { min-height: 34px; font-size: 11px; gap: 6px; }
  #mobile .gamepad-panel .gp-label strong { font-size: 9px; }
  #mobile .gamepad-panel .gp-label img { width: 20px; height: 20px; }
}